What is autolayout? Use an official definition of Apple
Autolayout is a constraint-based and descriptive layout system. Auto layout is a constraint-based, descriptive layout system.
Keywords:
- Based on constraints-unlike the previously defined frame positions and sizes, the autolayout position is defined based on the so-called relative position constraints. For example, the X coordinate is the center of superview, Y coordinates are 10 pixels above the bottom of the screen.
- Descriptive-the definition of constraints and the relationship between views are described using methods that are close to natural or visual language (will be mentioned later ).
- Layout System-literally, used to take charge of the location of each element on the interface.
All in all, autolayout provides developers with a layout method different from that specified by the traditional UI element location. In the past, both drag and drop in IB and write in code, each uiview has its own frame attribute to define its position and size in the current view. If autolayout is used, it is changed to defining the position and size of the view using constraints. The biggest advantage of this is that it solves the adaptation problem of different resolutions and screen sizes, and also simplifies the definition of the position of the view during rotation. The original 10-pixel center view on the bottom, no matter when you rotate the screen or change the device (iPad or iPhone 5 or a mini iPad may appear later), the position remains at the center of 10 pixels above the bottom. Summary
Use constraints to describe the layout. The View frame calculates describe the layout with constraints, and frames are calculated automatically.
The difference between autolayout and autoresizing mask is our old friend... If you have been writing code to the UI before, you must have written enumerations such as uiviewautoresizingflexiblewidth. If you used more IB, we have noticed that each view's size inspector has a red autoresizing indicator and corresponding animation scaling, Which is autoresizing mask. Before ios6, the adaptation to screen rotation and the automatic adaptation of iPhone and iPad screens were basically completed by autoresizing mask. However, with the increasing requirements on iOS apps and various screens and resolutions that may appear in the future, autoresizing mask seems outdated and dull. Autolayout can complete all the work that was previously completed by autoresizing mask and be competent for some tasks that were not previously completed, including:
- Autolayout can specify the relative positions of any two views, instead of having two views in the direct view hierarchy as autoresizing mask does.
- Autolayout does not have to specify equal constraints. It can specify non-equal constraints (greater than or less than), while autoresizing mask can only perform equal conditions.
- Autolayout can specify the priority of a constraint. When calculating a frame, the priority is calculated based on the conditions that meet the priority.
Summary
Autoresizing mask is a subset of autolayout. Any work that can be completed by autoresizing mask can be completed by autolayout. Autolayout also has some excellent features that autoresizing mask does not possess to help us build interfaces more conveniently.
Autolayout basic usage method interface builder the simplest use method is to drag directly in IB. Under any View File inspector in IB, there is a select box for use autolayout (if you do not have a view, you can consider upgrading xcode =. =), Hook, and drag the control as usual. After the control is dragged, constraints always appears in the view hierarchy column on the left, which is all constraints.
After a constraint is selected, you can change the constraints, distance and priority in attributes inspector on the right:
For constraints that are not automatically added, You can manually add them in IB. Select the view for which you want to add constraints, click the options in edit-> pin in the menu, or click the button in the lower right corner of the IB main view to add extra constraints. Visualized addition is not only convenient and intuitive, but also prevents errors. It is recommended to add constraints first. However, sometimes you cannot add certain constraints (for example, cross-view hierarchy constraints) only by using Ib. Sometimes, the constraints added by IB cannot meet the requirements, in this case, you need to use the constrained API for Supplement. Manually use APIs to add constraints to create a new class in ios6: nslayoutconstraint, a constraint in the form
- Item1.attribute = multiplier? Item2.attribute + constant
The corresponding code is
1 |
[NSLayoutConstraint constraintWithItem:button |
2 |
attribute:NSLayoutAttributeBottom |
3 |
relatedBy:NSLayoutRelationEqual |
5 |
attribute:NSLayoutAttributeBottom |
The corresponding constraint is "bottom of button (y) = bottom of superview-10 ". After creating a constraint, you must add it to the view to which the constraint is applied. Uiview (also nsview) adds a new instance method:
- -(Void) addconstraint :( nslayoutconstraint *) constraint;
Used to add constraints to the view. Note that the added target view must follow the following rules:
- Add constraints between two views at the same level to their parent view.
- Add constraints between two views of different levels to their closest parent view.
- Add constraints between two views with hierarchies to parent views with higher hierarchies.
You can use the-setneedsupdateconstraints and-layoutifneeded methods to refresh the changes in constraints and relay the uiview. This is the same as coregraphic's-setneedsdisplay ~ Visual format language uikit team has a lot of love this time. They also think that the name of the newly added API is too long, so they have invented a new way to describe constraints, very interesting. This language is an abstraction of the visual description. The general process looks like this: the accept button is at the default Spacing on the right side of the cancel button.
Finally, the VFL (visual format language) is described as follows:
1 |
[NSLayoutConstraint constraintsWithVisualFormat:@\\"[cancelButton]-[acceptButton]\\" |
4 |
views:viewsDictionary]; |
Viewsdictionary is a dictionary bound with the view name and object. For this example, you can use the following method to obtain the corresponding dictionary:
1 |
UIButton *cancelButton = ... |
2 |
UIButton *acceptButton = ... |
3 |
viewsDictionary = NSDictionaryOfVariableBindings(cancelButton,acceptButton); |
The generated dictionary is
{ acceptButton = ""; cancelButton = ""; }
Of course, if you are not tired, you can write your own handwriting. Now, the dictionary, array, and writing are much simpler, so it is not complicated. For more information about the new syntax of objective-C, see my previous WWDC 2012 Note: WWDC 2012 session Note -- 405 modern objective-C. Adding parentheses and numbers at the link after the view name can give the expression more meaning. The following are some examples:
- [Cancelbutton (72)]-12-[acceptbutton (50)]
- Cancel the 72-point button width, and the accept button width is 50 points. The distance between them is 12 points.
- [Wideview (> [email protected])]
- If the width of the wideview is greater than or equal to 60 point, the priority of the constraint is 700 (the maximum priority is 1000, and the higher the priority, the more advanced the constraint is)
- V: [redbox] [yellowbox (= redbox)]
- Vertical layout: first, a redbox, followed by a yellowbox with the width equal to the Redbox width
- H: |-[find]-[findnext]-[findfield (> = 20)]-|
- Horizontal layout: the default interval width between find and the left edge of the parent view, followed by the default interval width between findnext and find, followed by the findfield with a width not less than 20, the spacing between it and findnext and the right edge of the parent view is the default width. (Vertical bars '|' indicates the superview edge)
Errors that are easy to occur are caused by constraints. All possible problems in the constraint model are described as follows:
- The layout of ambiguous layout cannot be determined.
- Unsatisfiable constraints cannot meet the constraints
The layout cannot be determined because the given constraints cannot uniquely determine a layout, that is, the constraint conditions are insufficient, and the layout results cannot be unique. In this case, you can add some necessary constraints or adjust the priority. Constraints cannot be met because constraints conflict with each other and cannot be met at the same time. You need to delete some constraints. When two errors occur, the layout is unstable and the layout is incorrect. Ambiguous can be tolerated and a feasible layout can be selected and displayed on the UI. unsatisfiable cannot get the UI layout and report an error. For uncertain la S, you can pause the program during debugging and enter
- Po [[uiwindow keywindow] _ autolayouttrace]
To check whether ambiguous layout exists and its location. There are also some check methods to view the constraints and constraints of the View:
- [View constraintsaffectinglayoutfororientation/axis: nslayoutconstraintorientationhorizontal/vertical]
- [View hasambiguouslayout]
- [View exerciseambiguityinlayout]
Layout animation is an important part of the UI experience, and the animation after the layout is changed is also critical. Speaking of animation, core animation has made great achievements again .. since the appearance of CA, all animation effects are very cheap, and the situation in auto layout is the same as in collection view, very easy (see WWDC 2012 session notes -- 219 advanced collection views and building M layouts), just put layoutifneeded In the animation block ~
1 |
[UIView animateWithDuration:0.5 animations:^{ |
If you are not familiar with block, you can read a block article I wrote very early on.
Autolayout (Automatic Layout)
