前言
Autolayout（以及iOS8中新增的sizeclass）是為了解決這些UI可視單元或者元素是怎樣布局、排列的問題。在過去隻有iPhone4的時候，我們可以在代碼裡将沒一個可視單元的位置寫死，這樣是沒問題的，但随着iPhone5、6的釋出，螢幕尺寸有了越來越多中可能，未來不排除更多尺寸的iPhone釋出出來，這就要求我們的APP的UI元素具有在螢幕尺寸不同的裝置上具有一定動态的可調性，已實作較好的UI展示效果。
概念初探
iOS8之前,公司在開發項目時,先做的iPhone版,然後要求開發iPad版本,其實内容是完全一樣的,隻是UI變化了,但是我們就需要建立2個工程來分别對應實作.iOS8推出的Size Class,可以讓我們在一個工程的storyboard中進行所有尺寸螢幕的适配,不僅是iPhone 4s-5/5s-6-6 Plus,還包括iPad界面.它引入了一種新的概念,抛棄傳統意義上我們适配時所謂的具體寬高尺寸,把螢幕的寬和高分别分成兩種情況:Compact-緊湊, Regular-正常(Any-任意,其實就是這2種的組合,是以我沒分成3種情況).搭配起來是3*3,也就是無論如何變化,加起來也就9種,如上圖.
1.實際應用中,這Compact,Any,Regular如何運用呢?
w:Any h:Any 是我們剛建立工程時候預設選擇的,算是一切描述的父類.其他的種類描述都是在此基礎上變化的,比如:如果weight設為Any，height設定為Regular，那麼在該狀态下的界面元素在隻要height為Regular，無論weight是Regular還是Compact的狀态中都會存在.于是:
w:Compact h:Compact - (w:Any h:Compact , w:Compact h:Any , w:Any h:Any)
w:Regular h:Compact - (w:Any h:Compact , w:Regular h:Any , w:Any h:Any)
w:Compact h:Regular - (w:Any h:Regular , w:Compact h:Any , w:Any h:Any)
w:Regular h:Regular - (w:Any h:Regular , w:Regular h:Any , w:Any h:Any)
2. 再來看一組資料和一張圖(國外一位部落客給出的,很形象):
iPhone4S,iPhone5/5s,iPhone6
豎屏：(w:Compact h:Regular)
橫屏：(w:Compact h:Compact)
iPhone6 Plus
豎屏：(w:Compact h:Regular)
橫屏：(w:Regular h:Compact)
iPad
豎屏：(w:Regular h:Regular)
橫屏：(w:Regular h:Regular)
3.可以總結為:
- 如果項目不支援橫屏顯示,使用w:Compact h:Regular(或者直接取消使用Size Class)
- 如果項目支援橫屏顯示,使用w:Compact h:Regular+w:Any h:Compact
- 對于一些公有的限制(任意組合中都适用),一般放在w:Any h:Any中設定
- iPad同理
是以,我覺得Size Class最大的幫助是,解決橫屏适配和iPhone iPad共享一個設計闆…(個人意見)
試驗回報一
1.首先,先建立一個工程,展開如下頁面
PS:這是iOS8的新特性,真的用到項目裡需要等放棄相容iOS7 。。。顯然,目前還是不行的
2.在Any Any情況下,放置一個Label,并設定限制上-左-下-右為0-0-20-0
3.在Compact Any情況下,又放置一個Label,并設定限制上為20
4.繼續在Compact Any情況下,來看看橫屏狀态下的變化
5.最後切換到Regular Any下,完成6 Plus 的橫屏顯示
試驗回報二
試驗一裡面,驗證了一下概念中所列舉的各個螢幕适用的組合,接下來,算是Size Class 解決橫屏的妙用
PS:運用于,橫屏适配,重新排版豎屏時候的UI布局
除了改動不同組合下限制,也能改動控件在不同組合下是否顯示
試驗回報三
AutoLayout這裡不給具體如何設定,因為不知道如何寫,感覺還是大家多動手去寫,去試,最有效了
下面給出AutoLayout設定的圖解
簡答測試Demo結果圖:
如果不橫屏,也可以直接取消Size Classes(圖不一樣,不同時間寫的…囧)
最終Demo
Demo的Github位址:https://github.com/ConanMTHu/Size-Classes-Demo/tree/master