Automatic Layout AutoLayout

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.

To fully grasp the auto layout is a very energy-intensive thing, need a lot of practice, and in the fundamental, understand how it is used, if you want to fully introduce auto layout and use of the scene estimates a few posts are not covered,

This article hopes to be able to use the Auto layout 's emphasis and the skill as well as the attention matter, carries on the introduction. becomes a navigation article that learns Auto layout .

Resources:

1:ios7.0 XCODE5 Auto Layout Memo

Http://www.cnblogs.com/thefeelingofsimple/p/3316300.html

2:ios 6 Auto Layout Nslayoutconstraint interface layout

Http://www.devdiv.com/iOS_6_Auto_Layout_NSLayoutConstraint_%E7%95%8C%E9%9D%A2%E5%B8%83%E5%B1%80-weblog-227936-13173.html

3:ios 6 new features Auto Layout

http://www.cocoachina.com/bbs/read.php?tid=116558

4:WWDC Session notes--202, 228, 232 AutoLayout (Automatic layout) Getting Started

http://onevcat.com/2012/09/autoayout/

5:ios 6 Introduction to Automatic layout-1

Http://www.raywenderlich.com/zh-hans/22873/ios-6-%E8%87%AA%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%85%A5%E9%97%A8%EF%BC%8D1

6: Advanced Automatic Layout Toolbox

Http://answerhuang.duapp.com/index.php/2013/10/11/%E5%85%88%E8%BF%9B%E7%9A%84%E8%87%AA%E5%8A%A8%E5%B8%83%E5%B1 %80%e5%b7%a5%e5%85%b7%e7%ae%b1/

Use: 1: Understanding Concepts

Auto Layout Chinese translation comes in the meaning of automatic layouts , with the default Constraint (constraints) and various conditions to calculate a reasonable layout. And this reasonable layout is in line with our expectations and intentions.

Show the results that we imagined. The Constraint is very flexible, and the way to implement a layout can be done with a multi- Constraint set.

Here are some things we have to figure out before we start using:

1: We want to abandon the old layout way no longer focus on the view of the Frame,center, and autoresizing. Because these coordinates and the size of the positioning can be done by the auto layout.

2: Understand the meaning of each kind of Constraint , otherwise, when you go to see other people's realization of the Constraint , there is a kind of look at the heavenly book feeling.

3: According to the intention design, all according to our ideal effect to layout, as long as the constraints set reasonable, it will be able to complete the target layout.

2: Start using

Let's start with the Interface Builder . Open a Xib or StoryBoard ,

In the right-hand Show in file Inspector find Ues autolayout , check it. For example:

Since then, AutoLayout has been successful, Autoresizingmask has been discarded. All its previous functions and features have been replaced by AutoLayout .

Now we are positioning the control in a way that is no longer the same as before, calculating The specific position of each control, X is how many, and Y is how much.

Instead, consider how far apart the control is from the left, or how far apart it is from the top or bottom.

And some of the regular things are similar, for example, we locate a control position, must have X, y two coordinate points at the same time have values, less one can not display properly.

Similarly AutoLayout when creating constraints, you also need to think about the distance from the top when you have finished thinking about the distance from the top, otherwise the control's display position will not display as normal.

In other words, in order for the AutoLayout to calculate a reasonable position, it is necessary to ensure that both horizontal and vertical distances exist. Otherwise, the IDE will give you a warning that the layout ambiguous layouts (ambiguous)

Next, let's familiarize ourselves with what Interface Builder does to provide the functionality to implement AutoLayout :

Look at the bottom right corner of the interface preview, with a row of buttons like this:

These are the main ways Interface Builder uses to create Constraint , and we can also find these features in the Xcode menu bar, such as:

These functions are described in the following example:

If you start using AutoLayout from the code level, you need to set the translatesautoresizingmaskintoconstraints property of the view used to No.

You can start adding constraint through your code, otherwise the view will still be calculated according to the previous autoresizingmask.

In Interface builder , the translatesautoresizingmaskintoconstraints of the ues Autolayout,ib generated control is checked property will be set by default No.

3: Convert from old IB layout to auto layout

4: Skilled use of interface Builder

