How to set up UIScrollView in Interface Builder with UI elements outside the main iPhone view?
Asked Answered
V

7

9

I am building a data entry form in my iPhone app, and there are more data fields than will fit on the screen. I figured I should put them into a UIScrollView so that the user can scroll through the form. What's the best way to build this in Interface Builder? I know that I can do it programmatically, but I'd like to do it in Interface Builder if I can. The problem is, how can I lay out UILabels, UITextFields, etc. if they fall outside of the main iPhone screen--in the part of the screen for which the UIScrollView becomes useful?

Vuillard answered 11/8, 2010 at 13:45 Comment(0)
L
0

Double click to open the UIScrollView itself in IB, and increase the size to the size you need or bigger (you can always shrink at runtime). Then just add the elements.

EDIT: Doesn't work - see here instead.

Lizettelizotte answered 11/8, 2010 at 13:53 Comment(0)
P
7

The best workaround I found for this problem (which I consider embarrassing for Interface Builder) is this:

  1. place a "container" UIView inside the UIScrollView, set the size of the container UIView to what is needed (e.g. 320 x 1200) with the inspector and add your content inside that container view. (your buttons, textfields, etc).
  2. set the contentSize for the UIScrollView, in code, to be the same as the size of your container UIView. somewhere in viewDidLoad for example (e.g. scrollView.contentSize = containerView.frame.size;)
  3. To modify content beyond the scrollview's bounds in Interface Builder, you have to drag your container view outside of the scroll view each time, make your modifications, then drag your container view back inside the UIScrollView and build.
Petua answered 3/5, 2012 at 7:37 Comment(2)
this answered the question for me. You cannot have your subviews directly underneath the UIScrollView. You need to have a UIView inside the UIScrollView as a container for all your Subviews (I know it is a little stupid).Cahan
This approach saved me a lot of trouble. Main lesson -> if you are planning to use xib interface for designing the contents of your scrollview, better to do it in a separate uiview then programmatically add it to your scrollview as a whole and then set your contentsize after.Cyanosis
P
5

This is actually straightforward:

  1. Create a new view controller class e.g. MyScrollViewController

  2. Create a new xib with a UIScrollView as the topmost view, and set the class of the File's Owner to MyScrollView Controller

  3. Set the view attribute of File's Owner to the scroll view

  4. Drag the bottom of the scrollview to create the desired size.

  5. Position your various other UI elements as sub-views of the scroll view

  6. Create and connect an IBOutlet in MyScrollViewController.h for the scroll view, e.g.

    @property (retain, nonatomic) IBOutlet UIScrollView *scrollView;
    
  7. In MyScrollViewController's viewDidLoad method, add the following line of code:

    self.scrollView.contentSize = self.scrollView.frame.size;
    

Th-th-th-that's all folks!

Pumice answered 31/12, 2011 at 2:16 Comment(1)
This worked for me in portrait mode, but not when I rotated it to landscape. I used this line instead self.scrollView.contentSize = CGSizeMake(self.view.bounds.size.width, 600.0f); Where the height is slightly larger than the content in the scrollview.Awildaawkward
T
1

Set up "Content Insets" of "Scroll View Size" on the "Size inspector": Bottom = YourFrameHeight - ScreenHeight. It will allow you to scroll in ranges of top-to-top, bottom-to-bottom of your UIScrollView

Theatrics answered 16/11, 2011 at 7:55 Comment(0)
L
0

Double click to open the UIScrollView itself in IB, and increase the size to the size you need or bigger (you can always shrink at runtime). Then just add the elements.

EDIT: Doesn't work - see here instead.

Lizettelizotte answered 11/8, 2010 at 13:53 Comment(0)
B
0

I've had the same issue as well. What I ended up doing was putting another UIView inside of it and setting the height to whatever I wanted. Then I put all my UI elements inside of it. This allows you to drag the inner view up and down.

Brattishing answered 11/8, 2010 at 13:59 Comment(0)
I
0

What worked for me in xCode5 (no storyboard, using autolayout) is using the 7 step answer above the ends with 'Th-th-th-that's all folks!' and adding two steps.

8) Drag a new UIView to interface builder. Not into the Scroll view. Just on its own. Put all your controls/view into that and make it as big as you want. I hooked up this view as contentView.

@property (weak, nonatomic) IBOutlet UIView *contentView;

9) Then in - (void)viewDidLoad

[self.mainScrollView addSubview:self.contentView]; [self.mainScrollView setContentSize:CGSizeMake(self.contentView.frame.size.width,self.contentView.frame.size.height)];

Just saying that made it work for me.

Illusage answered 18/6, 2014 at 17:19 Comment(0)
T
0

There is finally a sensible solution to all of this and that is to place a Container View inside of the UIScrollView. As Interface Builder displays the UIViewController inside the Container View separately, you can finally see what your UIScrollView content is going to look like without crossing your fingers and standing on your head.

You still need to programmatically set your content size but a least you can now visualise what it going on.

Tiu answered 20/7, 2016 at 23:9 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.