The practice and skills of iOS development--autolayout

It has been a long time since the blog has not been updated, because the recent work is really very busy, so I was neglected to share. Today we are going to talk about the development and use of AutoLayout in depth. I'm in http://blog.csdn.net/CHENYUFENG1991/article/details/47165751, http://blog.csdn.net/CHENYUFENG1991/article/. details/47062527, two blogs in the AutoLayout of the generalities, not to further the use of further explanation. Today we will make up for this vacancy. This demo is uploaded to Https://github.com/chenyufeng1991/iOS-Autolayout.

(1) First we create an iOS-based project and we develop it on the storyboard. You need to select Use Auto Layout on the right, and the following use size Classes is optional, as we don't have a size Classes yet.

。

(2) need to be reminded that in the project can not let some interface check AutoLayout, some interface does not check AutoLayout, this will let the program crash. Also, there are two principles in AutoLayout: The first is that AutoLayout is a relative layout (setting relative constraints), and the other is that the relative layout is for the parent container.

(3) After the election of AutoLayout, we can find that the size of the interface becomes the size of the ipad, which makes us very uncomfortable. After selecting an interface, we can select a phone size on the right.

。

(4) Design AutoLayout in storyboard and xib, mainly using the following two options, align and pin.

。

(5) Let's first look at the options in align:

。

Horizontally in container is centered horizontally relative to the parent container. Vertically in container is centered vertically relative to the parent container. When selected, click Add Constraints.

(6) Look again at the options in the pin:

。

First of all, we generally do not check constrain to margins this option, this option represents the space around the interface. The default may be 8 points of white, but this is not what we need.

The top four options indicate the distance to the top left and bottom right. Can be set according to the needs of the attention must be selected in the middle of the small red line, otherwise there is no effect. However, the point-and-click option shows that you can select a reference when setting the constraint distance, which can be either the view closest to the current view or the parent container.

The width and height below are the length and width of the fixed view. If you don't want to limit the length and width of the view on all screens, you don't need to select it, and the system automatically scales the view based on your other constraints. If you must die long and wide, you can set it.

The aspect ratio below sets the aspect ratio of the current view.

(7) above align and pin we have selected only one view, when we select two or more view, to analyze the following align:

。

When we select two view, there are a few more options in align.

Leading edges,trailing edges,top edges,bottom Edges, respectively, represents two view left, right, top, and bottom edge alignments.

Horizontal Centers,vertical Centers respectively represents two view horizontal and vertical alignment. The baselines represents the baseline alignment.

(8) When two or more view is selected, the PIN option is as follows:

。

Found that many of the equal widths and equal height, the two meanings are clear, is the selection of multiple view, such as width or high. The align meanings shown below are aligned with (7).

(9) Let's take a look at a view setting the effect after the constraint and how to set the parameters, I use the following red view to explain, when the view is selected, the right side of the views can see all the constraints of the current view:

。

All constraints:

。

When you double-click the point to open a constraint, you can see the details of the constraint. Let me explain the definition of the constraint:

y = A * x + B;

Where y represents a constraint on the first view, X represents a constraint for the second view, a represents a scale factor, and B is a constant. We take the above top Space to Superview equals:284 as an example to explain.

。

First item is what I call y,relation equals equal sign, Second item is x,constant is B constant, multiplier is a scale factor. The above constraint means: The top position of the red view is the top position of the parent view plus 284 points, and the scale factor is 1. Priority is given to priorities, and we don't think about it at this stage. All other constraints we can set parameters and analysis in this way.

(10) Let's analyze the above three gray, blue, and black view to divide the width of the interface between the operation. The scale factor is involved here. Hold down the control key, press and hold the drag Blue line to the parent container, or hold down the right mouse button to drag the Blue line to the parent container and select equal Widths. Then the right side will appear as follows:

。

Represents a scale factor on the width of the parent container. After you double-click the point to open, you can set the following:

。

In multiplier, you can fill in 1:3 such proportions, or you can fill in decimals. Here, I set the width of the view to 1/3 of the width of the parent container and then set the three view to the same. Similarly, I set the height of the following red view to 1/2 of the height of the parent container.

(11) Now I want to set the height of the above three view to half the width, how should this ratio be set? Select View, then aspect Ratio. The right side will appear as follows:

。

Double-click to enter after:

。

In this case, the arguments and the dependent variables are all for the same view. The scale factor is width of 1,height of 0.5.

(12) Resolve conflicts. In the use of AutoLayout, we have to deal with the problems that are often encountered when constraining conflicts. Some conflicts may not have any effect, and some conflicts may cause crash in the version upgrade. The violation of the warning class is shown in yellow, and the violation of the error class is shown in red. Let's talk about how to solve this.

The simplest and most foolish solution to the conflict is to modify it according to the system's prompt.

。

As you can see from the left, expected represents the value you want to display based on your current constraints, and actual represents the value you currently display in storyboard. Depending on the change prompt, if you select "Update frames", you will leave the constraint unchanged and change the effect currently displayed in storyboard. That is, the final effect will be the display in expected. If you select "Update constraints", just in contrast to update frames, you will change the value of the constraint, whichever is the effect currently displayed in storyboard. And the next two options are basically not used.

And for the red conflict, that is more serious. Some are hints that you want to remove some constraints, and some that indicate that you are missing some constraints.

。

Is that you are missing a constraint that causes it.

However, when you are more familiar with the AutoLayout, will not take the above-mentioned system prompt method to resolve the conflict, but will be on the right according to a view of all the constraints to analyze, and then manually delete and change constraints, so that can quickly improve their layout ability.

(13) Interface Preview. When we layout good one interface, how can we see the display effect? Different screens to run? Now the iphone has four kinds of screens, do you want to run 4 times separately? Now there is a more convenient way to preview. Switch to the Assistant Editor view and select Preview. With the + button in the lower left corner, you can add 4 different screens, and you can see the results at the same time.

。

：

。

For AutoLayout, not only to understand the basic layout concept, more importantly to practice, and then for the layout can be arbitrary.

Practice and tips for iOS development--autolayout