天天看點

Xcode6中自動布局autolayout和sizeclass的使用

在Xcode中,自動布局看似是一個很複雜的系統,在真正使用它之前,我也是這麼認為的,不過事實并非如此。

我們知道,一款iOS應用,其主要UI元件是由一個個相對獨立的可視單元構成,這些可視單元有的主要負責向使用者輸出有用的資訊,有些則負責資訊的輸入(互動),互動的過程中往往還伴随有動畫的效果,已達到整個資訊傳遞的連貫性以及使用者體驗的細膩感。可視單元,在實際開發中主要是view、button等,那麼這些可視單元的關系由兩個基本的關系構成:兄弟關系和父子關系,整個視圖單元就是一個樹形結構:

Xcode6中自動布局autolayout和sizeclass的使用

對于任何一個UI元件,确定了它的(相對于父view)位置、大小也就确定了它在整個UI視圖中的展示效果。

Autolayout(以及iOS8中新增的sizeclass)是為了解決這些UI可視單元或者元素是怎樣布局、排列的問題。在過去隻有iPhone4的時候,我們可以在代碼裡将沒一個可視單元的位置寫死,這樣是沒問題的,但随着iPhone5、6的釋出,螢幕尺寸有了越來越多中可能,未來不排除更多尺寸的iPhone釋出出來,這就要求我們的APP的UI元素具有在螢幕尺寸不同的裝置上具有一定動态的可調性,已實作較好的UI展示效果。從目前蘋果提供的技術來看,有下、中、上三種實作方法:

下策是,代碼中判斷目前裝置的尺寸,對UI元素進行手工的調整,其缺點是顯而易見的:代碼複雜、容易出錯、且維護難度大、靈活性極差;

中策是,通過設定可視單元(UIView UIButton...)的autoresizing屬性,預設當該view所在的環境(父view)發生變化時它的尺寸和位置應該如何調整,該方法可以在Xcode的interface builder中(storyboard 或者 xib)設定完成,但其隻能針對父子關系進行有限的調整,比如左邊距是否固定,尺寸是否可變等,而對于兄弟關系的調整則無法實作,對于UI比較固定的APP這種調節方式也算基本滿足需求;

上策就是結合使用autolayout和sizeclass對UI可視單元的父子關系、兄弟關系進行全方位的調整,而且調節精度更高:不僅能确定一個view的位置尺寸的變化依據是什麼,還能對這些依據加以不同的優先級,先滿足什麼條件,再滿足什麼條件,對于重要的位置尺寸可以優先保證,這樣整個APP就具有極強的動态可調性,滿足不同裝置、不同應用場景下的需求。

在目前蘋果手機蘋果尺寸多達四種的情況下,顯然新的APP必須要采用上策來解決視圖元件的布局問題。

Autolayout的作用非常明确:幫我們确定在不同裝置、不同(父view)環境下,同一個可視單元所應具有合适的位置和尺寸,是以,當一個UIView上所施加的限制能夠唯一确定它的frame(x, y, width, height)的時候我們的自動布局的使用才是正确的。而新手通常犯的兩類錯誤就是限制不足(限制太少)和限制沖突兩種(限制太多)。如果你給出的限制隻能夠确定這個view的大小,或者位置或者位置中的某一個項(比如x)的時候,就會出現限制不足的情況,在xib或者storyboard中,會以***的警告出現在左側提示框内;如果你給出的限制推導出了兩個甚至多個互相沖突的位置尺寸結果的時候,就産生了布局錯誤,在編譯的時候直接就build不過。

在iOS8中,新增了Size Classes特性,它是對目前所有iOS裝置尺寸的一個抽象,也是該抽象了,想想現在多少種iOS尺寸的裝置吧:iPhone4-5-6-6plus、iPad、iPad mini、iWatch,如何還是按照以前那針對種特定裝置來編寫不同的布局的話,一定是很糟糕的一件事情。

現在有了sizeclass,事情就好辦多了:你不是裝置多嗎,那我們就隻把螢幕的寬和高分别分成三種情況:(Compact, Regular, Any),也即緊湊、正常和任意。這樣寬和高三三一整合,一共9中情況。如下圖所示,針對每一種情況,如果需要的話,我們可以單獨在storyboard或xib中設定UIView的自動布局限制,甚至某一個button是否顯示都是能輕松實作。

Xcode6中自動布局autolayout和sizeclass的使用

關于size class的詳細解析,參考蘋果文檔和wwdc2014視:點選打開連結 (What's New in Interface Builder)。

對Xcode的interface builder比較熟悉的童鞋應該對UIButton的超強定制性映像深刻:通過選擇button的不同狀态(normal、height、disabled...),我們可以單獨設定每一種狀态,button的background p_w_picpath、p_w_picpath、text color等屬性,見下圖:

Xcode6中自動布局autolayout和sizeclass的使用

而Xcode6中對自動布局的重大變更有異曲同工之妙:開發者可以根據實際需要,針對size class的九種組合中的某一種或幾種分别進行自動布局的設定,這樣,當APP運作于不同螢幕、不同旋轉方向的時候,就可以根據目前環境的size class情況使用我們預先設定好的布局資訊,進而達到APP UI的極大靈活性。

和設定UIButton的不同狀态的不同屬性類似,我們首先選擇一種size class,然後針對該種size class進行自動布局。下面我們以一個簡單的布局場景為例進行說明:

假設,我們想實作下面這個效果:橫屏和豎屏頭像和label都能正常的現實,且在“比較恰當”的位置:顯然橫屏的時候,高度處于壓縮的狀态,(height: compact),我們需要先對正常的布局之外,還要添加一種(wAny, hCompact)size class的布局:

Xcode6中自動布局autolayout和sizeclass的使用

首先,我們對預設的sizeclass進行布局,确定頭像和label的位置和尺寸:

Xcode6中自動布局autolayout和sizeclass的使用

設定完(wAny hAny)之後,點選wAny hAny文字(上圖底部),選擇(wAny hCompact):注意點選後彈出一個九宮格浮框,拖動滑鼠即可選擇響應的size class,注意在右下角(紅色方框表示),還可以選擇是否install,如果取消勾選,則這個頭像在目前size class下就不會被加載(自然也就不顯示出來)。

Xcode6中自動布局autolayout和sizeclass的使用

在新的size class下我們開始添加新的布局,注意,這裡并沒有覆寫上一種size class我們定義好了得布局,知識針對目前的size class添加新的、獨立的布局資訊,狡兔三窟,Xcode6這下子一口氣給了我們九個窟窿,爽!

Xcode6中自動布局autolayout和sizeclass的使用

布局完畢,運作起來,即可達到我們想要的效果!

繼續閱讀