2016年2月2日 星期二

[iOS] AutoLayout 筆記 - ScrollView

ScrollView在設定Layout之中算是特殊種,一開始怎麼設定都不如預期。

一開始假設我們在ViewController之中加入一個ScrollView,並填滿ViewController





















接著,我們想要在ScrollView之中,加入一個高100,全螢幕寬的View,在最上方。

根據以前的經驗,你可能會這樣設定。
























水平距離為 左邊界0
垂直距離為 上邊界0
寬為螢幕大小
高為100

四個條件都吻合了,可是Xcode卻紅通通給你看。

即使按下Update Frames,卻發生不太正常的現象。

整個View變得很詭異
















問題點有兩個,一個一個來解說。

1. 在ScrollView裡面的所有View,寬高均不能以ScrollView的距離來定義。

在一般的View,你塞入一個View,只要將左右邊界距離設為0,你的子View寬就會等於父View,而這樣的效果,在ScrollView是不行的。

因此第一個問題,你的寬必須等於ScrollView,而不是靠距離來等於。



























寬高當然也可以用寫死的方式,像是定義他是100之類的,這是可行的,但是靠邊界來撐大是不行的。

2.在ScrollView裡面的所有View,都必須定義右邊界,下邊界的距離。

ScrollView是可以捲動的,水平是往右捲,而垂直是往下捲,因此你必須定義這個View離右邊界與下邊界的距離為何。

這可能有點難理解一點,不過我們實際動手做看看就知道,拿上一個例子來說,我們現在有一個View,他與螢幕等寬,高度是浮動的,假如超過螢幕高度就可以捲動。


一樣,先設定上左右間距為0,高度先設定為100,根據第一點我們得知,寬高均不能使用距離決定,因此我們將此View設定與ScrollView同寬。

此時你按下Update Frames,你會發現大部分都是你想的結果。

















但是,還是有紅色的錯誤,根據我們前面的說明,必須定義右邊界與下邊界的距離,而我們已經定義了右邊界,而下邊界也沒定義,那我們設定下邊界的距離為0。


















根據以前的經驗,你可能會認為這個白色區塊會填滿整個ScrollView,但是並沒有,而且紅色的錯誤都消失了,因為第一點有提到,所有ScrollView內的View,都不能依照距離來決定寬高。

接著你可以改個顏色跑看看,你會發現他是一個高100,不能捲動的View,因為沒有超出螢幕距離。



























接著我們把這個區塊的高設定的高一些,就能感受到效果了。

找到此View的Hight,將它設定成1500,在試試看。






















你就會得到可以捲動的區塊了,因為我們剛才設定與下邊界為0,因此你捲到最下面還是綠色的。

最後我們試著把下邊界設為30,這樣你捲到最下面會發現,有一小塊是白色的。
















































這樣你對ScrollView設定Layout應該有一定的了解了,

試著在ScrollView多加幾個View看看吧。