IOS Auto-Layout Detailed description

1. Understanding of Automatic layout

iOS auto-layout is useful for running on different size screens, the original headache, or getting used to the stupidest [UIScreen mainscreen]. Bounds.size.width and so on layout, later really not, began to look at the automatic layout, found that the understanding is really good to use, now to share my experience it.

The first thing to understand is how a control's position on the screen can really be determined. The simplest case is:

1. For example, a rectangle, as long as it knows the coordinates of the upper left corner point, wide, high, then the position is fixed.

2. For example, a circle, as long as it knows its center coordinate, radius, then the position is fixed.

Automatic layout is this meaning, it can be understood as a live layout, because to determine the position of a control there are many ways to firmly determine the location, then the screen size changed, maybe the location is not what we want.

So when it comes to automatic layout, the thing to think about is that the screen is changing, and the constraints I set can make it where I want it, so these constraints are good.

Let me give you a very simple example. Let a rectangle in the middle of the screen.

Set its upper-left corner coordinates, wide, high. Then the screen changed and the position must have changed.

Set its center for the center of the screen, wide, high, then the screen size has changed, it is definitely still in the center, which is good constraint.

So my understanding is that the core of the automatic layout is to set the constraints so that when the size of the screen changes, it's still where we want it .

2. Implementation of automatic layout

There are only two implementations of automatic layouts.

1. Storyboard

2. Pure Code Control

It's easy to set a constraint on storyboard, hold down CTRL and drag. If you set the constraints or conflict, then there will be a red hint, if you set the constraints and the location of your control is error, then there will be a yellow hint, press the system to change the line.

The easiest way to do this is to drag the control to align it with the Blue line shown on the screen, and then reset to suggested constraints.

But there are some things that you need to set yourself.

3. Pure Code setting constraints

Many people are pure code flow, if the use of pure code to set constraints, there are many ways, more common is 3 kinds.

1. Constraints with Visualformat

For example

//Add a constraint to a text boxSelf.sendTextView.translatesAutoresizingMaskIntoConstraints =NO; NSString*sendstringh = [NSString stringWithFormat:@"h:|-(%d)-[_sendtextview (%f)]", Padding,textviewwidth]; NSString*SENDSTRINGV = [NSString stringWithFormat:@"v:|-(%d)-[_sendtextview]-(%d)-|", padding,padding]; Nsarray*sendtextviewconstrainth = [Nslayoutconstraint constraintswithvisualformat:sendstringh options:0Metrics0views:nsdictionaryofvariablebindings (_sendtextview)];        [Self addconstraints:sendtextviewconstrainth]; Nsarray*SENDTEXTVIEWCONSTRAINTV = [Nslayoutconstraint CONSTRAINTSWITHVISUALFORMAT:SENDSTRINGV options:0Metrics0views:nsdictionaryofvariablebindings (_sendtextview)]; [Self ADDCONSTRAINTS:SENDTEXTVIEWCONSTRAINTV];

There are two places to be aware of:

Because most of the situation is relative to the layout of the parent and sibling views, be sure to addsubview the parent view first and then set the constraint.

[] To use _view, do not use Self.view, this stackoverflow has an explanation.

its usage is primarily the designation of Constraintswithvisualformat parameters . The parameters are NSString, specify the properties of the Contsraint, are the vertical or horizontal limits, and the parameter definitions are generally as follows:

v:|-(>=x)-[_view (x)-((>=x))-| : Indicates that the left and right spacing is greater than, equal to, or less than a distance in the vertical direction relative to Superview

If you want to define a horizontal direction, change V: to H: Yes.
Options: The value of the dictionary type, where the value is typically selected in a system-defined enum
Metrics:nil; general nil, parameter type nsdictionary, external incoming//measurement standard
Views: Is the binding view added to the nsdictionary above

Note Here is the difference between addconstraints and AddConstraint, an added parameter is Nsarray, one is Nslayoutconstraint

Some of the rules used

|: Represents the parent view

-: Indicates distance

V:: Indicates vertical

H:: Indicates level

>=: Indicates that the view spacing, width, and height must be greater than or equal to a value

<=: Indicates that the view spacing, width, and height must be small or equal to a value

= =: Indicates that the view spacing, width, or height must be equal to a value

@: >=, <=, = = limit maximum of 1000

Some examples of use:

1.|-[view]-|: The view is within the left and right edges of the parent view

2.|-[view]: View is in the left edge of the parent view

3.| [view]: Align the view to the left of the parent view

4.-[view]-: Setting the width height of the view

5.|-30.0-[view]-30.0-|: Indicates left and right distance from parent view 30

6.[view (200.0)]: Indicates a view width of 200.0

7.|-[view (View1)]-[view1]-| : Represents the width of the view and is within the left and right edges of the parent view

8. V:|-[view (50.0)]: view height is 50

9:v:|-(==padding)-[imageview]->=0-[button]-(==padding)-| : Represents the distance from the parent view

For padding, the two view spacing must be greater than or equal to 0 and the distance from the bottom parent view is padding.

: [Wideview (>[email protected]): The width of the view is at least 60 and cannot exceed 700, and the maximum is 1000

2. Add a constraint through the function display

@interfacenslayoutconstraint:nsobject ... @property (ReadOnly, assign)IDFirstItem; @property (ReadOnly) Nslayoutattribute FirstAttribute; @property (ReadOnly) nslayoutrelation relation; @property (ReadOnly, assign)IDSecondItem; @property (ReadOnly) Nslayoutattribute Secondattribute; @property (ReadOnly) cgfloat multiplier; @property cgfloat constant;+ (Instancetype) Constraintwithitem: (ID) FirstItem attribute: (nslayoutattribute) FirstAttribute Relatedby: (nslayoutrelation) Relation Toitem: (ID) SecondItem attribute: (nslayoutattribute) Secondattribute multiplier: (cgfloat) Multiplier constant: (cgfloat) Constant;

The main way is to add the constraint through the above class function display.

This I also study of others, address: http://www.2cto.com/kf/201504/391282.html

This writing is very detailed, we should have seen it.

3. Third party Open source framework: Masonry

The main use of blocks to do, very clear, we can go to learn the source code, very useful.

But I did not see myself, just to write someone else's study, we can also be interested in learning

Address: http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/

IOS Auto-Layout Detailed description