Xcode6中極大的增強(qiáng)了IB中自動(dòng)布局的能力，下面就通過對(duì)刺兒頭scrollview進(jìn)行一次自動(dòng)布局實(shí)戰(zhàn)，看看自動(dòng)布局在Xcode6中到底值不值得使用。

說 UIScrollView是個(gè)刺兒頭，實(shí)在沒有夸張，這是由于scrollview本身contentSize、contentInsets等復(fù)雜的特性 導(dǎo)致，蘋果文檔在講autolayout的時(shí)候甚至專門拿出一節(jié)講如何對(duì)scrollview進(jìn)行自動(dòng)布局。國外有個(gè)哥們?cè)?jīng)那他遇到的布局問題請(qǐng)教蘋果 員工，結(jié)果花費(fèi)了40分鐘才得出可行的辦法：

When I had a chance to go talk to an actual Apple Engineer about AutoLayout last week at WWDC, I made sure to go. I thought of my most painful experience using AutoLayout recently – when I was making a login screen with username and password fields on a ScrollView (so it scrolls up when the keyboard comes up) – and had the Apple engineer walk me through the example.......This “simple” solution took the Apple Engineer 40 minutes to solve! However, several senior engineers I know said that they’ve never been able to get AutoLayout working quite right on a ScrollView, so 40 minutes is actually not bad!?【原文地址】

一、我們的需求是什么？

我們要如下圖實(shí)現(xiàn)這樣一種布局：

整個(gè)視圖一共有三個(gè)組件：頭像（UIimageView）、文字(UILabel)、和一個(gè)UIScrollView。我們的布局預(yù)期是豎屏是整個(gè)view采用正常的上下結(jié)構(gòu)；橫屏?xí)r則采用左右結(jié)構(gòu)。

二、豎屏布局

為 了方便布局，對(duì)于在邏輯或者結(jié)構(gòu)上比較緊密的多個(gè)視圖組件，我們往往采取化零為整的辦法，將多個(gè)view放在一個(gè)containerview中，讓這個(gè)父 view獨(dú)自去應(yīng)對(duì)外部情況的變化，將內(nèi)部和外部隔絕開來，本例中，就是將頭像和文字label放入一個(gè)contanierview中的。這樣，我們布局 的主要工作就集中在兩個(gè)組件之間了：頭像所在的containerview和scrollview。同樣的，對(duì)于scrollview中的子view，我 們同樣也可以將其放在同一個(gè)父的container view中，然后將這個(gè)container view作為scrollview的子view也即content view，這樣我們對(duì)scroll view 的布局就可以簡化為對(duì)content view的布局，而content view里面的子view相對(duì)于content view的布局就是普通的布局了，剩下的只需要我們解決好scroll view和content view的布局即可。

打 開storyboard，首先對(duì)默認(rèn)的size class進(jìn)行布局（wAny, hAny）（關(guān)于size class的使用，詳見我上一篇博文）,對(duì)頭像的container view添加四個(gè)約束以確定其frame (x, y, width, height)，這四個(gè)約束分別是：水平居中、距頂端定長、定寬、定長，布局基本功不再多言，無非點(diǎn)擊、選中、設(shè)置......詳情請(qǐng)參見蘋果官方文檔，布局解析見下圖：

接下來就是對(duì) scrollview進(jìn)行布局，我們知道scroll view除了自身的布局需要考慮（x, y, width, height）外，還有一個(gè)contentSize屬性也必須要在布局的過程中進(jìn)行確定，contentSize是UIScrollView用于確定它所 要展示的內(nèi)容尺寸的大小，而這個(gè)contentSize在布局中實(shí)際上是又scroll view的子view :content view的寬和高實(shí)現(xiàn)的，注意：我們不能將content view的寬和高的約束設(shè)定為由scroll view決定（如和scroll view等寬、等高）,否則，Xcode會(huì)有警告：scroll view的content size不確定！

在這種情況下，我們必須要對(duì)content view的布局約束引入scroll view之外其他參照物，我們拖進(jìn)來一個(gè)輔助的view作為參照物or錨點(diǎn)，示意圖如下：

在storyboard中，這三個(gè)view的層次是：

