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!?【原文地址】
一、我們的需求是什么?
我們要如下圖實現這樣一種布局:
整個視圖一共有三個組件:頭像(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中清除全部約束
全部布局完成后,編譯運行即可獲得前面需求中所示的效果。
四、總結
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 錨點,輔助定位、布局.
總結
以上是生活随笔為你收集整理的Xcode6中如何对scrollview进行自动布局(autolayout)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【转】像素存储容量的计算
- 下一篇: Swift调用第三方OC项目