AutoLayout Basic Explanation

Interface Builder Introduction

In the lower right corner of the storyboard interface, there is a row of icons

Mouse over a short period of time, will tell you their role, from left to right in turn is:

• Align: Used to set the alignment-related constraints;
• Pin: Set relative size and position;
• Resolve Auto Layout issues: Solve AutoLayout problem;
• Resizing Behavior: Set how the reset size affects other objects;

Align (Align)

The following are the alignment of the same level of view in the two views hierarchy.

Leading Edges: Head alignment
Trailing Edges: Tail alignment
Top Edges: Align Tops
Bottom Edges: Bottom Alignment

Horizontal Centers: Horizontal Center Alignment
Vertical Centers: Vertical Center Alignment
BaseLines: Baseline (default View bottom position) horizontally aligned to align controls with text, such as UILabel, UIButton, etc.

These are the alignments of Superview and SubView, Superview is SubView Container

The relative distance between the horizontal center of the horizontal center in Container:view and the horizontal center of the container
The relative distance between the vertical center of the Vertical Center in Container:view and the vertical center of the container
Within the white input box of the aligned values, click the Right drop-down box to select "Use current Canvas value", which means using the difference in the Xib/storyboard.

The last update Frames shows how to update the frame, with three options, default to None, not updated

None: Do not update frame
Items of new Constraints: Update the newly added frame
All Frames in Container: Update all frame within container

Pin: Set relative size and position

Top there are four rectangular boxes and four dashed lines, the original used auto resizing shoes should be more familiar. The number in the Rectangle box indicates the distance from the current view to the nearest view (note: not Superview) edge.

There is a line of gray words under the rectangle box with the option "constrain to margins", meaning that the above constraint is set relative to margins, while the margin default distance is 16. such as the distance from the top edge of 306, plus 16, so the view of the upper part of the most recent view and the distance is 312.

The other options

2. Width: Setting widths
4. Height: Set height
8. Equal Widths: Set The width relationship of two sibling View
10. Equal Heights: Setting The height relationship of two peer View
12. Aspect Ratio: Set the View's own width -to-height ratio
16. Align: Consistent with the previous * **Align . Then why does the * * * * * * * Align in this side? The estimate is related to the * *Pin, so it is also here.

Resolve Auto Layout Issues: Solving AutoLayout problems

You can choose which views to process: the currently selected views or all views within the Controller

1. update Frames: Updating frame
2. update Constraints: Updating constraints
3. Add Missing Constraints: Adding a missing constraint
4. Reset to suggested Constraints: Reset constraint
5. Clear Constraints: Clear constraint

Resizing Behavior

Two options for setting how the reset size affects other objects (default is checked)

1. Sublings and ancestors: affecting sibling views and ancestor views of siblings
2. Descendants: Influence descendants views