通過這個(gè)參考view，確定content view的寬度和高度，盡管content view的尺寸可以不依賴于scroll view，但我們還不得不設(shè)定content view 和其父view的關(guān)系：具體而言就是要確定content view和scroll view的top, bottom, leading和trailing contstraints，這個(gè)地方可能比較具有迷惑性，原因是蘋果對(duì)于這四個(gè)約束的使用在scroll view中做了變化：它不再是確定content view尺寸的依據(jù)，而是幫助scroll view中content view四周的邊界（or你可以理解為留白），進(jìn)而確定scroll view的contentSize屬性。

這樣，默認(rèn)size class的布局就算完成了，（注：content view的子view的布局這里不再詳述）。

三、橫屏布局

為了布局方 便，我們首先將storyboard中view的尺寸調(diào)整為667 * 375, iphone 6 橫屏?xí)r的尺寸，然后將size class的height設(shè)置為compact模式（因?yàn)闄M屏?xí)r，高度處于“壓縮”狀態(tài)），這樣我們就可以對(duì)橫屏的狀態(tài)進(jìn)行單獨(dú)的布局，Xcode對(duì)自動(dòng) 布局通過size class的使用，靈活性大大提高（詳細(xì)說明參加我上一篇博文），不同size class下約束相互隔離，甚至另外一個(gè)size class下添加的view也是不可見的（not installed）,這樣我們布局工作起來就大大的簡化了。

調(diào)整完view的尺寸后將size class設(shè)為(wAny, hCompact)

前面需求中提到，在橫屏模式我們希望中，將頭像和scroll view按照左右順序布局，這樣可以有效的利用屏幕空間，給用戶最好的使用體驗(yàn)（尤其是iphone6 & plus出來后）。

考慮橫屏的情況，我們不知道屏幕的具體寬度（實(shí)際從4s到6 plus可能有4種數(shù)值），我們想確定頭像和scroll view 的具體位置，這時(shí)，我們又要找一個(gè)參照物了，有了參照我們就能很好的確定各自的約束。這種參照物的思想在自動(dòng)布局中有著廣泛的應(yīng)用，它可以有效的幫我們降 低布局的復(fù)雜度、提高布局的靈活性。

我們?nèi)匀贿x取一個(gè)view作為參考物or 錨點(diǎn)，我們把它的位置放在整個(gè)屏幕的正中間，這個(gè)view我們稱之為：middle anchor view，頭像的trailing space和scroll view 的leading space就都可以以這個(gè)middle anchor view為錨確定x坐標(biāo)值了。

接著，頭像和scroll view以及content view的其他約束可以按照豎屏?xí)r的思路依次添加。布局完成后如圖所示（紅色view即為anchor view，在布局完成之后可將該view隱藏）：

注意，因?yàn)榍懊尕Q屏的時(shí)候我們使用了（wAny, hAny）的寬和高都任意的size class，它包含（wAny, hCompact）這種情況，因此，在上一個(gè)size class設(shè)置的布局元素在當(dāng)前的size class中依然都存在，為了防止布局干擾，我們可以將這些布局全部清除掉再重新布局：

可以方便的在storyboard中清除全部約束

全部布局完成后，編譯運(yùn)行即可獲得前面需求中所示的效果。

四、總結(jié)

1.布局之前考慮好需求是什么，橫豎屏?xí)r的UI展示效果是什么；

2.布局UIScrollView的時(shí)候?qū)⑵渥觱iew放在一個(gè)content view中去，簡化布局；

3.布局content view的時(shí)候必須要引人第三方參照物（view）,已確定其尺寸，注意不能根據(jù)scroll view 來確定content view的尺寸；

4. 一定要設(shè)置content view 相對(duì)于scroll view 的上下左右（top, bottom, leading, trailing）間距，這些設(shè)置不是為了確定content view的尺寸，而是幫助scroll view 確定其contentSize;

5.布局時(shí)注意一些小技巧的使用，可時(shí)布局工作事半功倍：

? a.?將多個(gè)view放入一個(gè)container view的化整為零思想；

? b. 引入?yún)⒄瘴飋r 錨點(diǎn)，輔助定位、布局.

總結(jié)

以上是生活随笔為你收集整理的Xcode6中如何对scrollview进行自动布局（autolayout）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。