Swift自適應佈局（Adaptive Layout）教程（一）

通用的Storyboard

通用的stroyboard文件是通向自適應佈局光明大道的第一步。在一個storyboard文件中適配iPad和iPhone的佈局在iOS8中已再也不是夢想。咱們沒必要再爲不一樣尺寸的Apple移動設備建立不一樣的storyboard文件，不用再苦逼的同步若干個storyboard文件中的內容。這真是一件美好的事情。

咱們打開Xcode，新建一個項目：

選擇iOS\Application\Single View Application建立一個單視圖應用：

設置項目名稱AdaptiveWeather，語言選擇Swift，設備選擇Universal：

建立好項目後，咱們在項目目錄結構中能夠看到只存在一個storyboard文件：

Main.storyboard文件就是一個通用的storyboard文件，它能夠適配目前全部屏幕尺寸的Apple移動設備。打開該文件，同窗們會看到一個View Controller，以及一個咱們不太熟悉的界面尺寸：

同窗們不要吃驚，沒錯，大家看到的就是一個簡單的、有點大的正方形！大夥都知道，在上一個版本的Xcode中，storyboard裏的屏幕尺寸都對應着咱們所選的目標設備的尺寸，可是這樣沒法讓咱們達到「用一個storyboard搞定全部設備」的宏偉目標。因此在iOS8中，Apple將storyboard中屏幕的尺寸進行了抽象處理，也就是說咱們看到的這個正方形是一個抽象的屏幕尺寸。

咱們接着往下走，選中Main.storyboard文件，而後在右側工具欄中選擇File Inspector頁籤，而後勾選Use Size Classes選項：

在新的iOS8項目中，該選項默認是勾選的。但當你使用老版本的項目建立新的storyboard文件時就須要你手動進行勾選了。

設置你的Storyboard文件

首先，咱們打開Main.storyboard文件，從組件庫（Object Library）中選擇Image View拖拽到View Controller中。選中剛剛拖入的Image View，在右側工具欄選擇Size Inspector頁籤，設置X座標爲150，Y座標爲20，寬爲300，高爲265。

而後再拖入一個View組件，設置X座標爲150，Y座標爲315，寬爲300，高爲265。

選擇你剛纔拖入的View，在右側工具欄中選擇Identity Inspector頁籤，在Document面板中的Label屬性輸入框中輸入TextContainer。這個屬性的做用就是給View起一個名字，方便咱們辨認。這裏要注意一下，Document面板有多是隱藏的，咱們須要點擊它後面的 Show按鈕來顯示它。咱們拖入的這個View最後是顯示城市和溫度Label的容器。

完成上面的設置後，同窗們可能會發現剛纔拖入的View貌似看不到，這是由於它的背景色和View Controller的背景色是相同的，都是白色，因此咱們不太容易辨別。咱們來解決這個問題，選中View Controller的View，而後在右側工具欄中選擇Attribute Inspector頁籤，設置背景色爲 紅：74，綠：171，藍：247。而後再選擇TextContainer，就是咱們拖入的View，設置背景色爲 紅：55，綠：128，藍：186。此時Main.storyboard文件中應該是這番景象：

到目前爲止，咱們在View Controller中添加了兩個組件Image View和View，這也是僅有的兩個組件，接下來咱們就要給它們添加一些佈局約束了。

添加布局約束

選擇image view，點擊底部自動佈局工具欄中的Align按鈕，勾選Horizontal Center in Container選項，將後面的值設置爲0，點擊 Add 1 Constraint按鈕添加第一個約束。

這個約束的意思是讓image view在它的容器（View Controller的View）中保持居中。

而後再點擊底部自動佈局工具欄中的Pin按鈕，添加一個image view頂部與容器頂部間距的約束，咱們設置爲0：

上面這兩個約束使image view處於容器居中的位置，而且它的頂部與容器頂部有一個固定的間距。如今咱們須要添加image view和text container view之間的約束。同窗們先選中image view，而後按住Ctrl鍵和鼠標左鍵，從image view往text container view移動鼠標：

