AutoLayout Use detailed Introduction

A preliminary introduction to AutoLayout

Speaking of AutoLayout, I also began to focus on the iphone 6 and 6+. I am a pure code program before the person.
At that time have heard xib and storyboard (now xib have used less, the following directly said storyboard. In fact, Xib and storyboard just father and son relationship, I began to find information on the Internet, online to explain my summary to everyone as follows:

1.代码是storyboard的升级。就是说，代码比storyboard牛逼啦。这种说法是这样来的：许多IOS开发者，都是在Xib的引导下走向了这条不归路的。在他们使用Xib的时候，他们开始入行，而后，开始大规模的接触代码布局UI，从而逐渐成为大牛了。其实我们心里肯定都有这种感觉嘛，用代码写才是程序员嘛，在那构图好像自己没有工作一样。  2.storyboard比代码编写更轻松。这是因为，许多代码可以完成的事情，我们用storyboard真的可以很快的完成，而且storyboard的视图布局（等等工具）可以让我们更加清晰地知道我们的界面长成什么样了。用代码，So慢啦。但是如果

I am mixing it from code to storyboard two ways. Just two months ago, I have not used storyboard (a sentence hehe, in fact, not to use, is not!) I have always been code, have not used Xib). Later, that is, later, the evil apples, make out 6 and 6+ these two things, hehe, not, at that time feel the code to match that is how troublesome thing AH (now two mixed, found, in fact, with pure code can also be very convenient to complete the adaptation), so, I began to learn the use of storyboard. Of course, this is why I write this blog, because, I study storyboard, but Google is not the right article. Not English I do not understand is reproduced reproduced, it seems to see or the few, really can't find what they want (everyone can try OH).

Story version (Storyboard)

The use of the story version of the Internet or there is a lot of information can be found. This is not a detailed introduction. The basic introduction is as follows:
If you are familiar with iOS development code but are not familiar with storyboard, it means that you are not on the same path as others. The rules for getting started with iOS are that you started by learning Xib UI layouts, and then you started using code layouts like Uiview,uiviewcontroller.

In the storyboard, you can drag uiimage,uibutton,uiview and so on, with segue you can do interface jump and so on. That is, in addition to complex operations we need code (such as complex animation, etc.), others, we can use the view to drag and pull to complete. Detailed use of the story version I hope you can Google. This is not covered here.

AutoLayout Introduction

This is our learning focus (IOS8 has two two points, one is automatic layout, one is sizeclass,sizeclass at the end of this article will have a brief introduction, detailed introduction see later blog). Yes, after 6 and 6+ out, we need automatic layout, of course, we can use the code for device judgment or frame.size.width and other ways to layout, the following will be said. The IOS6 Apple team has released the AutoLayout version, now using it, is already more mature technology.
In the story version, we can use AutoLayout or AutoLayout. When not in use, we are in the "absolute layout", when used, we are in "automatic layout". The two names are described below. If you're familiar with HTML, you might use a way to lay out your div in CSS. Many of them are automatic layouts. We can think of this, the world has a wide range of browsers, and the Code of the Web page may not be a different size of the browser to do a proper pairing of the wrong. So, in HTML, the relative distance of the CSS is used to calculate the distance or width of the corresponding Div. is the div inner and outer spacing:

In the automatic layout, we are not using the following code:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 1)]; view.backgroundColor = [UIColor clearColor]; [self.view addSubview:view];

The implementation of the relevant story version we use absolute positioning of the position and size of this red view (10,100,100,100) above the code and the story version, we put an attempt to pinpoint the location in a position. This approach is called "absolute layout". The "relative layout" we used in AutoLayout, that is, the amount of space relative to a view. Such as:

Here we can see the picture to the right of the black view of the English description, leading space:125 is the parent view left margin 125px. Top Space 49 is the Red view top margin 49px. Equal height 15px that is, black view and red view, such as the height difference 15px, there is one is to determine their height of 82px, we have 4 relative distance to determine the position of the black view. As you can see, the code is not used here, and we have determined the location of a view. The relative layout is used. In the story version of the AutoLayout, any view, there are many relative layout of the image, such as we can have the parent view for the layout of the image, you can also follow a button UIButton and so on, as long as the view, you can use the relative layout of the image. In general, we determine the location of a view using a relative layout, we need to determine the width, height, x distance, y distance of these four parameters, and the following study and even later use, mostly around these four parameters go on.

