【UI】AutoLayout

目录
一、屏幕适配
二、AutoLayout
三、AutoLayout实现屏幕适配
 1、AutoLayout在可视化布局中实现屏幕适配
 2、AutoLayout在纯代码布局中实现屏幕适配
四、例子

一、屏幕适配

---

在用户眼中，屏幕是由一个一个的像素（pixel、px）组成的，像素越高屏幕越清晰，这就是物理分辨率。在开发者眼中，屏幕是由一个一个的点（point、pt）组成的，点又由像素组成，这就是开发分辨率。

比如iPhone3GS的物理分辨率为320 x 480px，开发分辨率为320 x 480pt，这就代表iPhone3GS上面有320 x 480个点，而每个点里都只有一个像素；iPhone4的物理分辨率为640 x 960px，开发分辨率为320 x 480pt，这就代表iPhone4上面有320 x 480个点，但是每个点里有2 x 2 = 4个像素；iPhone5的物理分辨率为640 x 1136px，开发分辨率为320 x 568pt，这就代表iPhone5上面有320 x 568个点，每个点里也有2 x 2 = 4个像素；iPhone6的物理分辨率为750 x 1334px，开发分辨率为375 x 667pt，这就代表iPhone6上面有375 x 667个点，每个点里也有2 x 2 = 4个像素；iPhone6P的物理分辨率为1242 x 2208px，开发分辨率为414 x 736pt，这就代表iPhone6P上面有414 x 736个点，每个点里有3 x 3 = 9个像素。

我们开发者面向的是开发分辨率，不用特别关心物理分辨率，正是因为不同的机型有不同的开发分辨率，所以我们才得做屏幕适配——让一个控件在不同的机型上有相同的相对位置和相对大小。

二、AutoLayout

---

AutoLayout是iOS6引入的一种专门用来做UI布局的“自动布局”技术，使用它能够很轻松地解决屏幕适配问题，从而大大提升开发效率。

AutoLayout的两个核心概念：

• 约束：通过给控件添加约束，来决定控件的位置和尺寸
• 参照：添加约束时，是参照谁来添加（可以是父控件或兄弟控件）

AutoLayout的核心计算公式：

某个控件的约束 = 参照控件的约束 * multiplier + constant

三、AutoLayout实现屏幕适配

---

1、AutoLayout在可视化布局中实现屏幕适配

• 设置位置和宽高面板

第一部分：用来设置一个控件跟距离它最近的控件（可以是父控件或兄弟控件）的上左下右间距，如果勾选了Constrain to margins，系统会默认加个20pt的边距，一般我们不勾选。此外我们还可以点击约束右边的小箭头来设置约束到底参照谁。

第二部分：用来设置一个控件的宽高。

第三部分：Aspect Ratio用来设置一个控件的宽高比；Equal Width和Equal Height用来设置多个控件等宽等高。

• 设置对齐方式面板

第一部分：用来设置多个控件上对齐、左对齐、下对齐、右对齐。

第二部分：用来设置多个控件横向对齐和竖向对齐。

第三部分：用来设置一个控件相对于它的父控件横向对齐和竖向对齐。

• 约束处理面板

第一部分：用来更新和删除选中控件的约束。（更新约束的快捷键是cmd Option =）

第二部分：用来更新和删除所有控件的约束。

• 修改约束

当我们想要修改约束时，可以选中控件，找到相应的约束修改掉。（当然我们也可以修改约束的优先级，一个控件上如果添加了两个同样作用的约束，那么这两个约束就会产生冲突，我们就得给它们设置优先级，这样就可以消灭掉冲突了，优先级较高的约束会先起作用，优先级较低的约束会先不起作用，等优先级较高的约束被删除后优先级较低的约束才会起作用）

2、AutoLayout在纯代码布局中实现屏幕适配

AutoLayout在纯代码布局中的实现我们一般都会使用一个三方库——Masonry，使用它我们可以非常简单地完成纯代码AutoLayout，而不用写苹果官方提供的非常恶心的NSLayoutConstraint或VFL代码。

