-
Autolayout是一种“自动布局”技术，专门用来布局UI界面的
首先抛给大家一个问题,苹果手机的屏幕尺寸有3.5,4.0,4.7还有5.5,那么程序员是不是要给不同尺寸的手机都写一份代码去适配?
答案是:不用的.
学习iOS开发这段时间真的渐渐感受到苹果公司真的很为程序员着想的____莫名的幸福感!
那么苹果是怎么解决屏幕适配的问题呢?下面简单引入屏幕适配的一些发展史.
1.苦逼的手动(固定值,不同尺寸就要修改一下)
2.功能不太强大的autoresizingMask(局限:只能设置自身与父类控件之间的关系)
3.Autolayout(从iOS6开始引入,但直到iOS7才起到非常强大的作用)
/*******华丽的分割线*******/
好,扯淡完毕,下面就开始在storyboard中实现一下它的一些基本功能与用法
来一个小需求: 在控制器View底部添加2个View,一个蓝色一个红色,使用autolayout技术让2个View宽度,高度永远相等,高度等于50,距离父控件左边,右边,下边间距和两个2个View之间的间距相等,等于30
1.新建一个Xcode项目,来到storyboard中
2.往控制器添加两个纯洁的UIView,设置他们的背景颜色
3.给蓝色的View添加约束(就是它相对边框和红色View的关系)
3.1选中蓝色View,点击
上图的大致意思就是蓝色View到屏幕左边,右边红色和底部的距离是30,高度是50,最后点击就是添加约束的意思
3.2,接着我们就搞一下红色View
步骤和刚刚一样,只是设置的参数不一样,黄色框中的30是指红色View到右边屏幕是30,这样就搞完了?肯定不是啊,这样我们只约束了两个View的之间的距离和到边框的距离还有蓝色View的高度,关于红色View的高度还有两个View的宽度还不确定. 请注意:上图中间有两个灰色的地方,Equal Widths,Equal Heights,就是等宽等高的意思,那么我们不就可以通过勾选这两个地方就能确定两个View的宽高了吗?
3.3同时选中两个View,然后勾选Equal Widths,Equal Heights,然后更新一下(选择最后这个),然后下图1框中指的是更新选中的View,2号框是更新控制器中所有的View,中间这个叫"擦干眼泪继续"
我们选2号框的,哎呀,出现以下结果
莫慌,请注意左上角的小红色箭头,就是报错了,一般情况就是因为缺乏必要的约束,或者是两个约束冲突
我们来分析一下下图,两个View的间距,宽高都相等了,证明我们刚刚设置的约束没有错,只是还缺少必要的约束.如果我们设置他们的顶部对齐不就行了吗!
command + Z撤销一下,选中红色View按住control键,拖一条线到蓝色View会出现下面窗口
然后点击Top就等设置顶部对齐了,其他的一些对齐方式就看英文意思就行了
3.4最后再更新一下,效果出来了
4.0运行一下
iPhone6s模拟器竖屏效果图
iPhone6s模拟器横屏效果图
4s真机截屏
接下来补充一点东西就是关于clear constrains(擦干眼泪继续)到底是什么!
如果在操作时出现警告 (警告不可怕)
原因就是控件的frame不匹配所添加的约束,比如约束控件的宽度为100,而控件现在的宽度是110
可怕的是报错
一般原因有两点:
p缺乏必要的约束, 比如
只约束了宽度和高度, 没有约束具体的位置
p两个约束冲突, 比如
1个约束控件的宽度为100,1个约束控件的宽度为110
如果通过上述两点去找错,都找不到就只能clear constrains(清楚约束,重新来过,这是一个非常蛋疼的过程,小编也是刚刚从无数个坑中爬出来的)
关于代码实现Autolayout的方法我就暂时不写了,代码过程比较蛋疼,因此我们一般会用到第三方框架Masonry