IOS AutoLayout and SizeClass Automatic Layout (1)

IOS AutoLayout and SizeClass Automatic Layout (1)
1. Autolayout)

In Xcode, automatic layout seems to be a complicated system. I thought so before using it, but that is not the case.

 

We know that the main UI component of an iOS app is composed of relatively independent visual units, which are mainly responsible for outputting useful information to users, some are responsible for information input (interaction). The interaction process is often accompanied by animations, which have achieved the consistency of information transmission and the delicate feeling of user experience. Visual units are mainly view and button in actual development. The relationship between these visual units consists of two basic relationships: sibling and parent-child relationships, the entire view unit is a tree structure:

For any UI component, the position and size of the component (relative to the parent view) determine the Display Effect of the component in the UI view.

 

Autolayout (and the new sizeclass in ios8.) is used to solve the problem of layout and arrangement of these UI visual units or elements. In the past, when only iPhone 4 was used, we could write the location of no visible unit in the code, which is okay, but with the release of iPhone 5 and 6, more and more screen sizes are possible. In the future, more iPhone sizes will not be excluded, this requires that the UI elements of our APP have dynamic tonality On devices with different screen sizes, and better UI display effect has been achieved. From the current technology provided by Apple, there are three implementation methods:

 

The next step is to determine the size of the current device in the Code and manually adjust the UI elements. The disadvantage is obvious: the code is complex, error-prone, difficult to maintain, and extremely flexible;

 

The policy is to set the Visual Unit (UIView UIButton ...) the autoresizing attribute of. It specifies how to adjust the size and position of a view when its environment (parent view) changes, this method can be set in Xcode interface builder (storyboard or xib), but it can only be adjusted for the parent-child relationship, such as whether the left margin is fixed or the size is variable, the adjustment of sibling relationships cannot be achieved, and the adjustment method of apps with relatively fixed UI is basically enough;

 

The best strategy is to use autolayout and sizeclass to comprehensively adjust the parent-child relationship and sibling relationship of the UI Visual Unit, and the adjustment accuracy is higher: not only can we determine the basis for changing the position and size of a view, but we can also set different priorities for the basis, which conditions are met first and then what conditions are met, priority can be ensured for important positions and sizes, so that the entire APP has strong dynamic tonality and can meet the needs of different devices and different application scenarios.

 

When the size of an Apple mobile phone is as high as four, it is clear that the new APP must adopt the best strategy to solve the layout problem of view components.

 

Autolayout has a clear role: it helps us determine the proper position and size of the same Visual Unit under different devices and different (parent view) environments. Therefore, when the constraint applied on a UIView uniquely determines its frame (x, y, width, height), our automatic layout is correct. The two types of errors that beginners usually make are insufficient constraints (too few constraints) and constraint conflicts (too many constraints ). If the constraints you give can only determine the size of the view, or an item in the position or position (such as x), there will be insufficient constraints, in the xib or storyboard, a yellow warning appears in the prompt box on the left. If you export two or more conflicting positions and sizes according to the constraints, A Layout error occurs, but the build fails during compilation.

 

Ii. sizeclass attribute added by iOS8

In iOS8, the Size Classes feature is added, which is an abstraction of the current Size of all iOS devices. Think about the number of iOS devices: iPhone4-5-6-6plus, iPad, iPad mini, iWatch, how to write different la s based on a specific device in the past, it must be a bad thing.

 

Now with sizeclass, things can be handled more easily: Aren't you equipped with many devices? Then we just divide the width and height of the screen into three situations: (Compact, Regular, Any ), that is, compact, normal, and arbitrary. In this way, it is integrated with the high school and the third school, in a total of 9 cases. As shown in, for each case, we can set the Automatic Layout constraint of UIView in storyboard or xib separately if needed, and even whether a button is displayed can be easily implemented.

 

For detailed analysis of size class, refer to the Apple documentation and wwdc2014: Click the open link (What's New in Interface Builder ).

 

Iii. invincible combination of autolayout and size class in storyboard

Kids shoes that are familiar with Xcode's interface builder should have a deep image of UIButton's strong customization: by selecting different states of the button (normal, height, disabled ...), you can set the background image, image, text color, and other attributes for each status of the button. For details, see:

 

In Xcode6, major changes to automatic layout are similar: developers can set Automatic Layout for one or more of the nine combinations of size class according to their actual needs, in this way, when the APP runs on different screens and different rotation directions, we can use the pre-configured layout information based on the size class of the current environment to achieve great flexibility of the app ui.

 

Similar to setting different attributes of UIButton in different states, we first select a size class and then perform automatic layout for this size class. The following uses a simple layout scenario as an example:

 

Suppose we want to achieve the following effect: horizontal screen and portrait pictures and labels can both be normal, and in the "more appropriate" position: Obviously horizontal screen, the height is in the compressed state (height: compact). In addition to the normal layout, we need to add a (wAny, hCompact) size class layout:

 

First, we will deploy the default sizeclass to determine the position and size of the Avatar and label:

 

After wAny hAny is set, click wAny hAny text (bottom) and select wAny hCompact. Note that a nine-cell floating box is displayed. Drag the mouse to select the size class of the response, note that you can also choose whether to install in the lower right corner (in red box). If you deselect the check box, the Avatar will not be loaded under the current size class (naturally, it will not be displayed ).

 

In the new size class, we start to add a new layout. Note that the layout is not covered in the previous size class. We have defined the layout, knowledge adds new and independent layout information for the current size class. Here, Xcode6 has given us nine holes!

 

After the layout is complete, run it to achieve the desired effect!