5: Build automatic layouts with code

There are two ways that code creates constraints:

1: General constraints, writing very lengthy, but can implement all the constraints and very special constraints, the code is as follows:

[CSharp] view plain copy

2. Instantiating a button
4. button1 = [[UIButton alloc] initWithFrame: (Cgrectzero)]; It is no longer necessary to deliberately specify coordinates such as x.y.
6. [Button1 settitle:@ "Yushuyi" forstate:uicontrolstatenormal];
8. [button1 Setbackgroundcolor:[uicolor Redcolor];
10. [Button1 SizeToFit];
12. [Button1 Settranslatesautoresizingmaskintoconstraints:no]; will use AutoLayout to lay out the way
14. [Self.view Addsubview:button1];
20. Creates a constraint that centers the parent view horizontally
22. Nslayoutconstraint *constraint = [
24. Nslayoutconstraint
26. Constraintwithitem:button1
28. Attribute:nslayoutattributecenterx
30. Relatedby:nslayoutrelationequal
32. ToItem:self.view
34. Attribute:nslayoutattributecenterx
36. multiplier:1.0f
38. constant:00.0f
40. ];
44. [Self.view Addconstraint:constraint]; To add a constraint to the corresponding parent view
48. Continues to create a constraint that is 20 distance from the bottom of the parent view
50. constraint = [
52. Nslayoutconstraint
54. Constraintwithitem:button1
56. Attribute:nslayoutattributebottom
58. Relatedby:nslayoutrelationequal
60. ToItem:self.view
62. Attribute:nslayoutattributebottom
64. multiplier:1.0f
66. constant:-20.0f
68. ];
72. [Self.view Addconstraint:constraint];

It is important to note that before you add a constraint, you must first addsubview the child view to the parent view, or you will get a compiler warning when you add the constraint. And we can understand that in this way.

Item1.attribute = multiplier? Item2.attribute + constant

2: Visual Format language constraints

The so-called visual format language constraints, is a very intuitive way of understanding, of course, if you have a good understanding of the rules of the language.

You can create multiple constraints at once through a visual language. This is quite an aspect and easy to understand for the first time. But not all constraints are met by the visual language.

We can learn this visual format language using regular expression learning methods. The example code is as follows:

[CSharp] view plain copy

2. Nsdictionary *viewsdic = nsdictionaryofvariablebindings (Deletebutton,cancelbutton,nextbutton);
6. Nsarray *constraints = nil;
8. constraints = [Nslayoutconstraint Constraintswithvisualformat:
10. @ "H:|-25-[deletebutton ([email protected])-(>=8)-[cancelbutton (]-[nextbutton) nextbuttonwidth"/ /Horizontal Visual Format language
12. Options:nslayoutformatalignalltop//Alignment function
14. metrics:@{@ "recty": @5,@ "Nextbuttonwidth": @30}//Indicator parameters
16. Views:viewsdic]; Object dictionary that participates in constraints
18. [Self.view addconstraints:constraints];
22. constraints = [Nslayoutconstraint Constraintswithvisualformat:
24. @ "v:[nextbutton]-|" Vertical Visual Format language
26. options:0//Unconditional
28. Metrics:nil//Without indicator parameters
30. Views:viewsdic]; Object dictionary that participates in constraints
34. [Self.view addconstraints:constraints];

This simple 10 lines of code, if you have not studied AutoLayout will also see some of the fishy, seems to understand. But indefinitely. Let's explain in more detail before explaining the effect of the above code execution, such as:

Horizontal screen:

Three buttons are located at the bottom of the view, there are small, and there are gaps in the middle.

3: Create a constraint by using the enhanced category package from third-party auto layout

Https://github.com/smileyborg/UIView-AutoLayout

Uiview-autolayout's appearance, as the author has said, comes from interface Builder. So you can find a lot of interface builder's shadow in terms of its API naming,

Bloggers strongly recommend this kind of library, through which to create constraints is a very pleasant thing, thinking clearly, when the premise is that you have understood the rules of auto layout.

Constraintsaffectinglayoutforaxis//Constraint Check why this view shows

Automatic Layout AutoLayout