steps for creating UIScrollView with Interface Builder

Question

I'm in the midst of trying to use a UIScrollView and there appears to be some fundamental thing that I'm just not understanding.

Let's say I want to use a UIScrollView in my iphone app. I have a View filled with buttons that is 320x700. Obviously, this is too big for the iPhone which is 320x480. So I know I have to use a UIScrollView. However, is this the order that I should be creating the objects

1. Create a UIScrollView that is 320x700 as the dimensions in "View"
2. Place all my buttons, etc, on this scroll view
3. In the viewDidLoad set the contentSize to 320x700
4. Set the delegate of the UIScrollView to the File Owner, and the view of the FileOwner to the UIScrollView
5. Reset the size of the View back to 320x480.

Is this right?

This works, but it doesn't make sense to me. I get that the View is supposed to be the canvas, where I add all the UI elements. I want the "canvas" of the iPhone app to be 320x700, and I want to be able to put my buttons, etc on this 320x700 canvas. But if I don't change the size of the UIScrollView back to 320x480, it won't scroll, because I need to set the content size of the UIScrollView larger than its size.

But if I set the size of the UIScrollView to 320x480, then I don't see the screen and the buttons between 480 and 700 in Interface Builder! So it seems like I'm supposed to make all my edits and add all my UI elements to the UIScrollView, and then set it back to the 320x480!

Is there some other way to do this that makes more sense? What am I missing in my understanding of how this should work?

Answer 1

UPDATE

I have posted another solution here which I think is simpler and better.

ORIGINAL

Here's another way to do this that you might like better:

1. Set the File's Owner placeholder's custom class to your view controller subclass.
2. Create the UIScrollView as a top-level object in your nib. Set its size to the screen size (320x460) or just turn on a status bar under "Simulated Metrics".
3. Connect the scroll view's delegate outlet to File's Owner.
4. Set the File's Owner's view outlet to the scroll view.
5. Create a UIView as another top-level object in your nib. This will be your content view.
6. Set the content view's size to 320x700.
7. Create a strong (or retain, if not using ARC) outlet named contentView in your view controller (File's Owner) and connect it to the content view.
8. Put your buttons in the content view.

9. In your view controller's viewDidLoad, do this:

   - (void)viewDidLoad {
       [super viewDidLoad];
       [self.view addSubview:self.contentView];
       ((UIScrollView *)self.view).contentSize = self.contentView.frame.size;
   }
   

10. In your view controller's viewDidUnload, do this:

    - (void)viewDidUnload {
        self.contentView = nil;
        [super viewDidUnload];
    }
    

Full size

Answer 2

You are right, the View is the canvas where you add all the UI elements. Interface builder is kind of weird at first but you will get used to it, that is just the way it works.

You are getting stuck on the fact that you have to resize the ScrollView. You should think of it like this: The ScrollView has a frame size and a content size. The way it's built is that if the content size is larger than the frame size then it will scroll. You have to make the frame as big as you need to in the interface builder so you can position the elements that go inside. When you run the application you should resize the frame of the scroll to fit inside the iPhone's screen resolution. It doesn't make sense for your controls to have a frame bigger than the screen.

--------------------------------------------
|         |                      |         |
|         |                      |         |
|         |                      |         |
|         |                      |         |
|         |                      |<------------------ iPhone Screen frame
|         |                      |         |
|         |                      |         |
|         |                      |         |
|         |                      |         |<------- ScrollView Content size
|         |                      |         |
|         |                      |         |
|         |                      |<----------------- ScrollView Frame Size
|         |                      |         |
|         |                      |         |      
|         |                      |         |
|         |                      |         |
|         |                      |         |
|         ------------------------         |
|                                          |
|                                          |
|                                          |
--------------------------------------------

I hope this representation will make it clearer how things should suppose to work.To put it some other way, the scroll frame is the hole trough you can see the content, if the whole is as big as the content then you have no need to scroll cos you can see it all.

I would suggest also trying to write the components in code without using IB to get a better understanding.