In the first post on Auto Layout, a single view was positioned in various ways. Now I want to look at going beyond this and placing a view within a view.
A view within a view that resizes
The first step is to create a centred view that fills the screen. If you can't remember how this is done, return to the first post. The next steps are as follows:1. Place a new view in the bottom right corner of the first.
2. Control + click and drag (or three-finger drag) out constraints in every direction being careful to constrain within the first view (and not its superview).
3. Each time you release the drag, select the top option from the box that appears.
4. Once your views look like this:
5. Build and run in an iPad simulator in the first instance. You should see everything stretch and shrink proportionally.
6. Now load this onto the iPhone simulator. You may be surprised to see the subview shrink out of sight. This is because what is determining the size of the view is not the view's apparent size but the space left after the constraints are fulfilled. If the top constraint added to the bottom constraint consumes more space than is available on the screen then it will shrink out of sight.
7. Make the view much bigger so it consumes nearly the whole of the lower half of its superview. Now update the constraints and then run again. You should see something that works more as expected. But still the stretching and shrinking is amplified in comparison to what we see on the iPad, because of the ratio of height to width being so different.
A view within a view with a fixed size
1. Select the view and delete the top and left (or leading) constraints.
2. Select the view again and click on the third icon along the bottom right of the storyboard pane.
3. Check the Width and Height boxes and then click the 'Add 2 Constraints' button.
4. Your storyboard should now look like this:
5. Build and run. The result now should be that the view remains a fixed size and stays tight to the bottom corner.
If we'd kept the top and left constraints instead of the right and bottom constraints then the view would appear in a different position because everything would be relative to those sides, and if we'd kept all constraints there would be warnings that Xcode didn't really know what it was supposed to do and so disregarded some of the constraints.
Aspect ratio: The third way
In the first example we found the view being rather squashed when viewed in portrait on an iPhone and perhaps we want resizing but we don't want resizing to be as drastic as that. So instead we'll maintain the view's aspect ratio. Something more like orientating from this:
to this:
To achieve it:
1. Create constraints from the subview to all but the top of the superview
2. With the subview selected, click on the third icon along the bottom right of the storyboard pane
3. Check the Aspect Ratio box as shown below and press 'Add 1 Constraint'
Conclusion
This was a fairly brief post compared to yesterday but we are advancing quickly through the basics of Auto Layout and next time we'll look at how to work with views that appear side by side rather than one inside the other.
Comments
Post a Comment