最近正在练习一个小项目,有用到
ScrollView,页面也比较简单,所以就用Storyboard了。在Storyboard中布局ScrollView遇到了不少的坑,基本都是content size没有设置。以下是小Demo。
可以直接下载Demo自己分析,我也是别人源代码3个小时才研究出来的(比较笨),不想研究的,可以后面的教程。
* Demo地址*:https://github.com/misaka14/ScrollView-AutoLayout
1 、效果图:
![Uploading Snip20151223_6_760271.png . . .]]](http://upload-images.jianshu.io/upload_images/976255-fc08678c23d0a5aa.gif?imageMogr2/auto-orient/strip)2 、先把尺寸设置成3.5

- 3、添加一个View
- 1 、重命名
wtView - 2 、添加约束(0,0,0,0)
截图:
Snip20151223_5.png
gif动画:
1.gif
- 1 、重命名
4 、添加ScrollView
-
1 、添加约束 (0,0,0,0)
截图:
Snip20151223_6.png
gif动画
2.gif -
5 、在
ScrollView中添加View-
1 、添加一个
View在ScrollView中,并添加约束(0,0,0,0)
截图:
Snip20151223_7.png -
2 、
contentView在wtView添加Equal Widths、Equal Heights两个约束
截图:
Snip20151223_8.png
-
-
3 、点击
contenetView的Equal Heights约束,并将Multiplier的值改为2
截图:
Snip20151223_9.png
gif动画
3.gif -
6、添加蓝色View、黄色View
- 1 、添加
blueView、yellowView
截图:
Snip20151223_10.png - 2 、
blueView向wtView添加Equal Widths、Equal Heights两个约束
截图:
- 1 、添加
-
3 、
blueView向contentView添加Leading、Top两个约束
截图:
Snip20151223_14.png -
4、
yellowView向blueView添加Vertical Spacing、Leading、Equal Withs、Equal Heights四个约束
截图:
Snip20151223_16.png -
5、将
yellowView至blueView的Vertical Spacing的Constant改为0
截图:
Snip20151223_17.png
gif动画:
4.gif













