在这里,我将在Storyboard里使用Autolayout对scrollView实现自动布局!
我们要实现如图界面:
其中:
2的宽度是屏幕宽度的0.625
3、4的宽度是屏幕的0.3,他们之间的距离位屏幕宽度的0.1
别问为什么要用这几个数字,他们方便而已。。。你也可以试试其他的
1.首先我们创建一个工程在viewcontroller里面添加一个scrollView并设置以下约束:
*** 注意:最好不要勾选Constrain to margins *** 然后更新一下Frame(快捷键 command + option + =)
2.将ViewConteoller的size设置成Freeform,并将高度搞到800来,再更新以下scrollview的frame, 然后 添加5个Label 1\2\3\4\5,这里会报红,别管他
3.现在我们设置1的约束,没什么说的,就是上左右再加上高度,在设置它居中:如图:
4.现在设置2的约束
- 按住ctrl点中2往父视图上拖,松手选择Equal Width,然后点击该约束,在右侧修改其属性:如图
- 在将2的宽高调成1:1
- 最后,将它居中OK
- 现在将3,4的约束设置好就差不错了
- 将3、4的宽高比设成1:1,即相等
- 将3、4的宽度设成屏宽的0.3倍,参考2的设置
- 修改3的Leading(左边距),设置成如图:
-
将4的Trailing(右边距)设置成如图:
先将Fist item 与 second item调换(下拉Fist item的下拉框,选中最后一个选项) ,变成如图,在设置
- 将3、4 top bottom 约束设置好,ok
6.将5的约束 居中、宽、高设置好,OK ,大工告成!
Demo下载
这里还有一个关于TableViewCell高度自动布局的Demo,暂时没时间写文章,有兴趣的可以去看看,很简单的!
写的比较匆忙,望见谅。。。