自动布局的那点事

1.Previewer（预览）
Xcode提供Previewer来解决在不同设备上显示问题。在做自动布局的时候真的是特别方便。

• 首先点击Assistant Editor

  
  QQ20161125-0.png

• 右边出现了一个窗口，点击这个窗口上方的Automatic按钮,出现一个窗口后点击Preview

  
  QQ20161125-1.png

• 现在就出现了4英寸屏幕展示的效果，点击左下角的加号可以添加其他尺寸的屏幕

  
  QQ20161125-2.png

2. 布局三个等宽的View
三个View宽度采用相对值，但是x轴和y轴以及间距为绝对值。

• 首先添加三个View，尺寸任意

  
  1.png

• 设置y值，中间的View设置水平居中

  
  QQ20161125-3.png

• 设置x值，然后将中间的View的顶点设置为0（固定值）

  
  QQ20161125-4.png

• 根据屏幕比例设置宽度，同时选择父视图和中间的View之后，选择Equal widths，然后单选中间View视图设置相对于父视图的比例。

• 设置高度，单击中间的View,选择Aspect Ratio(宽高比),然后点击高度约束，将比例设置为1:1

• 同时选择三个View,并选择顶部对其，选择宽度和高度相同

• 最后将左右View相对于中间View的Horizontal Spacing设置为20

• 最终显示效果

• 任意拖入一个View
• 等比例设置宽和高

• 等比例设置x值
  首先设置View.Leading 相对于 Superview.Trailing 布局，然后将其比例设置为0.2

  
  QQ20161128-0.png

• 等比例设置y值
  设置View.bottom相对于Superview.bottom布局，然后将其比例设置为0.9

4.利用Masonry进行简单的布局

• 平均分布三个View

//布局之前先新建三个不规定尺寸的View
CGFloat padding = 10;
    [bView mas_makeConstraints:^(MASConstraintMaker *make)
    {
        make.centerX.equalTo(self.view);
        make.centerY.equalTo(self.view);
        //比例设置宽高
        make.width.mas_equalTo(self.view.mas_width).multipliedBy(0.3);
        make.height.mas_equalTo(bView.mas_width).multipliedBy(1);
    }];
    
    [aView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(bView.mas_left).offset(-padding);
        make.centerY.equalTo(bView);
        make.width.equalTo(bView);
        make.height.equalTo(bView);
    }];
    
    [cView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(bView.mas_right).offset(padding);
        make.centerY.equalTo(bView);
        make.width.equalTo(bView);
        make.height.equalTo(bView);
    }];

• 等比例设置x,y值

//首先建一个不带位置信息的testView
[testView mas_makeConstraints:^(MASConstraintMaker *make) {
        //设置x坐标
        make.leading.mas_equalTo(self.view.mas_trailing).multipliedBy(0.1);
        //设置y坐标
        make.bottom.mas_equalTo(self.view.mas_bottom).multipliedBy(0.9);
        make.width.mas_equalTo(self.view.mas_width).multipliedBy(0.3);
        make.height.equalTo(testView.mas_width);
    }];

5.结语
这里只是我对一些常见的布局的一点粗浅看法，在自己总结之余也希望能给有需要的人一点点帮助。假如有不正确的地方，希望您能不吝赐教。谢谢！