storyBoard方式ScrollView的AutoLayout

在使用storyboard和xib时，咱们常常要用到ScrollView，还有自动布局AutoLayout，可是ScrollView和AutoLayout 结合使用，相对来讲有点复杂。根据实践，我说一下个人理解，在故事板或xib中，ScrollView是根据其下面的一个View的大小来肯定ContentSize的大小。

看一下效果

 

 

1. 建立一个项目，拖拽一个ScrollView到故事板中，以下图

 

2. 选中ScrollView，添加约束。

3. 拖拽一个View到ScrollView上， 而后添加上下左右四周约束。

4.添加完以后， 可能会报一个错， 以下图， 这个暂时别去管。 

5. 咱们先肯定一下， 咱们是须要水平方向的滚动仍是竖直方向的滚动，或者水平方向和竖直方向都须要滚动。

a.水平方向和竖直方向都须要滚动的话， 不用添加

b.水平方向滚动须要添加下面一个约束

c.竖直方向须要添加下面一个约束

6.咱们以水平方向滚动为例，  咱们须要肯定咱们想要的宽度， 添加一个固定的宽度的约束。

7.选中View， 更新一下Frame

8.若是是想要动态设置ScrollView的宽度，也就是设置View的宽度约束的值， 咱们将其拉成属性， 而后修改其值。

9. 若是是肯定的宽度， 能够在- (void)updateViewConstraints这个方法中修改，也能够在别处修改。

10.如今运行，就能够水平滚动了。 竖直方向的滚动和水平方向滚动的设置差很少。 咱们来添加两个View， 先拖拽一个View（我设为灰色）到视图上， 而后添加约束， 以下图

11.再拖拽一个View， 背景颜色设为红色，设置好以后， 将frame设置到咱们须要的， 我这边将X设置到600。

12.咱们给第二个View添加约束，以下图

13.咱们还须要设置一个约束， 就是第二个View距离SuperView的距离，就是第二个View的Leading约束

14.而后将这个约束Leading拉成属性，在- (void)updateViewConstraints设置他的值

以下图

这样子就OK了。 

自动布局须要本身去多多实践， 有不少细节须要注意的。 

这个例子的demo地址:http://download.csdn.net/detail/h1101723183/8253159

竖直方向的Demo下载地址在 http://download.csdn.net/detail/h1101723183/8266503