iOS8開發～UI佈局（二）storyboard中autolayout和size class的使用具體解釋

1、概要：前一篇初步的描寫敘述了size class的概念，那麼實際中怎樣使用呢，如下兩個問題是咱們必定會遇到的：

一、Xcode6中添加了size class，在storyboard中怎樣使用？

二、auto layout該怎樣與size class配合來進行UI佈局？

2、瞭解一件新事物的最好的辦法就是實踐，讓咱們揭開那神奇的面紗：

樣例一、新建一個Single View Application template項目Demo1，拖拽一個newView到rootView上，並設置背景色爲綠色， 而後不作不論什麼其它改動，執行項目，模擬器選擇iPhone6，執行效果如圖：

橫屏：

豎屏：

把模擬器更改成iPad、iPhone4s等，而後再旋轉屏幕，發現綠色的newView的位置差點兒沒有變化。查看Document Outline發現沒有不論什麼constraint（約束）做用於綠色view上，理論上假設一個view沒有不論什麼constraint，那麼view將沒有位置及大小，但眼下來看是沒問題的，何解？

查看view的size inspector，發現祕密了：

原來假設不給一個view加入不論什麼constraint，系統會本身主動給view加入左、上、寬、高四個約束，就是說新綠色的view會有固定的寬和高，而後以屏幕左上角爲參考點，有一個系統加入的默認位置。（假設咱們向綠色view加入不論什麼其它約束，那麼系統本身主動加入的約束將實效）

另外一個問題是，剛剛切換了很是多不一樣類型的模擬器，至關於切換了不一樣的size class，但顯示綠色view都正常，而size class的存在的目的就是爲了區分不一樣的size class（好比：iPhone4s橫屏wCompact/hCompact，iPhone4s豎屏wCompact/hRegular，iPad橫豎屏都是wRegular/hRegular），而後來作不一樣的UI佈局，何解？

查看當前的size class:

當前的size class爲wAny/hAny，也就是說在size class爲wAny/hAny的時候加入constraint，在其它size class的時候也生效。事實上從字面上也可以看出，Any就是不論什麼的意思，Compact和Regular是Any的子類。

樣例二、基於iPhone適配界面，加入三個view到rootView上，而後無論橫屏仍是豎屏，新加入的三個view之間及與屏幕邊框的距離都保持不變的間距20點寬，效果如圖：

       

新建一個Single View Application template項目Demo2，因爲要適配iPhone橫豎屏，因此改動size class爲wCompact/hRegular來適配豎屏：

拖拽3個view到rootView上，並設置其背景顏色

爲了知足設計要求，要加入例如如下constraint：

（1）設定綠色view距離superview左邊距和上邊距；

（2）設定黃色view距離superview右邊距和上邊距，相對綠色view的的左邊距；

（3）設定藍色view的左邊距和右邊距和下邊距，上邊距離綠色view下邊的距離；

（4）設定綠色view與黃色view等寬

（5）設定藍色view與綠色view等高

現在開始動手吧：選中綠色view，Eidtor－>Pin－>Leading Space to Superview給綠色view加入相對其superview的左邊距，而後選中constraint，改動約束的值爲20，其它constraint以此類推：

加入完如圖：

當中紅色框部分清晰的表達了所加入的constraint；

藍色框部分時加入的constraint，眼下爲黃色線，代表當前的constraint還不能定位view，當一個view的constraint正確的時候，constraint的顏色會變爲藍色。

綠色線框的部分表達了constraint的數值，咱們想讓邊距爲20，因此設置數值爲20 。wC hR Installed代表當前constraint適用於wC hR這樣的size class，不適合any any的size class。

加入綠色view與黃色view以前的距離時候，由於是設定兩個子view的constraint，因此要選中兩個view，而後Editor－>Pin ->Horizontal，設定值爲20：

相同方法Editor－>Pin ->Width Equally，設定綠色view與黃色view等寬度，藍色view與綠色view等高，結果如圖：

但發現constraint顏色仍而後黃色，緣由是當前view的位置和constraint但願的不一致，更新下frame（要選中3個view，因爲constraint關聯3個view）或者點擊Document Outline中的黃色小箭頭，而後會看到詳細的constraint信息來一步步調試，這個也是Xcode6最有突破的地方：

而後效果如圖：

而後執行下項目吧，發現確實和預期的同樣。而後旋轉屏幕，是否是發現橫屏時候白了，屏幕什麼都沒有了？緣由是咱們只適配的豎屏，橫屏尚未適配啊！

改動size class，iPhone4s橫屏的size class爲wCompact/hCompact，而iPhone6 plus爲wReguage/hCompact，那咱們不如設置爲wAny/hCompact吧！而後安裝上邊適配豎屏的方式適配橫屏。適配好後再次執行，橫豎屏都應該是咱們想要的了。

完整項目下載

樣例三、新建一個Single View Application template項目Demo3，加入一個view，是這個view的寬度和高度都是100點寬，並且始終居中於superview，效果如圖：

這個樣例很是簡單，也很是easy實現，目的是補充以上兩個樣例沒有說起到的一些細節。

在rootView上加入一個view，設定背景色爲綠色：

由於不打算區分是哪一種iOS設備，因此size class選擇wAny/hAny，而後綠色的view隨便放到superview上就可以，Auto Layout的理念就是不用去管詳細view的frame，要注意的是這個view終於想怎樣的顯示，屬於基於目的設計的範疇。

這個樣例要完畢兩件事情：

（1）設定約束使view的寬和高爲100點寬

（2）設定約束使view始終居中於superview

先作第（1）件事：選中view，而後Editor－>Pin->Width，設定爲100，相同方法設定Height

         

而後第（2）件是讓view居中：仍是選中view，而後Editor －>Aligh －>Horizontal Center in Container，相同方法設定垂直居中對齊：

而後會發現Document Outline右上角有一個黃色小箭頭：

點擊黃色箭頭進入structure頁面，可以看到一些提示信息，可以瞭解當前佈局存在問題，指導下一步該作什麼。在view中看到一個黃色虛線框，這個框表明眼下約束獲得的view，在structure頁面有一個黃色的點，點擊後會提示你怎樣改動：

選擇Update Frame就是依照當前的約束去更新view，選擇Update Constains是依照拖拽進去view的frame更新約束。在這個樣例中Update Frame是咱們需要的。而後執行項目看看是否是咱們想要的效果吧！

Demo3

本部分細節很是多，而且都是要動手練習纔會明確，多多動手！