UIScrollView相對佈局

UIScrollView相對佈局

UIScrollView在IB中的相對佈局一直是個使人頭疼的事情，你們所遇到的不外乎下面兩個問題
1. 如何正確肯定contentSize大小
2. 如何設計超過一屏大小的界面

首先必須知道的一點是使用autolayout後，contentSize無需手動設置，系統會經過加入到UIScrollView的內容來肯定contentSize的大小。先來看一個簡單的例子。

如何正確肯定contentSize大小

1. 拖一個UIScrollView到VC上，設置其上下左右的約束相對於父視圖爲0
   

2. 拖一個UILabel到UIScrollView中心上，一樣須要設置上下左右的約束
   

3. 最終獲得的結果:
   

爲何label的佈局須要肯定設定上下左右的約束？

前面提到的，系統會經過加入到UIScrollView的內容來肯定contentSize的大小。設想一下若是去除掉向右和向下的約束，那麼UIScrollView爲了能包含這個label，contentSize所要達到的條件是：
* 橫向至少 139 + 42=181 像素的寬度
* 縱向至少 273 + 21=294 像素的高度

也就是contentSize的值至少是{181, 294}，固然這個值還能夠是{200, 300}等等，因此說contentSize的值是不肯定的。並且當去除這任意一個約束的時候，IB也會給出contentSize不肯定的警告。

warning: Ambiguous Layout: Scrollable content size is ambiguous for "Scroll View".

另外須要注意的是，對於固定行數和固定text值的label，高寬是肯定的，不用顯性的去設置。

再來看增長了向下和向右的約束的時，contentSize所要達到的條件是：
* 橫向: 139 + 139 + 42 = 320
* 縱向: 274 + 273 + 21 = 568

contentSize這時候的值是肯定的爲{320, 568}，因此在佈局UIScrollView內容視圖的時候，始終要記住一點：必須讓UIScrollView知道其contentSize大小，而不是一個不肯定的值，這樣纔算完成UIScrollView佈局。

再回頭看UIScrollView的佈局：相對於其父視圖的上下左右約束都是0。這就說明它的寬高其實決定於設備，3.5寸屏幕大小的設備是{320,480}，4.0寸屏幕大小的設備是{320,568}.....那麼若是在iPhone 4上運行，UIScrollView縱向須要滾動，由於縱向須要的像素大小(568) > 480。在iPhone 5上運行，UIScrollView縱向不須要滾動，由於縱向須要的像素大小(568) = 568。

實際運行狀況具體如何？在iPhone 5(7.1固件)模擬器上運行會發現，UIScrollView居然能夠縱向滾動，這是爲何。還記得iOS 7給UIScrollView及其子類預留的額外64個像素的滾動區域嗎，就是這個緣由致使UIScrollView的contentSize值的高度會相對減小64像素。那麼縱向須要的像素大小(568) > 568 - 64，因此UIScrollView纔會在縱向滾動。能夠試着將label向上的約束值改成274 - 64 = 210或在IB中取消viewcontroller的Adjust Scroll View Insets就會沒法滾動。

如何設計超過一屏大小的界面

簡單的佈局兩屏寬度的UI

1. 設置viewcontroller的寬度
   
   這樣一來就能夠在超過兩屏寬度的視圖上佈局
2. 拖兩個view到UIScrollView上，分別設置好顏色，view1表明紅色view，view2表明黑色view
   
3. view1設置左、上、下約束爲0，向右相對於view2屬於設置0，view2設置右、上、下約束爲0
   
   先無視警告，到這步contentSize的寬高其實都是未肯定的，由於view1和view2的寬高都是不肯定的。
4. 選中view1和UIScrollView約束選擇相同的寬高，選擇view2執行相同的約束，最後Update Frames
   
   橫向：0 + view1的寬度 + 0 + view2的寬度 = 兩倍的UIScrollView寬度
   縱向：0 + view1的高度 + 0 = UIScrollView高度 或 0 + view2的高度 + 0 = UIScrollView高度
5. 將viewcontroller的size從新設置爲Fixed

具體操做看土豆視頻