3

I have an input page with labels and buttons that is too long to fit on the screen of any of the iPhones. I want to let the user scroll vertically to make all the inputs.

I'd like to do the layout in storyboard.

All the suggested answers I can find either deal with different situations: - Layout all by code - Content is images which have an inherent size - May work with autolayout/xcode 5 but I can't make work for adaptive layout and xcode6

Here's visually what I am talking about. The yellow box is the view that holds the input elements. The black box represents what can be seen at any time.

Image of desired screen

Here's what I have tried, based on my research:

  1. Added a ScrollView inside the main view that completely fills it. (This should be the black rectangle, I think.)
  2. Added a View (to act as content container) inside the scrollview. (The yellow rectangle)
  3. Added the elements needed to the content view. To go below what is visible on the screen, I dragged and extended the View so it is large enough to contain everything.
  4. Added constraints pinning the content view to the scrollview on all sides.
  5. Added constraints making the content view the same width and height as the top level view.
  6. Added constraints to the width and height of all the elements and from their sides to the sides of the container view.

What I get in the simulator: Just the elements that can fit within the original screen size.

Can anyone help solve what I feel like must be a common problem?

Thanks.

tangobango
  • 381
  • 1
  • 4
  • 17
  • 1
    Please add constraint to scroll view which will bind scroll view with main view of viewcontroller. do not use height or width constraint just user padding constraint like trailing, leading,top, bottom space. – hardik hadwani Nov 03 '14 at 06:58
  • @hardick hadwani Thanks. That sorted it. I'll post below what I believe to be the minimun set of constraints to get this to work. – tangobango Nov 03 '14 at 23:10
  • @hardik hadwani sorry for the misspelling and thanks! – tangobango Nov 03 '14 at 23:27

1 Answers1

4

Thanks to hardik, I think I have this sorted out. Most of what I was doing was right, but I was missing a key set of constraints (and I had one extra that I didn't need or want.)

Here is what I believe to be the method to use and the minimum set of constraints that make it work.

  1. Add a scrollview inside the main view. Have scrollview fill the entire view.
  2. Add a content view inside the scrollview. Expand it as necessary to add your content (labels, buttons, etc.)
  3. Add constraints pinning the content view to the scrollview on all sides.
  4. Add constraint pinning width of content view to width of main view -- not width of scrollview. Leave height alone. (The height constraint is the extra bit I had that I didn't need.)
  5. Add constraints pinning the scrollview to the main view on all sides. (This is the key addition.)

Now you will need to add constraints within the content view to lay out the content. These obviously differ based on your situation. I needed to have constraints that defined the layout completely from top to bottom and side to side.

constraints

tangobango
  • 381
  • 1
  • 4
  • 17