Autolayout UIScrollView

http://www.cocoachina.com/ios/20141011/9871.html

 

Xcode6中如何對scrollview進行自動佈局（autolayout）

 

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! 【原文地址】

1、咱們的需求是什麼？

咱們要以下圖實現這樣一種佈局：

整個視圖一共有三個組件：頭像（UIimageView）、文字(UILabel)、和一個UIScrollView。咱們的佈局預期是豎屏是整個view採用正常的上下結構；橫屏時則採用左右結構。

2、豎屏佈局

爲 了方便佈局，對於在邏輯或者結構上比較緊密的多個視圖組件，咱們每每採起化零爲整的辦法，將多個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的佈局這裏再也不詳述）。

3、橫屏佈局

爲了佈局方 便，咱們首先將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中清除所有約束

所有佈局完成後，編譯運行便可得到前面需求中所示的效果。

4、總結

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 錨點，輔助定位、佈局.