鬆開鼠標左鍵後會彈出一個約束菜單，咱們選擇Vertical Spacing：

這個約束決定了image view底部和text container view頂部之間的距離。

如今選中image view而後點擊右側工具欄中的Size Inspector頁籤，同窗們會發現這裏在Xcode6中和以前的Xcode版本有所不一樣：

你會看到以前添加的三個佈局約束，你能夠在Size Inspector中很方便的修改這些佈局約束。好比點擊Bottom Space To: TextContainer約束後的 Edit按鈕，會彈出約束屬性編輯框，咱們讓Constant的值等於20：

而後點擊該彈出框以外的任意地方關閉該彈出框。

你先已經將TextContainer view頂部與image view底部的間距調整到了20，咱們還須要添加TextContainer view另外三個邊的間距約束。

繼續選擇TextContainer view，點擊底部的Pin按鈕彈出 Add New Constraints窗口，在 Spacing to nearest neighbor面板中設置左、右、底部的約束，將值設置爲0，而後點擊Add 3 Constraints按鈕添加約束。這裏要注意的是，在設置約束時要將 Constrain to margins選項的勾去掉，這樣能夠避免TextContainer view產生內邊距：

這三個約束會讓TextContainer view的左、右、底部三個邊與容器的左、右、底部的間距始終爲0。

如今Main.storyboard中應該是這番景象：

此時同窗們應該會注意到在view上有幾個橘黃色的約束線，這意味着還有一些約束上的問題須要咱們注意。不過在運行時storyboard會自動更新view的大小來知足它與容器的約束條件。咱們也能夠點擊底部 Resolve Auto Layout Issues 按鈕，在彈出框中選擇 All Views in View Controller/Update Frames 來修復提示的約束問題，可是若是咱們這樣作，那麼image view的尺寸就會壓縮成零，也就是會看不到image view。

這是由於咱們的image view還有沒有任何內容，可是它有一個缺省的高和寬，而且值爲0。進行自動佈局的時候，若是被約束的view沒有實際的高和寬，那麼會依照缺省的高和寬來知足約束條件。

咱們接着學習，在項目結構中打開 Images.xcassets ，而後點擊左下角的 +號，在彈出菜單中選擇 New Image Set：

雙擊左上角的 Image 標題將其改成 cloud ：

咱們剛纔新建的這個image set其實就是若干圖片文件的一個集合，其中的每個圖片都會對應一個特定的應用場景，也就是針對與不一樣分辨率的Apple移動設備。好比說，一個圖片集合可能會包含針對非視網膜、視網膜、視網膜高清三種分辨率的圖片。自從Xcode中的資源庫與UIKit完美結合後，在代碼中引入圖片時咱們只須要寫圖片的名稱，程序在運行時會根據當前運行的設備自動選擇對應分辨率的圖片。

注意：若是你之前使用過經過資源庫管理圖片，那麼你可能會發如今Xcode6中會有所不一樣。那就是3x圖片是怎麼回事？

這個新的分片率是專爲iPhone 6 Plus提供的。這意味着每個點是由3個像素點組成，也就是說3x的圖片比1x圖片的像素多9倍。

目前你的圖片集合中仍是空的，同窗們能夠在這裏下載須要的圖片cloud_images.zip ，而後將圖片拖入剛纔建立的名爲cloud的圖片集合中，將 cloud_small.png圖片拖到 1x圖片區域：

因爲咱們的圖片背景顏色是透明的，因此在圖片集合中看到的都是白色的圖片。你能夠選中某一個圖片，而後按下空格鍵來預覽圖片。好比選中 1x 圖片，按下空格：

如今將 cloud_small@2x.png 圖片拖至 2x 圖片區域，將 cloud_small@3x.png 圖片拖至 3x 圖片區域。和以前狀況同樣，咱們看到的只是白色的圖片，但咱們能夠經過空格鍵來預覽圖片集合中的圖片。

