参照自动布局教程一我们在Xcode7中来实现一下这个界面(由于教程是较早的Xcode版本所以来重做一遍)Xcode7中已经没有了pin这个选项了。
设计图如下:
实现步骤一:在Stroyboard上拖拽三个view并用不同的颜色表示,将他们修改到与设计图相似的大小效果图如下
实现步骤二:通过观察设计图可以发现三个view等高,上半部分两个view等宽,按住command单击选中三个view,使用autolayout约束为等高,同样选中上部两个view约束为等宽,实现过程如下:
同样的方式来处理上半部分两个view的等宽
实现步骤三:根据设计图调整view的位置,并设定view与super view的约束(现在约束的错误暂时不需要处理),单个选中view1设定他的top和left的约束为20
用同样的处理方式来设定view2 的top和right的边距约束,view3的bottom,left、right的边距约束,约束值为20,实现效果如下:
实现步骤四:设定三个view之间的相对距离,选中view2设定lift约束的时候回发现有两个选项,一个值比较小,一个值比较大,默认的是值比较小的哪一个,值比较小的选项是相对view1的距离值比较大的是相对super view的距离,这里使用默认的约束值:
使用同样的方式来处理view相对view1和view2的相对距离,处理完成效果如下:
最后一步:这时候你会发现之前红色的报错消失了,只剩下黄色的警告了,这说明你在约束上没有问题了剩下的只是控件的frame问题。接下来要做的就是单击每个警告,逐步解决每个警告问题就可以了。也可以选中所有view直接update frame一下解决所有问题,最终效果如下:
执行一下检验一下效果(至此布局基础第一节就到此结束了是不是很简单呢):
直接执行效果:
嘿嘿再旋转一下:
ok检验结束,愿能给有缘人,解惑答疑。