目录
一、屏幕适配
二、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);
}];