如今你就能夠在image view中設置圖片了。咱們回到 Main.storyboard 中，選中image view，在右側工具欄中選擇 Attribute Inspector 頁籤，將 Image View 面板中的 Image 屬性設置爲 cloud，而後將 View 面板中的 Mode 屬性設置爲 Aspect Fit ：

如今你的Main.storyboard中應該是這番景象：

咱們看到storyboard中一直有橘黃色的約束提示，是時候讓咱們來修復它們了。首先選中view controller的view：

而後點擊底部的 Resolve Auto Layout Issues 按鈕，在彈出菜單的 All Views in View Controller 面板中選擇 Update Frames ：

這時，storyboard會自動根據約束條件從新計算view的大小以知足約束：

預覽助手編輯器（Preview Assistant Editor）

通常狀況下，在這個時候咱們應該會在iPad、iPhone4s、iPhone5s、iPhone六、iPhone6 Plus這幾個不一樣尺寸的設備上編譯運行程序，以便測試通用的storyboard是否能在不一樣尺寸的設備上正確的自適應。但這確實是個體力活，一遍一遍的更改設備、編譯、運行，多麼苦逼。但上天老是會眷顧咱們這些苦逼的程序員，Xcode6提供了Preview Assistant Editor，能在一個界面上顯示出不一樣尺寸設備的程序運行狀況，是否有問題一目瞭然。

咱們打開 Main.storyboard ，而後選擇 View\Assistant Editor\Show Assistant Editor ，這時編輯區會分隔爲兩部分。再點擊頂部導航欄中的 Automatic ，在彈出菜單中選擇 Preview ，最後選擇 Main.storyboard (Preview) ：

如今在 Assistant Editor 區域會顯示一個4寸的界面：

咱們還能夠點擊預覽界面底部，名字（好比圖中的iPhone 4-inch）旁邊的地方讓屏幕翻轉爲橫屏：

這無疑是針對檢查不一樣尺寸設備的自適應狀況的一項重大改進，但還遠遠不止於此！點擊預覽界面左下角的 + 按鈕，會彈出當前storyboard文件支持的各類尺寸的設備，可供咱們預覽：

分別選擇iPhone 5.5-inch和iPad，此時咱們在預覽界面就能夠同時顯示三種尺寸的屏幕：

此時同窗們是否注意到4寸的橫屏顯示有點彆扭呢？沒錯，它的那朵元太大了，咱們能夠經過對image view添加其餘的約束條件來改善這個問題。

回到 Main.storyboard ，選擇image view，而後按住 Ctrl建和鼠標左鍵，拖動鼠標到View Controller的View上，鬆開鼠標後會彈出一個菜單，咱們選擇 Equal Heights ：

這時會出現一些紅色的約束提示，這是由於咱們剛纔加的這個約束條件與以前加過的約束條件有衝突。由於以前咱們添加過image view和TextContainer view之間的垂直間距（Vertical Margins）約束，因此image view的高度不可能等於它容器（View Controller的View）的高度。

讓咱們來修復該問題，首先在storyboard的結構目錄中選擇咱們剛纔添加的 Equal Heights 約束，而後選擇右側工具欄中的 Attribute Inspect 頁籤，若是 First Item 屬性不是 cloud.Height ，那麼在下拉菜單中選擇 Reverse First and Second Item 這一項讓 First Item 的值成爲 cloud.Height ：

接下來將 Relation 屬性的值設置爲 Less Than or Equal ，將 Multiplier 的值設置爲 0.4 ：

這一系列設置的做用是讓cloud這張圖片的高度要麼等於它自身的高度，要麼等於屏幕高度的40%，最後呈現的效果選擇這二者中較小的一個高度。

如今你應該注意到了在預覽面板中，4寸的橫屏顯示即時的對你剛纔的約束改動作出了響應：

你看看其餘尺寸的預覽自動更新了麼？答案那是必須的，因此說 Preview Assistant Editor 確實是一項重大改進，是程序員和設計人員的福音！

因爲本文的示例是一個天氣應用，因此光有天氣圖標不行，咱們還得加上城市和溫度才行。

本文首發地址：Swift自適應佈局（Adaptive Layout）教程（一）