iOS - Using storyboard and autolayout to center th

Question

I'm creating iOS app using story board and auto layout so that it will work good on both iPhone4 and iPhone5. Below is the screen shot of the view that I'm creating using story board.

In the above image, I want to keep the scroll view in the middle from leading edge of superview and the right table view. I dont want the scroll view to increase its width in iPhone5. I tried different combinations of constraints, but I couldn't achieve it.

Can some suggest me what are all constraints that I've to set for scroll view so that it will be in center.

Answer 1

You will need to do this by adding an additional view to the screen.

At the moment you have...

- UIView (main view)
    |
    | - scrollView
    | - tableView

You should put the scroll view inside another view like this...

- UIView (main view)
    |
    | - UIView (spacer View)
    |    | - scrollView
    |
    | - tableView

Now what you can do is have these constraints...

spacer view leading edge constraint to super view = 0
spacer view trailing edge to table view leading edge = 0
table view width = (whatever the width is)
table view trailing edge to super view = 0

This will lay out the spacer view and the table view so that the spacer view will grow.

Now you need to add...

scroll view width = x
scroll view height = y
scroll view centered vertically in super view
scroll view centered horizontally in super view.

Now, because the scroll view's super view is the spacer view then it will always be centered in between the table view and the rest of the space.

Answer 2

How to Center a View on the Storyboard

This answer has been updated for Xcode 8.

This answer is for people who are just doing a general search for how to center things using a storyboard and don't understand constraints.

I assume you are using a Storyboard (not XIB files) and Auto Layout. This is the default nowadays so if you don't know what that means then don't worry about it. If you want to check, though, you can click Main.storyboard in the Project Navigator and then the File inspector. You can make sure that Use Auto Layout is checked:

Select your button (or whatever view you want to center) on the storyboard. Then click the align button on the bottom right. Select "Horizontally in Container" and "Vertically in Container". Click "Add 2 Constraints".

If it wasn't perfectly centered already you may need to do one more thing. Click the "Update Frames" button that is two to the left of the align button. Your view should now be centered on the storyboard.

And more importantly, now when you run your app it should be centered no matter what device size you are using.

I originally learned this from Creating the user interface – Auto layout. The basic idea is still the same, but the UI arrangement has changed a little in Xcode now.

See also

• How to set constraints programmatically