iOS scrollView的自動布局

2021-07-09 13:37:16 字數 3039 閱讀 6912

**:傳送門

xcode6中極大的增強了ib中自動布局的能力,下面就通過對刺兒頭scrollview進行一次自動布局實戰,看看自動布局在xcode6中到底值不值得使用。

說 uiscrollview是個刺兒頭,實在沒有誇張,這是由於scrollview本身contentsize、contentinsets等複雜的特性 導致,蘋果文件在講autolayout的時候甚至專門拿出一節講如何對scrollview進行自動布局。國外有個哥們曾經那他遇到的布局問題請教蘋果 員工,結果花費了40分鐘才得出可行的辦法:

一、我們的需求是什麼?

我們要如下圖實現這樣一種布局:

整個檢視一共有三個元件:頭像(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的布局即可。

接下來就是對 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的布局這裡不再詳述)。

三、橫屏布局

調整完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 錨點,輔助定位、布局.

ios ScrollView縮放的實現原理

我們先看一下uiscrollview的幾個 方法 返回被縮放的檢視 func viewforzooming in scrollview uiscrollview uiview?縮放完成之後執行一次,這裡view是被縮放的檢視 func scrollviewdidendzooming scrollvi...

變數的自增 自減 自乘 自除

1.自增 自減 自乘 自除是乙個變數在原有值基礎上再增加 減去 乘以 除以乙個指定的值。通常用在迴圈語句中改變變數的值。2.自增 l 先加1 i 1 int i 0 i i 1 整數自增1 2 string s hello s s world 字串自增 3 自增1 的簡寫形式 i 先 1 再進行其他...

指標的自加自減運算( , )

陣列名代表陣列的首位址,是指標常量,不能進行自加自減運算。void main p a printf s t p 1 p是指向指標的指標,p指向a 0 one p 1指向第二個字母n printf s t p 1 p 1指向a 1 輸出two printf c t p one 的第乙個字母 o pri...