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