iOS：Autolayout自动布局实例

Autolayout自动布局实例即可以用故事板布局，也可以用纯代码创建，各有各的优点；用故事板布局，比较方便，而且直观，可以很直白的看到视图布局后的变化；采用代码布局，虽然代码比较多，有些麻烦，但是可以很好的进行控制，设置自己所要的布局。下面我就对这两种布局做一下演示。　　

 

练习1：

在控制器view底部添加2个view，1个蓝色，1个红色

2个view宽度、高度永远相等

p距离父控件左边、右边、下边间距和2个view之间的间距相等

 

 

 

 

 

采用故事板布局如下:

1.打开故事板，拖入两个视图UIView控件，名称一个为view1设置为蓝色，一个为view2设置为红色。两者大小合适即可

 

 

2.任意选中一个视图，我选择view1后，然后点击故事板右下角布局选项，如下所示

3.设置view1的左边和下边离父视图view边距离为20，并点击添加2项约束后截图

  

4.同样对view2的右边和下边离父视图view边距离为20，并点击添加2项约束

 

 

5.再选择view1，设置它的高为200

6.选中view1和view2后，选择它们等高等宽

 

 

 

 

 

7.同样选中view1和view2后，给他们添加对齐方式

 

8.选择对齐方式那一项，可以看到目前两个视图之间的关系

 

 

 

 

9.重新设置两者之间的关系，即view1的尾边=view2的头边-20

10.此时可以看到控件文件中，之前的红色错误箭头没有了,但是出现一个黄色警告箭头标识，选中它出现一个窗口,有两个黄点，需要你更新frame

 

11.依次选择黄点，按照它的提示点击Fix Mispalcement,进行Update Frame,直到没有黄点，此时两个视图布局成功

 

 

演示结果：(不支持竖屏)

 

 

Portrait                                                                   不支持Upside Down (如果支持，应该前面一样）

 

Landscape Left 和 Landscape Right

 

 

 

采用纯代码添加约束进行布局如下:

//在ViewController.m文件中，除了声明属性，其余所有的代码都在-(void)viewDidLoad{.....}中进行

1.声明两个视图属性

#import "ViewController.h"

@interface ViewController ()
@property (strong,nonatomic)UIView *view1;
@property (strong,nonatomic)UIView *view2;
@end

2.创建两个视图

    //创建view1
    self.view1 = [[UIView alloc]init];
    self.view1.backgroundColor = [UIColor redColor];
    self.view1.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:self.view1];
    
    //创建view2
    self.view2 = [[UIView alloc]init];
    self.view2.backgroundColor = [UIColor yellowColor];
    self.view2.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:self.view2];

3.创建view1和父视图的x坐标之间的约束

    //view1的x坐标和父视图的x坐标的关系
    NSLayoutConstraint *LCLfet = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20];

4.创建view1和父视图的y坐标之间的约束

    //view1的y坐标和父视图的y坐标的关系
    NSLayoutConstraint *LCBottom = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];

5.创建view1和view2等宽这个约束

    //view1和view2等宽
    NSLayoutConstraint *lcEqualWitdth = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view2 attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0];

6.创建view1和view2等高这一个约束

    //view1和view2等高
    NSLayoutConstraint *lcEqualHeight = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view1 attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];

7.创建view2和父视图的x坐标之间的约束

    //view2的x坐标和父视图的x坐标的关系
    NSLayoutConstraint *LCRight = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20];

8.创建view2和父视图的y坐标之间的约束

    //view2的y坐标和父视图的y坐标的关系
    NSLayoutConstraint *LCBottom2 = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];

9.创建view1和view2之间水平间距这一个约束

    //view1和view2的水平间距
     NSLayoutConstraint *lcGap = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view1 attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:20];

10.将前面创建的所有约束添加到父视图中

    //在父视图中添加约束
    [self.view addConstraints:@[LCLfet,LCBottom,LCRight,LCBottom2,lcEqualHeight,lcEqualWitdth,lcGap]];

11.创建view1自己的固定高度这一个约束

    //view1固定的高度
    NSLayoutConstraint *lcFixedHeight = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:200];

12.将view1的高度这个约束添加到自己的视图中

    //在view1上添加约束
    [self.view1 addConstraint:lcFixedHeight];

演示结果和上面一样，就不截图了.................

 

 

练习二：

需求：view1使得它与上方的距离20，左方、右方的距离各为20，高50，view2在view1下方距离20，右边距离父视图20（与view1右对齐），view2的宽度是view1的一半。

实现：
（1）先固定view1，设定左右上的约束并设定高为50.

（2）这个需求的重点是设置view2，首先与view1上方距离20，右边与view1对齐，那么宽度的设置体现了Autolayout的精华所在。

     方案一：先设置view2与view1等宽，之后双击view2的等宽的线，将multiplier的值设为0.5。

 

     

 

         方案二：
       1）设置view2的居中对齐

       

      2）修改SecondItem中的属性为Leading，这样我们就实现了需求中所要的效果

       

 

 

AutoLayout核心公式

第一个Item的属性 =(<=/>=)第二个Item的属性*Multiplier+Constant

这就是Autolayout的精华所在.

 

属性说明：

• Leading Edges：左对齐
• Trailing Edges：右对齐
• Top Edges：上对齐
• Bottom Edges：下对齐
• Horizontal Centers：水平中心对齐
• Vertical Centers：竖向中心对齐
• Baselines：基线对齐
• Horizontal Center in Container：对齐容器中的水平中心
• Vertical Center in Container：对齐容器中的竖向中心

 

警告与报错

 

• 警告：一般是黄色的，一般是由于我们当前所设的约束与当前视图的位置不符。
• 报错：红色的警告一般是由于约束错误造成的，这种警告工程中一定要消除。

 

总结

• Autoresizing:
  已经是比较过时的设置适配方法了，而且有很大的缺陷，只能设置父子控件之间的约束，不能设置兄弟控件之间的约束。所以在这里我们最好不要再开发中应用。
• AutoLayout:
  最流行的适配方式，苹果积极推荐，非常强大好用的适配方法。对提升开发中的效率有很大的帮助。