AutoLayout在IB中的使用

iOS平台这几年推出了众多新机型,iPhone4/4S、iPhone5/5C/5C、iPhone6/6S、iPhone6 Plus/6S Plus,iPad mini/iPad Air/iPad Pro,这么多不同的屏幕,拥有着不同的分辨率,为了适配这么多的设备,苹果提供了AutoLayout和SizeClasses这两个强有力的工具。AutoLayout作为最基础的部分,对于一个iOS开发者是非常重要的,AutoAutoLayout又是灵活的,对于新手来说掌握是比较难的。

今天小组中一妹子就在AutoLayout上遇到了问题,正好借此机会说一下AutoLayout在IB中的使用

基础使用

图片描述
现在这个界面虽然能显示,但是在不同的机子上却是同样的坐标,然而不同的机型有不同的分辨率,比例,这就是我们用AutoLayout的原因。
AutoLayout的总体思路就是通过对控件的约束来动态确定控件的位置和大小。
我们先来对TextField设置约束,选中这个TextField,IB设置约束有两种方式,一个是用右下角的四个工具设置。另一个和我们关联代码与控件的方式类似,按住ctrl键,拖
,这次拖的目标不是代码,而是其他控件
图片描述
这个可以设置和其他控件的关系,这里我们选择第一个,与容器的leading空间,这样能保证这一小块空间不变。
图片描述
拉完效果是这样,为什么这条约束是红色呢?
是因为这个控件仍处于欠约束的状态,也就是说仅通过已有的约束不能确定其位置,这时如果打开大纲视图,左上角会有错误。
图片描述
这是说现有的约束不能确定在垂直方向的位置
图片描述
图片描述
勾选第二个
图片描述
你会发现这个错误变成了警告
这是说通过视图确定的位置与通过约束确定的位置不同
上面的是通过约束确定的位置
现在我们需要修正这个问题
图片描述
第一个选项,更新框架
也就是将控件移动到通过其约束推测出的地方
第二个,更新约束,也就是将约束修改为你的视图中的位置
我们选择第二个
图片描述
这根蓝线已经移动到了我们希望的位置
但是出现了一个新的警告
黄色虚线的位置就是根据约束,这个textField的位置
这是因为在水平方向,我们仅设定了距左边的距离
它根据文本框内容推测出了一个新的宽度
这是我们不希望的
所以我们在水平方向加一个新的约束
距右侧加号Label的距离
图片描述
第一个选项
水平距离
这个时候问题不仅没有解决,你会发现警告越来越多了
这是因为这个加号也没有设置约束
它的位置是无法通过约束推测的
这个时候不要理会那些警告
做完自然就没了
我们这时候给加号一个垂直方向约束
设置它与左边的TextField center Vertically
后面几个控件也都设置与左边控件的距离,并保持X轴方向在一条直线上
水平方向存在一个问题
两个文本框和中间的加号都是用之间的距离确定的
它的宽度没有办法确定
最后一个结果与右边框做一个TraillingSpace
这是会有红色的报错
这时
我们想一个办法来处理
将两个文本框设置为equal width
这样就会变成几个警告
图片描述
选第一个更新框架
勾选地下的勾
对所有警告都这样处理
对于那个按钮
我们让它到画面最中间去。

这时,我们发现,在横屏时,上面的几个控件都消失了,这是因为我们给左边第一个文本框设置的y轴位置不对,我们现在在大纲视图中删除这条约束,增加一条距离TopGuideLine的约束
现在我们的程序就已经可以在不同的设备上完美适配了


Hydrogen
2.5k 声望73 粉丝

Write code for fun.