Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS - Using storyboard and autolayout to center the UIScrollView

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.

enter image description here

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.

like image 572
Satyam Avatar asked Jul 29 '13 06:07

Satyam


People also ask

What is iOS Autolayout?

Auto Layout is the preferred technology to define layouts for user interfaces on iOS and macOS. Its goal: To make it easy for you to create user interfaces that adapt automatically to different screen sizes and orientations.

What is the use of Autolayout?

Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve.


2 Answers

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:

enter image description here

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".

enter image description here

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.

enter image description here

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
like image 195
Suragch Avatar answered Oct 20 '22 16:10

Suragch


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.

like image 41
Fogmeister Avatar answered Oct 20 '22 16:10

Fogmeister