xcode6中如何對scrollview進行自動布局（autolayout）
hi,all:
在經過了一番猶豫之后，我決定將我自己做的這個小APP的源碼公布給大家：
其出發點是和大家一起學習iOS開發，僅供學習參考之用。之前代碼是托管於gitlab
上的，今天我將其pull到github上來了，大家可以自行下載：git clone git@github.com:lihux/twentyThousandTomatoes.git沒有安裝git或者不會用的童鞋，
請猛戳github地址：https://github.com/lihux/twentyThousandTomatoes，進去之后選
擇download zip下載即可。
Xcode6中極大的增強了IB中自動布局的能力，下面就通過對刺兒頭scrollview進行一次自動布局實戰，看看自動布局在Xcode6中到底值不值得使用：
說UIScrollView是個刺兒頭，實在沒有誇張，這是由於scrollview本身contentSize、contentInsets等復雜的特性導致，蘋果文檔在講autolayout的時候甚至專門拿出一節講如何對scrollview進行自動布局。國外有個哥們曾經那他遇到的布局問題請教蘋果員工，結果花費了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! 【原文地址】
一、我們的需求是什么？
我們要如下圖實現這樣一種布局：
整個視圖一共有三個組件：頭像（UIimageView）、文字(UILabel)、和一個UIScrollView。我們的布局預期是豎屏是整個view采用正常的上下結構；橫屏時則采用左右結構。
二、豎屏布局
為了方便布局，對於在邏輯或者結構上比較緊密的多個視圖組件，我們往往采取化零為整的辦法，將多個view放在一個containerview中，讓這個父view獨自去應對外部情況的變化，將內部和外部隔絕開來，本例中，就是將頭像和文字label放入一個contanierview中的。這樣，我們布局的主要工作就集中在兩個組件之間了：頭像所在的containerview和scrollview。同樣的，對於scrollview中的子view，我們同樣也可以將其放在同一個父的container view中，然后將這個container view作為scrollview的子view也即content view，這樣我們對scroll view 的布局就可以簡化為對content view的布局，而content view里面的子view相對於content view的布局就是普通的布局了，剩下的只需要我們解決好scroll view和content view的布局即可。 打開storyboard，首先對默認的size class進行布局（wAny, hAny）（關於size class的使用，詳見我上一篇博文）,對頭像的container view添加四個約束以確定其frame (x, y, width, height)，這四個約束分別是：水平居中、距頂端定長、定寬、定長，布局基本功不再多言，無非點擊、選中、設置......詳情請參見蘋果官文，布局解析見下圖：接下來就是對scrollview進行布局，我們知道scroll view除了自身的布局需要考慮（x, y, width, height）外，還有一個contentSize屬性也必須要在布局的過程中進行確定，contentSize是UIScrollView用於確定它所要展示的內容尺寸的大小，而這個contentSize在布局中實際上是又scroll view的子view :content view的寬和高實現的，注意：我們不能將content view的寬和高的約束設定為由scroll view決定（如和scroll view等寬、等高）,否則，Xcode會有警告：scroll view的content size不確定！
在這種情況下，我們必須要對content view的布局約束引入scroll view之外其他參照物，我們拖進來一個輔助的view作為參照物or錨點，示意圖如下：
在storyboard中，這三個view的層次是：
通過這個參考view，確定content view的寬度和高度，盡管content view的尺寸可以不依賴於scroll view，但我們還不得不設定content view 和其父view的關系：具體而言就是要確定content view和scroll view的top, bottom, leading和trailing contstraints，這個地方可能比較具有迷惑性，原因是蘋果對於這四個約束的使用在scroll view中做了變化：它不再是確定content view尺寸的依據，而是幫助scroll view中content view四周的邊界（or你可以理解為留白），進而確定scroll view的contentSize屬性。
這樣，默認size class的布局就算完成了，（注：content view的子view的布局這里不再詳述）。
三、橫屏布局
為了布局方便，我們首先將storyboard中view的尺寸調整為667 * 375, iphone 6 橫屏時的尺寸，然后將size class的height設置為compact模式（因為橫屏時，高度處於“壓縮”狀態），這樣我們就可以對橫屏的狀態進行單獨的布局，Xcode對自動布局通過size class的使用，靈活性大大提高（詳細說明參加我上一篇博文），不同size class下約束相互隔離，甚至另外一個size class下添加的view也是不可見的（not installed）,這樣我們布局工作起來就大大的簡化了。調整完view的尺寸后將size class設為(wAny, hCompact)
前面需求中提到，在橫屏模式我們希望中，將頭像和scroll view按照左右順序布局，這樣可以有效的利用屏幕空間，給用戶最好的使用體驗（尤其是iphone6 & plus出來后）。
考慮橫屏的情況，我們不知道屏幕的具體寬度（實際從4s到6 plus可能有4種數值），我們想確定頭像和scroll view 的具體位置，這時，我們又要找一個參照物了，有了參照我們就能很好的確定各自的約束。這種參照物的思想在自動布局中有着廣泛的應用，它可以有效的幫我們降低布局的復雜度、提高布局的靈活性。
我們仍然選取一個view作為參考物or 錨點，我們把它的位置放在整個屏幕的正中間，這個view我們稱之為：middle anchor view，頭像的trailing space和scroll view 的leading space就都可以以這個middle anchor view為錨確定x坐標值了。
接着，頭像和scroll view以及content view的其他約束可以按照豎屏時的思路依次添加。布局完成后如圖所示（紅色view即為anchor view，在布局完成之后可將該view隱藏）：
注意，因為前面豎屏的時候我們使用了（wAny, hAny）的寬和高都任意的size class，它包含（wAny, hCompact）這種情況，因此，在上一個size class設置的布局元素在當前的size class中依然都存在，為了防止布局干擾，我們可以將這些布局全部清除掉再重新布局：
可以方便的在storyboard中清除全部約束
全部布局完成后，編譯運行即可獲得前面需求中所示的效果。下面的gif動畫展示了由豎屏到橫屏時autolayout對界面重新布局的效果，相當給力：
四、總結
1.布局之前考慮好需求是什么，橫豎屏時的UI展示效果是什么； 2.布局UIScrollView的時候將其子view放在一個content view中去，簡化布局； 3.布局content view的時候必須要引人第三方參照物（view）,已確定其尺寸，注意不能根據scroll view 來確定content view的尺寸； 4.一定要設置content view 相對於scroll view 的上下左右（top, bottom, leading, trailing）間距，這些設置不是為了確定content view的尺寸，而是幫助scroll view 確定其contentSize; 5.布局時注意一些小技巧的使用，可時布局工作事半功倍： a. 將多個view放入一個container view的化整為零思想； b. 引入參照物or 錨點，輔助定位、布局；注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。