Getting Started with the iOS development auto layout

With the close of IPhone6 and iOS8, the problem of adaptation is more complicated, recently learned the use of auto layout, share with you.

What is Auto Layout?

Auto layout is a new layout feature introduced after IOS6 's release, which is designed to compensate for the shortcomings of previous autoresizing in layout and to better adapt to the layout of the interface in the future with more dimensional adaptations.

Why use Auto Layout?

AutoLayout can solve different screens (Iphone4,iphone5,ipad ... ) between the adaptation issues.

In the IPhone4 era, developers only need to fit a screen size, compared to the relative layout of the Android camp, iOS developers are the longest way to use the absolute layout, coordinates and size as long as the write Dead is OK. Then iPhone5 out, for the two screen sizes, you need to consider a new problem, screen fit. Apple has long considered this point autoresizing technology, admittedly autoresizing, Apple introduced the AutoLayout feature after IOS6 release, adapting to the layout needs of a wider range of scenarios. Of course. IPhone5 because and iPhone4 in the screen width of the same, even if not on these technologies to adapt it is not troublesome (the author has only used the autoresizing), but in IPhone6 will be launched, will face more complex screen adaptation, Auto Layout can help us to solve this problem well, but also can solve the horizontal screen vertical screen switch, ipad adaptation problem.

The following is the effect of the example code in this article:

How do I use Auto Layout?

Basic concepts of Auto layout

The core of Auto layout is the constraint (constraint), which allows the view to calculate its own dimensions and coordinates by constraining the view (the size of the view, the relationship between the view and the view).

Visual Format Language, a language rule used in auto layout to describe the constraints of the image.

The use of Auto layout is still relatively complex, the beginning with may feel foggy, with more habits of the VFL after the writing will feel its convenience.

Using Auto Layout in your code