Preliminary use of AutoLayout

Using AutoLayout, let's first familiarize ourselves with the interface buttons for AutoLayout support in the story version.
First back to the beginning of the project, we need to open the AutoLayout support for the project.

, "Use Auto Layout" ditch ditch we choose. The following "Use Size Classes" is another artifact inside the iOS8, at the end there will be cut short introduction.
When we right-click a view onto another view, we can see the following view:

, we right-click on the black view, pull to the red view above, the above selection box appears.
Here is a point for me and everyone to explain in detail the meaning of each option:

1.Horizontal Spacing:左右距离，就是本view和红色view的左右水平距离2.Vertical Spacing：上下距离，就是本view和红色view的上下垂直距离3.Top：上边距，就是两个view的上边距的距离差4.Center Y：垂直中点：就是和红色view的Y轴方向的中点5.Bottom：下边距，就是两个view的下边距的距离差6.Left：左边距，就是两个view的左边距的距离差7.Center X：水平中点：就是和红色view的X轴方向的中点8. Right：又边距，就是两个view的又边距的距离差9.Equal Widths：表示两个view等宽10.Equal Heights：表示两个view等高

This is the initial introduction of automatic layout! is not feeling very excited, the relative distance is based on the left margin, the difference between the right margin is determined. We call this thing "restraint." Yes, each constraint is a determination of the view position. By defining multiple constraints, we can determine the specific height, width, left margin, right margin, and so on for a view. (constraints can not be less, less than the view location is not sure, the constraints can not be more, more will be error, because the location of the disorder)

Constraints

When we use constraints, there is not enough and no less. The location of the view is less than the position disorder. Such as:

When our constraints are too low, a red warning appears above the upper right. We can see the detailed description by clicking in:

Here is a detailed explanation of the cause of the warning. Because there are too few constraints or too many constraints, the above warning will appear. So this time, it is necessary to check their own constraints is not a problem pull (at the beginning will find that the corresponding constraints need time, more skilled use later, will find that there is basically no big problem when adding constraints)
If our constraints are added properly, our view looks like this:

You will see the green. Yes, if the constraint is added properly, it will see the green normally. If the constraint has been added, then our view will already have a position in the story version, close the above image, red and black are already in a position above. If we move the view at this time, such as:

We will see that there is a yellow line, this is the story version of the reminder to us that the current location of the view and the expected position has changed, but also the value of the changes to us.

We can do this at this time to eliminate the yellow: we can see four buttons in the lower right corner of the attempted area, where the third one is the effect above. We can click on the first one Update Frames , and this time our view will be re-typeset according to the already written constraints. Of course, if we find that the interface works better after the location changes, then we can click on the second option Update Constraints . We can literally see that the "constraint" is refreshed, so that the constraint can be changed accordingly based on the current UI layout.

Popular buttons

We can add constraints to the view by right-clicking on it, or we can add a constraint here:

We can click on the first of the four buttons below. Here we pay attention to one, need to choose at least two view Oh, otherwise the relative object to find which Ah! Click on the following Add X Constraints to add a constraint.
Of course, we can also add constraints by selecting only one view, and the other relative object is Xcode's own judgment, which is the second of the four buttons above. This is not often used, it is not introduced. The comparison is really not necessary. I add the constraint is to use the right mouse button to pull, and soon, the others are not needed.

Constraint level

This has a need to mention, perhaps everyone in the use of AutoLayout will not encounter, but in the event of a encounter? Is that the constraint is actually a level. So, if you are c,a let you do it, B let you do that thing, what should you do? This is a constraint, and if there are two different objects with the same constraints loaded on a view, how is this view displayed? In fact, in general, this has already been an error, and this is the wrong operation. But there are some special circumstances, I have met (specific people may encounter, here does not say), it is necessary to add two or more likely to have more of the same function constraints, this time if the constraint has a priority, then the compiler does not know which constraints to load it! We look here:

We point to a view with a constraint added, and then on the right you can click on Edit the button to see the picture above. You notice Priority This parameter, oh, this is the priority. The default is 1000. If your side is relatively wide and there are different constraints, you can change this value, which is represented by different priorities such as 800,900,1000. (Beginning to understand AutoLayout, for their own realization, finally found this function.) Now you can use this priority, and here's the code:) ）

Preliminary summary

Through the above preliminary introduction and explanation, you may have already learned what is AutoLayout. Yes, in AutoLayout, without the concept of frame we said before, instead, it brings relative position. Your height can be determined by relative position, or by specifying a specific value. Moreover, our relative position can be any element above the screen, such as the upper and lower left and right screen margin and the upper and lower middle line or left center line, or it can be a custom view. Once the view has its own position, it can also be used as a relative position for other view.
The above is only preliminary use. Detailed use is also more, here do not write, otherwise do not know how much to write. But it doesn't mean you won't use it. In fact, you simply operate a red blue green view, and then change the location of the multiple operations several times, you will find that the AutoLayout has been very much used. Here is one, you will find in this process AutoLayout, is not enough to express you or your cruel designer design of the page effect. This time, open the Web page back to continue to see the following article of the ...

Deep

We all know that in the world of computers, we operate 01010101 ... Appearances are the code we write. So is the AutoLayout that we just used just as simple as the interface drag element? It's definitely not. AutoLayout is followed by code. If you have used git and other code management tools, you will find that many people cooperate AutoLayout error. Git is a code management tool, how can the AutoLayout produce error reminders? Because AutoLayout is also code, his background implementation is also code.
At this time, I knew the language of a VFL. is a very anxious language, just drink the following:

 Nsdictionary *metrics = @{@ "First": @ (FIRST) @ "second": @ (second), @ "third": @ (Third), @ "    Forth ": @ (Forth)};    NSString *VFL = @ "|-0-[_labriqi (first)]-1-[_labpingjun (second)]-1-[_labcankao (third)]-1-[_labresult]-0-|";    NSString *VFL2 = @ "V:|-0-[_labriqi (_labpingjun,_labcankao,_labresult)]-0-|"; [_cellview addconstraints:[nslayoutconstraint CONSTRAINTSWITHVISUALFORMAT:VFL options:0 metrics:metrics views:dict1    ]]; [_cellview addconstraints:[nslayoutconstraint constraintswithvisualformat:vfl2 options:0 metrics:metrics Views: Dict1]];  

The VFL language is the same as above, half-dead. Using the VFL and the interface above to add the constraint is the same effect, that is, there are some complications, you can Google. But I used for a long time, the reason is very simple, if the use of AutoLayout so the layout, can not complete the designer of the design of the God interface. But I want to use, I think the use of the layout is only the relative location of the web-side of the patent, did not think of mobile phone native app can also be used. So I'm using the above-mentioned VFL language code for relative layout.
Of course, everyone to the above the VFL language, to Google above the view on the line. Because I have better things to give you, do not see in the use of this is the aliens like the VFL.
Additional explanation: Originally wanted to focus on this, but because everyone may not use the VFL later, cut short said. The view that we place in the story version, and so on, add the constraint with AutoLayout and add the constraint with the code is not able to coexist. That is, if you have added a constraint to the story version, don't think about IBOutlet modifying the constraint through code after passing it. I have tried, it took a long time, no success. I do not know whether it can make sense, but I do not walk through, the Internet is not found in the relevant information.

The arrival of the masonry artifact

The text here is the least written. Masonry is a project hosted on GitHub. Masonry is not introduced here (we are accustomed to the code rather than the story version of the UI, this class library can help us to use a small amount of code to complete the addition of constraints), if you feel good later in the blog to explain. Let's go to GitHub and check it out ...

This article will be updated later depending on the situation. If reproduced, please add the source link oh:), not because of a few of the updates and mistakenly harm others ah ...

This article uses the markdown syntax. I hope csdn can support Markdown, now the edit box is too ugly, not a good use. These years have not changed, really do not know what courage to stick to the present!

AutoLayout Use detailed Introduction