(This place I did not understand, I checked the document and some blogs, all just do a simple text description, and then try to check and uncheck the case, or can not find what the difference, so also did not understand how the impact of the specific. ）

Sizeclass

Sizeclass Chinese meaning can be understood as the dimension level, that is, on the basis of AutoLayout, plus the definition of screen size type. Sizeclass has three types of wide height: compact, any (arbitrary), Regular (normal)

Width and height types for different device screens

When you select a specific size, IB displays information about the screen size that is currently selected, such as the width height type, screen size type, which devices are available for this size, and so on.

overriding layouts

If you set a constrained layout for a certain type of screen, you can override the layout when you have a layout that does not conform to the intent under other types of screens, that is, the layout under the screen type is reset.

The UIView set the upper and lower left and right of the wany|hany four constraints

Click on this UIView to see Attribute Inspector has a install option checked.

Installed/uninstalled means that the current layout is installed on what type of screen. Installed/uninstalled front If there is nothing, the layout is installed on the Wany|hany type of screen. Now if we want to set the layout of some type of screen individually, click the plus sign, select the screen type

When the new screen type is checked out, the current layout does not work under that type, so you can toggle the type and reset all constraints.

If you want to modify only one constraint, you can also click Size Inspector

Select Constraints--all Show all Constraints, double-click any one of the constraints, there will be a similar to the previous interface

There's a plus sign in front of installed, and you should have guessed, too, that the changes here are similar to the previous one.

If the Inspector of Xcode has a plus sign in front of it, it means that it can be rewritten, as in this image, installed
The Constant above the option has a plus sign in front of it, indicating that it can also be overridden. Similar to the UILabel font, however : Unlike overriding layouts, changing the properties of text in different size classes always affects the text in the underlying layout. It cannot set different property values in different size classes, just like a layout. We can solve this problem by the following method. Reference: Swift Adaptive layouts (Adaptive layout) tutorial (ii).

Preview with Xcode 6

After so many screen types, it takes a lot of effort to make different types of screen adaptations. If you have to run a type screen every time to see the effect, the efficiency is simply too low. Xcode 6 provides preview previews, which can save you a lot of time.

Click the Assistant Editor button on the Xcode Tool Bar to display another window

Select Preview Display Screen

If you want to display different types of screens in the preview, click the plus sign in the lower left corner of the preview screen to select more devices

If you want to view the horizontal/vertical screen, click the Rotate button under the device to

VFL (Visual Format Language)

It has to be said that the VFL's syntax is much less than that of handwritten Constraints, and it also has the feeling of hieroglyphs, but it does not match the normal Swift grammatical style. This content directly to the official documents, are shown in the figure, the explanation is very clear.

AutoLayout Frequently Asked Questions

1. After setting the AutoLayout, can I modify the frame with Self.someView.frame in the code?
   No
2. Why do some controls only set X, Y value constraints, and no errors?
   Some of the UIKit controls, such as UILabel, Uiimageview, and so on, are self-adapting according to the content, so there is no need to constrain their width and height.
3. The same constraints are used on Uiscrollview and uiimageviwe, why are there errors?
   Refer to Nonomori's article: ScrollView and AutoLayout

Masonry: Alternative AutoLayout

Masonry is by far the accepted AutoLayout best alternative, with a simple, intuitive syntax that does not appear in a variety of unexpected layouts. According to some of the information on the Internet, Masonry has a much better effect on large projects than AutoLayout.

To give a simple example: to make a subview fill Superview, but with superview boundary spacing (inset) 10 pixels. Using Nslayoutconstraints, it's written like this.

2. UIView *superview = self ;
4. UIView *view1 = [[UIView alloc] init];
6. View1. Translatesautoresizingmaskintoconstraints = NO;
8. View1. BackgroundColor = [uicolor greencolor];
10. [superview addsubview:view1];
12. Uiedgeinsets padding = uiedgeinsetsmake ( Ten, Ten, ( ten);
14. [superview addconstraints: @[
16. View1 constraints
18. [nslayoutconstraint constraintwithitem:view1
20. Attribute:nslayoutattributetop
22. Relatedby:nslayoutrelationequal
24. Toitem:superview
26. Attribute:nslayoutattributetop
28. Multiplier:1.0
30. Constant:padding. Top],
32. [nslayoutconstraint constraintwithitem:view1
34. Attribute:nslayoutattributeleft
36. Relatedby:nslayoutrelationequal
38. Toitem:superview
40. Attribute:nslayoutattributeleft
42. Multiplier:1.0
44. Constant:padding. Left],
46. [nslayoutconstraint constraintwithitem:view1
48. Attribute:nslayoutattributebottom
50. Relatedby:nslayoutrelationequal
52. Toitem:superview
54. Attribute:nslayoutattributebottom
56. Multiplier:1.0
58. Constant:-padding. Bottom],
60. [nslayoutconstraint constraintwithitem:view1
62. Attribute:nslayoutattributeright
64. Relatedby:nslayoutrelationequal
66. Toitem:superview
68. Attribute:nslayoutattributeright
70. Multiplier:1
72. Constant:-padding. Right],
74. ]];
76. A simple layout to write so much code, a sense of death. What does it look like with masonry?
82. Uiedgeinsets padding = uiedgeinsetsmake ( Ten, Ten, ( ten);
84. [view1 mas_makeconstraints: ^ (masconstraintmaker *make) {
86. make.. Equalto (superview. Mas_topwith. Offset (padding. Top //with is an optional semantic filler
88. make.. Equalto (superview. Mas_leftwith. Offset (padding. Left
90. make.. Equalto (superview. Mas_bottomwith. Offset (-padding. Bottom
92. Make. Right. Equalto(superview. Mas_right). with. Offset(-padding. Right);
94. }];
96. Less than half of the code is at last able to slow the air. But it's not enough, and it can be less.
102. [view1 mas_makeconstraints: ^ (masconstraintmaker *make) {
104. Make. Edges. Equalto(superview). With. Insets(padding);
106. }];

AutoLayout Basic Explanation