-(void) viewdidload{[Super Viewdidload];    Self.view.backgroundColor = [Uicolor Greencolor];    UIView *viewtopleft = [[UIView alloc] init];    UIView *viewtopright = [[UIView alloc] init];    UIView *viewbottom = [[UIView alloc] init];    [Viewtopleft Setbackgroundcolor:[uicolor Bluecolor];    [Viewtopright Setbackgroundcolor:[uicolor Redcolor];        [Viewbottom Setbackgroundcolor:[uicolor Blackcolor];    Before adding a constraint, you must say view added to Superview [Self.view addsubview:viewtopright];    [Self.view Addsubview:viewtopleft];        [Self.view Addsubview:viewbottom];    You need to close autoresizing [Viewtopleft Settranslatesautoresizingmaskintoconstraints:no] for controls to use auto layout;    [Viewtopright Settranslatesautoresizingmaskintoconstraints:no];        [Viewbottom Settranslatesautoresizingmaskintoconstraints:no]; Using vfl#if 1//dict and metrics correspond to the names in the VFL with the objects and values in the map nsdictionary *dict = nsdictionaryofvariablebindings (Viewtopleft,    Viewtopright, Viewbottom); That's the equivalent of writing nsdictionary *dict.= @[@ "Viewtopleft": Viewtopleft, @ "viewtopright": Viewtopright, @ "Viewbottom", Viewbottom]; the name is not necessarily the same as the object name Nsdictionary *        Metrics = @{@ "pad": @10}; Horizontal relationship (H:, can be omitted as VFL1), "|" Quite with Superview, "-" is the connector, indicating that the spacing between the two can also not mean no spacing//conversion is the natural language description is: Superview the left edge interval pad distance is viewtopleft (    The width is equal to viewtopright) and the default distance is viewtopright and the distance between 10 is the right edge of the Superview.    NSString *vfl0 = @ "H:|-pad-[viewtopleft (==viewtopright)]-[viewtopright]-10-|"; NSString *vfl1 = @ "|        [viewbottom]|];    Vertical relationship (V:) nsstring *vfl2 = @ "V:|-[viewtopleft (==viewbottom)]-[viewbottom]-pad-|";        NSString *vfl3 = @ "v:|-[viewtopright]-[viewbottom]-pad-|"; [Self.view addconstraints:[nslayoutconstraint constraintswithvisualformat:vfl0 options:0 metrics:metrics views:dict    ]]; [Self.view addconstraints:[nslayoutconstraint constraintswithvisualformat:vfl1 options:0 metrics:metrics views:dict    ]]; [Self.view addconstraints:[nslayoutconstraint constraintswithvisualformat:vfl2 options:0 metrics:metrics views:dict    ]]; [Self.view addconstraints: [Nslayoutconstraint constraintswithvisualformat:vfl3 options:0 metrics:metrics Views:dict]]; Leading that do not use Vfl#else//viewtopleft are aligned with their Superview leading (left) [Self.view Addconstraint:[nslayoutconstraint ConstraintWithItem:self.view attribute:nslayoutattributeleading relatedby:nslayoutrelationequal Toitem:        Viewtopleft attribute:nslayoutattributeleading multiplier:1 constant:-10]; Top of Viewtopleft and top of Superview [Self.view addconstraint:[nslayoutconstraint ConstraintWithItem:self.view Attribute:nslayoutattributetop relatedby:nslayoutrelationequal Toitem:viewtopleft Attribute:NSLayoutAttributeTop        Multiplier:1 Constant:-10]]; Top of Viewtopright and top of Viewtopleft [Self.view addconstraint:[nslayoutconstraint constraintwithitem:viewtopright Attribute:nslayoutattributetop relatedby:nslayoutrelationequal Toitem:viewtopleft Attribute:NSLayoutAttributeTop        Multiplier:1 constant:0]]; Viewtopright's leading and Viewtopleft's trailing (right) align [Self.view addconstrainT:[nslayoutconstraint constraintwithitem:viewtopright attribute:nslayoutattributeleading relatedBy:        Nslayoutrelationequal toitem:viewtopleft attribute:nslayoutattributetrailing multiplier:1 Constant:10]]; The trailing of Viewtopright and its superview to the right of it [Self.view addconstraint:[nslayoutconstraint Constraintwithitem: Viewtopright attribute:nslayoutattributetrailing relatedby:nslayoutrelationequal toItem:self.view attribute:        Nslayoutattributetrailing multiplier:1 Constant:-10]]; The width of the viewtopright is equal to the viewtopleft width [self.view addconstraint:[nslayoutconstraint constraintwithitem:viewtopright Attribute:nslayoutattributewidth relatedby:nslayoutrelationequal toitem:viewtopleft attribute:        Nslayoutattributewidth multiplier:1 constant:0]]; The height of the viewtopright is equal to the viewtopleft height [self.view addconstraint:[nslayoutconstraint constraintwithitem:viewtopleft Attribute:nslayoutattributeheight relatedby:nslayoutrelationequal toitem:viewtopright attribute: Nslayoutattributeheight multiplier:1 ConstANT:0]]; Viewbottom top is aligned with Viewtopright's bottom [Self.view addconstraint:[nslayoutconstraint constraintwithitem:viewbottom Attribute:nslayoutattributetop relatedby:nslayoutrelationequal toitem:viewtopright attribute:        Nslayoutattributebottom multiplier:1 Constant:10]]; Viewbottom's bottom and Superview's bottom alignment [Self.view addconstraint:[nslayoutconstraint Constraintwithitem:viewbottom Attribute:nslayoutattributebottom relatedby:nslayoutrelationequal ToItem:self.view attribute:        Nslayoutattributebottom multiplier:1 Constant:-10]]; The leading of Viewbottom is aligned with the leading of Viewtopleft [Self.view addconstraint:[nslayoutconstraint ConstraintWithItem: Viewbottom attribute:nslayoutattributeleading relatedby:nslayoutrelationequal toItem:viewTopLeft attribute:        Nslayoutattributeleading multiplier:1 constant:0]]; The height of the viewbottom is equal to the height of the viewtopleft [Self.view addconstraint:[nslayoutconstraint Constraintwithitem:viewbottom Attribute:nslayoutattributeheight relatedby:nslayoutrelationEqual toitem:viewtopleft attribute:nslayoutattributeheight multiplier:1 constant:0]]; The width of the viewbottom is equal to the height of its superview [self.view addconstraint:[nslayoutconstraint constraintwithitem:viewbottom attribute : Nslayoutattributewidth relatedby:nslayoutrelationequal ToItem:self.view attribute:nslayoutattributewidth    Multiplier:1 constant:-20]];    #endif//Update constraint [Self.view setneedsupdateconstraints]; [Self.view updateconstraintsifneeded];} </span>

Note the point:

1. The constraint must have a given size and then the size and position of each view is computed by the constraint, and the size of the Self.view is given, if the size of the Superview is not fixed must be Given the size of one subview, the other can be computed by the constraint.

2. The constraints between the two view should be placed on their superview, if a view is superview just put it on the Superview.

2. The design of constraints is best not to conflict, although the priority can be set, but prone to problems.

3.VFL mode of setting the size of the view only equal, small or large, such as 3 kinds of relationships, can not be used as a method to generate constraints as a set of two view scale, so in the specific application or the combination of the two to use.

using auto Layout in Xib

Feel the use of AutoLayout in the xib is not the convenience of code, the principle and the same code, here is not much to do the description.

Resources

Auto Layout Guide

iOS8, the screen is bigger, ready to use IOS Auto layout?

AutoLayout and the VFL experience sharing