MohanSingh MohanSingh - 1 year ago 85
iOS Question

How to use Xcode Storyboard to lay out screen content that is taller than the screen?

I use swift 2.0 for programming and I'm confused with adding more objects on view controller. For example, I need 14 buttons on my view controller with required constraints. But I'm able to add only 7 buttons one by one in my view controller on story board. Because no more place to add objects on view controller. So, How to add number of objects in view controller on story board?. Please refer following screen shots. Thanks for your help friends.

View controller on story board:

enter image description here

I'm able to add only 7 buttons with proper constraints. but i need to add 14 buttons with proper constraints. when view controller is scrolled then the button 8 to 14 will shown one by one respectively button 1 to 7.

Output on iPhone 5 without scroll view :

enter image description here

Output on iPhone 4s with scroll view:

enter image description here
I need like this on iPhone 5 , but 14 buttons. The 8 to 14 buttons arranged respectively 1 to 7 buttons.

Answer Source

You can lay this out in a Storyboard.

  1. Click on your viewController, and then in the Size Inspector, set the Simulated Size to Freeform and set the width to 320 and the height to 1136. This will give you a tall skinny layout.

    Freeform layout

  2. Add a scrollView to that. Size the scrollView to the full screen. Pin all four of its sides to its superView.

  3. Add a UIView to the scrollView. This is your contentView. Size the content view to the full screen. Pin all four of its sides to the scrollView.
  4. Set an Equal Widths constraint between the contentView and the scrollView. This will only allow it to scroll vertically.
  5. Set a height constraint of 1136 for the contentView.
  6. Lay out your 14 buttons in the tall viewController.

    Xcode showing the tall viewController with 14 buttons

When you run, your contentView will scroll.

demo in iPhone 5 simulator

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download