**:傳送門
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...