ScrollView使用AutoLayout自动布局

最近正在练习一个小项目，有用到ScrollView,页面也比较简单，所以就用Storyboard了。在Storyboard中布局ScrollView遇到了不少的坑，基本都是content size没有设置。以下是小Demo。

可以直接下载Demo自己分析，我也是别人源代码3个小时才研究出来的（比较笨），不想研究的，可以后面的教程。

​* Demo地址*：https://github.com/misaka14/ScrollView-AutoLayout

---

• 1 、效果图：
  ![Uploading Snip20151223_6_760271.png . . .]]](https://img.haomeiwen.com/i976255/fc08678c23d0a5aa.gif?imageMogr2/auto-orient/strip)

• 2 、先把尺寸设置成3.5

Snip20151222_3.png

• 3、添加一个View
  • 1 、重命名wtView
  • 2 、添加约束（0，0，0，0）
    截图：
    Snip20151223_5.png
    gif动画：
    1.gif

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两个约束
    截图：
    

• 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