在使用storyboard和xib時(shí)，我們經(jīng)常要用到ScrollView，還有自動(dòng)布局AutoLayout，但是ScrollView和AutoLayout 結(jié)合使用，相對(duì)來(lái)說(shuō)有點(diǎn)復(fù)雜。根據(jù)實(shí)踐，我說(shuō)一下我的理解，在故事板或xib中，ScrollView是根據(jù)其下面的一個(gè)View的大小來(lái)確定ContentSize的大小。

看一下效果

1. 創(chuàng)建一個(gè)項(xiàng)目，拖拽一個(gè)ScrollView到故事板中，如下圖

2. 選中ScrollView，添加約束。

3. 拖拽一個(gè)View到ScrollView上， 然后添加上下左右四周約束。

4.添加完之后， 可能會(huì)報(bào)一個(gè)錯(cuò)， 如下圖， 這個(gè)暫時(shí)別去管。 

5. 我們先確定一下， 我們是需要水平方向的滾動(dòng)還是豎直方向的滾動(dòng)，或者水平方向和豎直方向都需要滾動(dòng)。

a.水平方向和豎直方向都需要滾動(dòng)的話(huà)， 不用添加

b.水平方向滾動(dòng)需要添加下面一個(gè)約束

c.豎直方向需要添加下面一個(gè)約束

6.我們以水平方向滾動(dòng)為例，  我們需要確定我們想要的寬度， 添加一個(gè)固定的寬度的約束。

7.選中View， 更新一下Frame

8.如果是想要?jiǎng)討B(tài)設(shè)置ScrollView的寬度，也就是設(shè)置View的寬度約束的值， 我們將其拉成屬性， 然后修改其值。

9. 如果是確定的寬度， 可以在- (void)updateViewConstraints這個(gè)方法中修改，也可以在別處修改。

10.現(xiàn)在運(yùn)行，就可以水平滾動(dòng)了。 豎直方向的滾動(dòng)和水平方向滾動(dòng)的設(shè)置差不多。 我們來(lái)添加兩個(gè)View， 先拖拽一個(gè)View（我設(shè)為灰色）到視圖上， 然后添加約束， 如下圖

11.再拖拽一個(gè)View， 背景顏色設(shè)為紅色，設(shè)置好之后， 將frame設(shè)置到我們需要的， 我這邊將X設(shè)置到600。

12.我們給第二個(gè)View添加約束，如下圖

13.我們還需要設(shè)置一個(gè)約束， 就是第二個(gè)View距離SuperView的距離，就是第二個(gè)View的Leading約束

14.然后將這個(gè)約束Leading拉成屬性，在- (void)updateViewConstraints設(shè)置他的值

如下圖

這樣子就OK了。 

自動(dòng)布局需要自己去多多實(shí)踐， 有很多細(xì)節(jié)需要注意的。 

這個(gè)例子的demo地址:http://download.csdn.net/detail/h1101723183/8253159

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