1注意使用Masonry给控件添加约束之前，必须先把控件添加到父控件上，和可视化添加约束一样，一个控件需要4个约束

2Masonry常用的三个方法

• mas_makeConstraints：用来新增约束
• mas_updateConstraints：用来更新约束（例如做动画），不是用来新增约束
• mas_remakeConstraints：也是用来更新约束，不过mas_remakeConstraints会清除控件之前所有的约束，然后再添加新的约束，而mas_updateConstraints只是更新控件的某个约束而已

3Masonry常用的一些属性

• top、bottom、left、right --> edges（通常与insets连用）
• width、height --> size
• centerX、centerY --> center

4Masonry常用的链式语法（里面不能有纯数字的加减乘除）

• equalTo()：表示两个控件的某个属性相等，用于上下左右、宽高、中心X中心Y这种简单属性，如果属性相同的话可以不写，不同的话必须写mas_属性
• mas_equalTo()：也表示两个控件的某个属性相等，用于edges、size、center这种结构体属性和具体数值
• multipliedBy()：核心计算公式里的multiplier
• offset()：核心计算公式里的constant

四、例子

---

• 指定高度、横向指定间距、自适应宽度、等间距等宽排列：从左往右赶，不给宽度

可视化

纯代码

• 指定高度、横向指定宽度、自适应间距、等间距等宽排列：如果控件是奇数个，就先把中间的控件给布局好，因为它的centerX肯定跟父控件的centerX一样，接下来就跟控件是偶数个一样了；如果控件是偶数个，那么父控件的centerX左边从左往右的第N个控件的centerX为：(2N - 1) / 控件个数，父控件的centerX右边从右往左的第N个控件的centerX为：2 - (2N - 1) / 控件个数

可视化

纯代码

• UILabel自适应宽度，只需要设置上左高度三个约束；UILabel自适应高度，只需要设置上左宽度三个约束，并设置numberOfLines为0即可

可视化

纯代码

• 聊天气泡根据文本内容自适应高度和宽度：先做好label的自适应高度和宽度，然后让气泡的底部和右侧等于label的底部和右侧，就可以实现气泡的自适应高度和宽度了

    UIView *bubbleView = [[UIView alloc] init];
    bubbleView.backgroundColor = [UIColor redColor];
    [self.view addSubview:bubbleView];

    UIImageView *avatarImageView = [[UIImageView alloc] init];
    avatarImageView.backgroundColor = [UIColor greenColor];
    [bubbleView addSubview:avatarImageView];

    UILabel *contentLabel = [[UILabel alloc] init];
    contentLabel.backgroundColor = [UIColor blueColor];
    contentLabel.text = @"哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈";
    contentLabel.numberOfLines = 0;
    [bubbleView addSubview:contentLabel];

    [avatarImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.equalTo(bubbleView).offset(10);
        make.width.height.mas_equalTo(20);
    }];

    [contentLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        /*
         约束1、2、3：可以保证contentLabel自适应高度
         约束1、2、4：可以保证contentLabel自适应宽度
         */
        
        // 约束1
        make.top.equalTo(avatarImageView);
        // 约束2
        make.left.equalTo(avatarImageView.mas_right).offset(10);
        // 约束3，注意不能写死，否则就不能自适应宽度了
        make.width.mas_greaterThanOrEqualTo(20);
        // 约束4，注意不能写死，否则就不能自适应高度了
        make.height.mas_greaterThanOrEqualTo(20);
    }];

    [bubbleView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_safeAreaLayoutGuideTop).offset(20);
        make.left.equalTo(self.view);
        // 我们只需要让气泡的底部等于文本的底部，就可以实现气泡的自适应的高度了
        make.bottom.equalTo(contentLabel).offset(10);
        // 我们只需要让气泡的右侧等于文本的右侧，就可以实现气泡的自适应的宽度了
        make.right.equalTo(contentLabel).offset(10);
        // 但是为了避免气泡过宽超出屏幕，我们需要额外给气泡加一个最宽的约束
        make.right.mas_lessThanOrEqualTo(self.view);
    }];