Note from Ray:Tutorial Team member Matthijs Hollemans (the iOS Apprentice Series author) has ported this tutorial to iOS 7 as part of theiOS 7 feast. We hope you enjoy!
Inpart 1 of this Auto Layout tutorialyou saw that the old “struts-and-springs” model for making user interfaces cannot easily solve all layout problems. Auto Layout is the solution, but because this technology is so powerful it is also a bit more tricky to use.
Thankfully, Xcode 5 makes Auto Layout a lot easier. If you tried Auto
Layout in Xcode 4 and gave up, then we invite you to give it another
try with Xcode 5.
In this second part and final part of the Auto Layout tutorial series, you’ll continue learning all about constraints and how to apply them!
A little runtime excursion
This Auto Layout tutorial begins with a very simple app that looks like this:
Put a checkbox in front ofHorizontal Center in Containerand then clickAdd 1 Constraint. The storyboard should now look like this:
Of course, if you do end up with a misplaced frame, you can use theResolve Auto Layout Issuesbutton to fix it:
You have a Content Priority Ambiguity error. That’s quite the
mouthful. This is what it means: If neither the image view nor the label
has a fixed height, then Auto Layout doesn’t know by how much to scale
each if the height of the green view should change. (Interface Builder
seems to ignore for now that the green view actually has a fixed Height
constraint set on it.)
Let’s say at some point in your app the green view becomes 100 points
taller. How should Auto Layout distribute these new 100 points among
the label and the image view? Does the image view become 100 points
taller while the label stays the same size? Or does the label become
taller while the image view stays the same? Do they both get 50 points
extra, or is it split 25/75, 40/60, or in some other possible
combination?
If you don’t solve this problem somehow then Auto Layout is going to have to guess and the results may be unpredictable.
The proper solution is to change the “Content Compression Resistance Priority” of the label. You will learn more about that later on. For now, go into theSize inspectorfor the label and set the verticalContent Compression Resistance Priorityto 751. That makes it one higher than the priority of the image view. While you’re at it, setContent Hugging Priorityto 252.
Select the green view and tap⌘Dto duplicate it. Move the duplicate into the top-right corner:
Note:If you’re wondering why some of the views are larger than others, this is again related to the intrinsic content size. The size of the image determines how large the image view is; the size of the text determines how large the label is. Taken together with the constraints for the margins — 20 points on all sides — this determines the total size of each view.
This looks very much like the problem you solved in the introduction
in part 1, so if you think back to how you solved that, you’ll recall
that you gave the views equal widths and heights.
Select all four colored views. This is easiest in the Document Outline; hold⌘and click on the four views. You can add the constraints in one go. In thePinpopup put checkmarks in front ofEqual WidthsandEqual Heightsand then pressAdd 6 Constraints.
Unfortunately, Interface Builder does not currently provide a way to make constraints that keep the aspect ratio of a view intact. To do that, you need to create and set the constraints programmatically. You will learn how to do that in “Intermediate Auto Layout” iniOS 6 by Tutorials.
Where To Go From Here?
If you’ve made it this far, congratulations – you now know what Auto
Layout is all about, and have experimented with the basics! But there’s a
lot left to learn…
The tutorial you have just read is only the first half of the Beginning Auto Layout chapter from the bookiOS 6 by Tutorials. The second half teaches how to use Auto Layout to create more “real-world” screen layouts, and everything else you need to know about using Auto Layout from Interface Builder.
But like any visual design tool, Interface Builder has its limitations and sometimes it just makes more sense to work with theNSLayoutConstraintobjects directly from code. iOS 6 by Tutorials dedicates an entire chapter to this topic, Intermediate Auto Layout. So if you want to get to the bottom of Auto Layout,get the book!
网友评论