IOS的UIScrollView的自動佈局
轉載於 http://blog.csdn.net/dongtaochen2039/article/details/41749209 感謝博主的分享。
最近在研究ios開發,遇到的UIScrollView的自動佈局問題,特記錄之。
終結的要點有:
添加一個AnchorView爲UIScrollView的ContentView確定寬高。
操作如下:
1.我們需要做什麼。
我們需要自己完成一個類似於collection view 的功能。完成的效果圖如下:
上面的標題欄整體是一個view,下面的工作區是scrollview。自動佈局後橫屏效果如下:
3.view 結構
最外層的view是根視圖,第一個view(包含兩個button,和p_w_picpathview的)是標題欄。第二個view(包含scrollview的)是scrollview的滑動區,就是上圖的工作區。
之所以這麼設計就是將複雜的佈局簡單化,這樣原先標題欄好幾個視圖和scrollview的自動佈局就變成一個view和scrollview的自動佈局。整體框架圖如下:
首先先對區域1和區域2的父view進行自動佈局,他們的自動佈局比較簡單,寫出上下左右的間距即可。
下面我們主要講解下區域2的佈局。我們平時對 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中這3個視圖的結構如下:
通過這個參考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屬性。
contentView具體的約束如下:
scrllview的約束可以指定充滿父view,anchor view左邊、右邊、上邊緊挨父視圖。這會xcode會讓你指定anchor view的高度,否則會有***的提示信息。這樣再指定anchor view的高度就可以了。這會你應該有疑問,anchor view不是用來確定滑動區域content view的大小的嗎?如果把anchor view的大小寫死,contentView也不就不能改變大小了嗎?我們需要在代碼裏面動態的更改anchor view的大小,在我們的代碼裏面也就是高度,因爲寬度是屏幕寬度,不用更改。anchor view的高度約束如下圖所示:
這裏我隨便付的值,然後在代碼裏面動態調整高度,修改的代碼如下:
[objc] view plaincopy
//計算contentView的高度
int rowNums = (appDelegate.workerList.count+COLUMN_COUNT-1)/COLUMN_COUNT;
int totalHeight = VIEW_HEIGHT * rowNums + (rowNums+1)*MIDDLE_GAP+100;
//找到anchor view的高度約束脩改高度
NSArray *arrs = scrollAnchorView.constraints;
for (NSLayoutConstraint *attr in arrs) {
if(attr.firstAttribute == NSLayoutAttributeHeight){
attr.constant = totalHeight;
}
}
//更新父視圖約束條件
[scrollAnchorView.superview.superview updateConstraints];
上面的代碼放在你需要動態確定contentview高度的地方。
修改好之後,就可以看到剛開始的效果了。