本文轉載自：爲iPhone6設計自適應佈局（二）
Size Classes
自適應佈局的佈局約束自然是好東西，但也不是萬能的，有時候我們也需要使用最基本的佈局，所以使用size classes將它們兩者結合起來才能碰撞出更有激情的火花。
引用我上篇譯文中的一段話：
Size Classes並不代表真正的尺寸，而是我們從感官上感覺尺寸的種類，通過這種種類的組合，表示出不同屏幕尺寸設備的橫屏及豎屏。
我們在給storyboard中的對象添加約束時可以選擇給某一個size class添加約束，所以在你選擇特定的size class時，只能看到你添加的只適用於該size class的約束。
這些特性能使我們有效的在不同的設備和屏幕方向中定義、設計不同的用戶界面。
Size Classes中的高和寬
Size Classes爲高和寬分別提供了三種類型：緊湊型（compact）、普通型（regular）、任意型（any）。用這三種高和寬的類型就可以組合出9種size class，來表示不同的設備屏幕。
在實際運用中，我們發現並不是所有的尺寸都能在Size Classes中找到明確的組合（比如沒有組合可以明確表示iPhone6 Plus的豎屏，iPad的橫豎屏也不好區分），但是我們可以使用表示這個尺寸範圍的組合。比如我們可以用Compact Width | Regular Height來表示iPhone6 Plus的豎屏。
接下來還是用一個活生生的示例來向大家介紹Size Classes。
我們的目標
這個示例是實現Instagram的一個詳細信息頁面，並讓它自適應更大的屏幕尺寸，在豎屏和橫屏中都展現出最合適的佈局。
我們的目標是讓佈局自適應iPhone6的屏幕（這裏需要注意一下，我所說的自適應是指圖片、文字信息的佈局排版，對於個人信息的頭像不會根據佈局的變化而變化），在豎屏中各個信息按照堆棧方式從上到下佈局，在橫屏時各元素按照大小進行有序排列，而不再是堆棧的方式：
給通用的size class添加約束
在這個示例中，我們不會像上個示例那樣使用模擬器的實際尺寸來設計佈局，我們使用Size Classes提供的抽象的屏幕尺寸，這裏我們先使用通用的尺寸來設計佈局，也就是w Any | h Any尺寸。我們要注意的是，在這個尺寸下添加的view或者約束必須是一些公用的，也就是說在任何尺寸，任何屏幕方向的情況下都適用的。
這些約束包括：
除了之前介紹過的頁邊間距約束、水平間距約束、等高等寬約束、方向比例約束外還有頂部、底部間距約束。
添加完上述的view和約束後，storyboard裏應該是這番景象：
這裏要注意一下，目前這個界面的佈局還有很多關鍵點需要考慮橫屏和豎屏的佈局，但是這些工作不會在w Any | h Any尺寸下進行。大夥接着往下看。
爲iPhone的豎屏添加布局約束
現在在Size Classes選擇器中選擇w Compact | h Regular尺寸，這個size class適用於所有iPhone設備的豎屏界面，不論尺寸是多少。
當你在Size Classes選擇器中選擇某一個size class後，storyboard
中的view controller會實時的反映出你改變後的尺寸大小。
現在你就可以爲iPhone的豎屏狀態重新設計view的位置和添加新的佈局約束了。下圖中說明了我在豎屏狀態下添加的約束：
我的storyboard中看起來是這樣的：
在這個階段，你可以在3.5、4、4.7、5.5這幾個尺寸的模擬器中編譯運行應用，在豎屏狀態下看看它們的運行情況，儘管在橫屏狀態表現的還很糟糕。
這裏要注意的是我們並沒有定義圖片的寬度，我們只是給圖片添加了相對父容器的左右邊間距，並將其值設爲了0。所以當屏幕尺寸增大的時候圖片的寬度在佈局約束的作用下也會增加，這時又因爲我們給圖片添加了高寬比例約束，所以圖片的高度也會隨之增加。
爲iPhone的橫屏添加布局約束
打開Size Classes選擇器，選擇w Any | h Compact，這個size class適用於任何一個尺寸的橫屏狀態。我們將在這個size class下設計我們希望在iPhone橫屏時顯示的用戶界面。
此時圖片的頂部、左側、底部都添加了相對於父容器的邊界約束。在顯示評論的label上添加了右側邊界約束。
當設備橫屏時，圖片在佈局約束的作用下移到了左側，個人信息label和評論label在約束的作用下被擠到了右側，並且評論label的高度增加，寬度減少。
現在來看看我的storyboard中顯示的內容。大家注意左側的對象結構樹中有很多個約束，但是有些是灰色的。那是因爲這些灰色的約束在當前的size class下是禁用的，或者說不適用、不起作用。那些是豎屏時用到的約束。
現在在storyboard中切換size class時佈局也會隨之變化，更新非常及時和平滑。
我們在模擬器中編譯運行應用，切換橫豎屏，可以看到佈局切換的效果，過度非常自然平滑。
爲了能讓大家看清楚佈局變化過度的細節，我放慢了這個git動畫。大家注意，在佈局變化時屏幕上的組件有一個層級關係，從該示例中我們可以看到圖片view的層級高於個人信息label和評論label。所以我們在設計佈局的時候就要考慮如何給view分層，包括在普通佈局中不會被覆蓋的view。這是一個細節問題。
屏幕預覽助手編輯器
Xcode6中另一個值得關注的功能是屏幕預覽助手。它可以避免你一遍遍的在不同屏幕尺寸的模擬器中編譯運行應用來檢查佈局的正確與否。你可以在屏幕預覽編輯器中添加一個或多個你想查看的屏幕尺寸，並可以讓他們呈現橫屏或豎屏的狀態。
當然它也不是非常完美（因爲在預覽時導航欄的顏色會丟失），但是切換Double Length Pseudolanguage選項很方便，便於你檢查問題。
從上圖中大家可以看到我在屏幕預覽編輯器中顯示了3.5寸屏幕的橫屏和4寸屏幕的豎屏，整體佈局沒有問題，但是當選擇Double Length Pseudolanguage使label中的文字都增加一倍時，問題就出現了，個人信息和評論的label長度沒有自適應。
爲iPad佈局添加約束
現在我們將Sizae Classes調整爲w Regular | h Regular，這個size class表示了iPad的橫屏和豎屏大小。
和往常一樣，我們先調整圖片和各個label的位置及大小，調整滿意後，再添加相關的約束。在iPad佈局中我打算將圖片的尺寸設置爲固定尺寸（不像iPhone中那樣隨着橫屏和豎屏改變圖片的尺寸），並將個人信息和評論label緊跟在圖片下面。
我的storyboard現在看起來是這樣的：
以往，我們都是在特定的size class中添加相關的約束，但在iPad佈局中，我們不僅僅只添加一些約束。
因爲在iPad佈局中有很大的空餘空間，所以我們不只是重新排列一下組件的位置和大小，我們還要添加一些其他的組件。在這個示例中，我們再添加兩個圖片view（分別表示當前顯示圖片的上一張圖片和下一張圖片）。
再來看看我的storyboard：
我們不需要對這兩個圖片手動的設置高寬，而是給它們設置對於主顯示圖片的相對高寬即可。
這樣做的好處是當主顯示圖片的尺寸更改時，我們不需要自己手動計算和更改這兩個圖片的尺寸，相對高寬會自動針對主顯示圖片的尺寸調整這兩個圖片的尺寸。
我沒有製作在iPad上運行的gif動畫，但這裏有iPad橫屏豎屏的運行圖片，大家可以看看：
使用佈局視圖和間距視圖
目前Xcode提供的佈局約束可以滿足大部分的佈局需求，但是有些場景下需要變通的使用約束才能達到我們想要的效果。
佈局視圖示例
通過Xcode提供的約束，我們可以很容易設置組件與view controller view的邊緣的間距，也可以很容易的讓組件在view controller view中水平居中顯示和垂直居中顯示。但是卻不太容易設置組件與view controller view的水平中線或垂直中線的間距。像這樣：
下面向大家介紹兩種實現該需求的方法。首先我們先添加一個view，背景色設置爲透明，讓它在屏幕中垂直居中顯示，它作爲該需求中組件的父容器，因爲父容器在屏幕中是垂直居中的，所以可以給組件添加相對於父容器的Center X約束，就可以達到我們的需求了：
但是通過上述的方式未免會使我們的佈局的層級關係太過複雜，我更希望佈局比較扁平一些，不需要太多的層級關係。因爲上述方法中的容器view主要是用於佈局使用，所以這種view我稱之爲佈局視圖。
我們來改進一下方法，首先也是在view controller view中添加一個佈局視圖，我習慣將高度設置爲20（這個值隨個人喜好或實際情況而定），然後將它和屏幕的頂部、左側、右側的間距設爲0，這樣的話這個佈局視圖就和狀態欄重合了，我們將這個佈局視圖設置一個深一點的顏色，然後將它的hidden屬性設置爲true，這樣佈局視圖的顏色就會變淺，也不太會影響我們的佈局，而且在應用運行時是不會顯示該視圖的。現在我們的組件就可以設置相對於佈局視圖的Center
X約束來實現我們的需求了。
間隔視圖示例
之前我們學習瞭如何使用約束設置視圖和視圖邊緣的間距，並且當屏幕尺寸增加時視圖也會相應的改變大小，但它們的間距不會改變。
但是如果我們希望當屏幕增加尺寸時，視圖的大小保持不變，只是增加間距呢？
從理論上講，實現該需求可能可以使用類似等寬這樣的約束，但是現實往往的是骨幹感的。
這時我們就需要間距視圖出場了，和佈局視圖一樣，間距視圖可以設置一個深一點的顏色，hidden屬性要設置爲true。
我們在每個視圖與視圖間距之間添加一個間距視圖，設置每個視圖與相鄰間距視圖的邊緣間距約束，然後給所有的間距視圖添加相對於view controller view的等寬約束，設置合適的比例即可。
原文地址：ADAPTIVE LAYOUTS FOR iPHONE 6