Use of AutoLayout and Sizeclass in Xcode6

I. About automatic layout (AutoLayout)

In Xcode, the automatic layout seems to be a very complex system, and I think so before actually using it, but that's not the case.

We know that an iOS application whose main UI components are composed of a relatively independent visual unit, some of which are primarily responsible for outputting useful information to the user, while others are responsible for the input (interaction) of the information, often accompanied by an animated effect in the process of interaction, The consistency of the entire message delivery and the delicate sense of the user experience has been achieved. Visual units, in the actual development of the main is the view, button, etc., then the relationship of these visual elements is composed of two basic relationships: sibling relationship and parent-child relationship, the entire view unit is a tree structure:

For any UI component, the location and size of its (relative to the parent view) determines how it will appear throughout the UI view.

AutoLayout (and the new Sizeclass in iOS8) are designed to solve the problem of how these UI visual units or elements are laid out and arranged. In the past only iPhone4, we can in the code will not have a visual unit of the location of death, this is no problem, but with the release of IPhone5, 6, the screen size is more and more likely, the future does not exclude more size of the iphone released, This requires that the UI elements of our app have some dynamic tunable on devices with different screen sizes, and have achieved better UI presentation. From the current technology provided by Apple, there are three ways to achieve the following:

The worst is, the code to determine the size of the current device, the UI elements of the manual adjustment, the shortcomings are obvious: code complex, error-prone, and maintenance difficult, flexible and very poor;

The strategy is, by setting the visual unit (UIView UIButton ... The Autoresizing property, which is preset when the view's environment (parent view) changes, how its size and position should be adjusted, the method can be set in Xcode interface Builder (storyboard or xib), But it can only be limited to the parent-child relationship adjustment, such as whether the left margin is fixed, the size is variable, and the adjustment of the sibling relationship can not be achieved, for the UI more fixed app This adjustment method also basically meet the demand;

The best thing is to use AutoLayout and sizeclass to make a full-scale adjustment to the parent-child relationship and the Brotherhood of the UI Visual unit, and to adjust the accuracy more: not only can you determine what the position size of a view is based on, but also you can prioritize these bases differently, First meet what conditions, and then meet what conditions, for the important position size can be a priority to ensure that the entire app has a very strong dynamic tunable, to meet the needs of different devices, different application scenarios.

With up to four apple-sized iphone sizes, it's clear that the new app must be the best way to address the layout of the view component.

The role of AutoLayout is very clear: Help us to determine in different devices, different (parent view) environment, the same visual unit should have the appropriate position and size, so when the constraints imposed on a uiview can uniquely determine its frame (x, y, Width, Height), the use of our automatic layout is correct. The two types of mistakes that novices usually make are constraints (too few constraints) and constraint conflicts (too many constraints). If you give a constraint that only determines the size of the view, or if there is an item (such as x) in the position or position, there will be insufficient constraints, and in Xib or storyboard, a yellow warning appears in the left prompt box. If you give a constraint that deduces two or more conflicting positional dimension results, it creates a layout error that builds directly on the build.

second, about the iOS8 new Sizeclass attribute

In IOS8, the new size classes feature, which is an abstraction of all of the current iOS device sizes, is also an abstraction, think about how many iOS-sized devices you have now: Iphone4-5-6-6plus, ipad, ipad Mini, IWatch, It must be a terrible thing to write a different layout for a particular device, as before.

Now, with the sizeclass, things are better: you are not a lot of equipment, then we will only divide the width and height of the screen into three cases: (compact, Regular, any), that is, compact, normal and arbitrary. This width and height of 331 integration, altogether 9 of the situation. As shown, for each case, we can set the UIView automatic layout constraint individually in storyboard or xib, or even if a button is displayed, if necessary.

For a detailed resolution of size class, refer to the Apple documentation and WWDC2014: Click the Open link (what's New in Interface Builder).

three, storyboard AutoLayout and size class of invincible cooperation

Interface Builder for Xcode should be familiar with the UIButton of the extra-strong customization Image: By choosing the different states of the button (normal, height, disabled ...). ), we can set each state individually, the button's background image, image, text color and other properties, see:

And the Xcode6 of the major changes in the automatic layout is similar: developers can according to the actual needs, for one or several of the nine combinations of size class to automatically layout the settings, so that when the app runs on different screens, different rotation direction, We can use our pre-set layout information based on the size class of the current environment to achieve the maximum flexibility of the app UI.

Similar to setting different properties for different states of UIButton, we first select a size class and then automate the layout for that size class. Let's take a simple layout scenario as an example to illustrate:

Suppose, we want to achieve the following effect: Horizontal screen and vertical screen head and label can be normal reality, and in the "more appropriate" position: obviously horizontal screen when the height is in the state of compression, (height:compact), we need to the normal layout, but also to add a (Wany, Hcompact) The layout of size class:

First, we lay out the default Sizeclass to determine the position and size of the Avatar and label:

After setting up (Wany hAny), click Wany hAny text (bottom), select (Wany hcompact): Note After clicking a nine Gongge float box, drag the mouse to select the response size class, notice in the lower right corner (indicated by the red box), You can also choose whether to install, if unchecked, the avatar will not be loaded under the current size class (it will not be shown).

Under the new size class we begin to add a new layout, note that this does not overwrite the size class we have defined the layout, the knowledge of the current size class to add new, independent layout information, Sancho, Xcode6 This breath gave us nine holes Cool!

Layout is complete, run up, you can achieve the effect we want!

Use of AutoLayout and Sizeclass in Xcode6