关于IB的适配，本章主要讲解如何使用IB上的约束线进行适配
platform: ios
version: 1.0
author：巨巨巨巨巨兔12138
创建storyboard的过程我就不再赘述了。
适配顾名思义就是将界面调整成各个屏幕都可以正常显示的尺寸，传统的方法就是添加约束线了，storyboard上约束线大致分为两种，一种是多个控件之间的约束，另一种是单个控件的约束。
单个控件的约束
先说第一种，比较常见，下图所示：
这四个值分别为该视图上下左右对应指定视图的距离，指定视图默认为距离最近的视图，简单举例子：
创建两个视图，上下分布（新建视图标记为红色）：
添加两个视图
含边框的视图为我们准备添加约束线的视图
选择指定界面点击下标出现左边栏界面，出现和指定界面添加约束的菜单，默认为最近距离的视图，下标左边的数值为距离多少点的未知，需要主要是这个位置是点位置，而不是像素位置
Constrain to margins 位置Constrain to margins -约束边缘
勾选的时候IB会默认为屏幕与16个点的的边框，一般建议不要勾选，不然适配不到真正的屏幕边缘
Constrain to margins 勾选和不勾选的区别（注意观察constant）
勾选状态下 constant=0
勾选状态下 constant=16
点击最下面的Add Constraints添加约束
水平竖直面的适配
IB水平竖直适配菜单这个意思比较简单，就是自身对父视图的的水平线和竖直线的适配，简单说就是在给父视图画水平竖直两条线，添加哪个约束线就是和哪条线中点对齐
如添加Horizontally ,该视图就位于父视图的竖直方向啦
添加Horizontally后
我知道你一定好奇Horizontally不是水平的意思吗，为什么会出现竖直约束线，因为约束线的意思就是不要动，所以水平约束就是水平方向固定，上下可以移动
需要注意的是这两个菜单选项也是可以选值的，父视图的中点所在的水平竖直方向是0，左边和上边是负值，右边和下边是正值，这个值得由来就是从中间往边缘数像素，最后和这个值的水平数值方向中点对齐
例如：
添加 constant=-287.5 的竖直约束线
添加过后的结果
为视图添加固定的宽高
这个比较简单，在开发中有很多时候需要给出的视图宽高是定值的，这个时候就可以使用啦，具体就不再赘述，用法和上面基本一致，也没有特别的主要事项
固定宽高约束菜单
为视图宽高添加比率
比率约束
该约束线可以使视图的宽高按照比率放大缩小，初始时会根据当前的宽高给定一个比率，添加之后可以点击视图IB菜单栏尺子图片，找到对应约束线修改比率
如：
查看添加后比率约束 (ratio=146:41)
修改为2：1图1中红色标注的1为添加后生成的比率，点击红色标注2进入图2(快速设置界面)。
更改过后比率就变为2:1啦，更改任意一条边其余的一条边也会跟着变化。
多视图的约束
下图的四个约束线分别代表左对齐，右对齐，上对齐，下对齐（其实看左边图片就能理解）
对齐约束菜单
主要解决了两个平行视图之间的适配，比如两个视图要左对齐，操作就是选中两个视图
选择左对齐，如图
选中左对齐
选中后点击任意视图都会有一条左对齐的约束线
选中之后的结果
多视图间的竖直/水平对齐
和上面对于父视图的竖直/水平对齐约束基本一样，不过这种约束是在与两个平行视图间的，不局限与父子关系
多视图间的竖直/水平约束菜单
简单的展示下添加后的结果，等同于前边写到，不在赘述
添加多视图水平约束结果
基线适配
这个比较有意思，基线适配是讲文字底边与视图的底边对齐
基线约束菜单
autoLayout就先简单讲解这么多，后续会自动补充，需要说明的一点也是最重要的一点
约束其实是个数学表达式
实际值 = 当前值*比率+定值
且约束必须要构成一整套才会生效，不然会报错，一套完整的约束包括视图的位置，即X轴的值与Y轴的值和自身的长和宽（有点像坐标系定义矩形，其实原理一样），如果约束线不是完整的一套约束线会变成红色，且会产生红点，表示出错，反正则为蓝色。
网友评论