Ios:how to make AutoLayout work on A ScrollView

Ios:how to make AutoLayout work on A ScrollView

Posted on June 11th, 2014

Ok, I ' ll admit. I ' ve been seriously struggling with AutoLayout ever since it ' s been introduced. I understand the concept, and I love the idea of it, if I actually do it, it almost never behaves as it does in my H ead.

So if I had a chance to go talk to a actual Apple Engineer about AutoLayout last week at WWDC, I made sure to go. I thought of my most painful experience using AutoLayout Recently–when I is making a login screen with username and pas Sword fields on a ScrollView (so it scrolls up if the keyboard comes up) –and had the Apple engineer walk me through th e example.

Here's what we made:

This is just the centered on a ScrollView. You can see the AutoLayout in work here–the, the input fields is centered correctly both on a 4s and a 5s device.

This ' simple ' solution took the Apple Engineer minutes to solve! However, several senior engineers I know said that they ' ve never been able to get AutoLayout working quite right on a scro Llview, so minutes are actually not bad!

Here is the key tricks to getting autolayout to work on a ScrollView:

One View

The ScrollView shouldhas only one child view. This was forced in Android, so I should has made the connection, but I just didn ' t think of It–it ' s too easy to put the Both input text fields right onto the ScrollView, especially in Interface Builder.

Here's what's the View Hierarchy should actually look like:

Again, make sure to put all your fields and custom views inside the one child view of the scrollview!

Equal Widths

I ' m going to start with the constraints from the outside (the "on the main View" in (to the stuff inside the Contentview).

The obvious starting point are to bind the ScrollView to the View–just select the ScrollView from the View hierarchy, and Add the following constraints:

The key to getting the constraints to work properly however, was adding anEqual Width constraint between the main View and the Contentview. The ScrollView adjusts to the size of the content inside of it, so setting the Contentview to the Width of the ScrollView Leaves the width of the contentview ambiguous.

To create the Equal Width Constraint between the Contentview and the view, select the Contentview in the view hierarchy an D Control + Drag to the view–you should get a pop-up this gives you the "Equal Widths" option:

Your constraints between the main View, ScrollView, and Contentview should look like this:

Content Insets

The constraints between the ScrollView and the Contentview are surprisingly straight forward–just bind the Contentview t o The ScrollView (make sure the constant to the bottom layout guide is 0):

The constraints between the Contentview and ScrollView is now as follows with all constants set at 0:

If your storyboard is a like mine, you might notice the actual contentview are not the full height of the main view or T He ScrollView:

However, we do want to make sure the Contentview are centered when it's rendered on a device. To do, we need to write some code to property set the Content Insets in the Viewcontroller:

123456789101112131415161718192021222324252627282930313233

// ViewController.swiftimport UIKitclass ViewController: UIViewController {                                @IBOutlet var scrollView : UIScrollView    @IBOutlet var contentView : UIView             override func viewDidLoad() {        super.viewDidLoad()        // Do any additional setup after loading the view, typically from a nib.    }    override func viewDidLayoutSubviews()    {        let scrollViewBounds = scrollView.bounds        let containerViewBounds = contentView.bounds                var scrollViewInsets = UIEdgeInsetsZero        scrollViewInsets.top = scrollViewBounds.size.height/2.0;        scrollViewInsets.top -= contentView.bounds.size.height/2.0;                scrollViewInsets.bottom = scrollViewBounds.size.height/2.0        scrollViewInsets.bottom -= contentView.bounds.size.height/2.0;        scrollViewInsets.bottom += 1                scrollView.contentInset = scrollViewInsets    }}

Once you add the proper constraints to the Contentview (see next step), your final result would look like this:

The ugly colors is meant to differentiate, the ScrollView (green) from the Contentview (red). Again, in the storyboard, the Contentview are at the top of the ScrollView, but with our content insets set in code, it now becomes centered.

Centering multiple views

The final step is to add AutoLayout to the Contentview. The same as adding layout normally to any view, so I won ' t go into much detail here.

The one thing I did learn that I ' d like to share (although now it seems obvious) was how to center the other text fields in T He view. Previously, I put the text fields into a container view, and centered the container view in the parent view. However, that's not necessary.

Instead, you can center each of the text field horizontally in container (so they ' re now centered and on top of all other), and Then add a constant of ~ one (so it's moved up pixels from the center), and add a constant of-25 It's moved pixels from the center).

This would leave you with a space of pixels between the the the same text fields and the space exactly in between them would be t He center of the view.

Does any of the other AutoLayout tips? I ' m always looking-learn more and improve, so-let me-know in the comments!

You can view the source code on Githubhere.

Enjoy the article? Join over 8,500+ Swift developers and enthusiasts who get my weekly updates.

Ios:how to make AutoLayout work on A ScrollView