參考資料：
Adaptive Layout Tutorial in iOS 9: Getting Started
iOS8 Size Classes初探 · sunnyxx的技術(shù)博客
Auto Layout 和 Constraints - iOS · 碎碎念 - SegmentFault
通過一個關(guān)于天氣的項(xiàng)目，你將學(xué)到通用故事板(Universal Storyboards),尺寸類別(Size Classes)，自定義布局和字體，預(yù)覽助手編輯器(Preview Assistant Editor)相關(guān)的知識。
項(xiàng)目效果圖：
01 通用故事板(Universal Storyboards)
1.什么是通用故事板？簡言之，能為ipad和iPhone所用的故事板。
2.為什么Main.Storyboard里的視圖控制器是正方形的？
將屏幕尺寸進(jìn)行抽象化，以適應(yīng)不同屏幕尺寸的設(shè)備。
02 自定義布局
1.在Storyboard里，分別拖一個Image View和一個View出來，并在View的Identity Inspector里將”TextContainer“填入Label位置。
--進(jìn)行Size設(shè)置。
--進(jìn)行Color設(shè)置。
2.布局約束設(shè)置。
在storyboard中有三種方式設(shè)置約束
--ctrl+drag（可以從一個控件拖動到另一個控件，設(shè)置它們之間的關(guān)系。也可以拖動到控件自身，設(shè)置寬度和高度）(我個人偏好使用這種方式）
--使用Stack，Pin，Align，Resolve工具
好處一：使得精確控制約束的constant或一次性添加多個約束更方便；
好處二：不需設(shè)置好view的位置，而只需要定好相對位置，添加約束，然后update frames，Auto Layout會自動計(jì)算出正確的位置
--讓Interface Builder自動添加約束
前提是確定view的位置不再更改。
回到項(xiàng)目中：
（1）給image view加三個約束。
--運(yùn)用Align Tool，快速對齊控件。
--運(yùn)用Pin Tool，給View定位。快速設(shè)置一個View相對于周邊View的位置或者它的寬高。
--Ctrl+drag設(shè)置image view和TextContainer之間的垂直間隔。
最后，三個constraints的添加完成。
(2)給TextContainer加約束。
--使用Pin Tool。這里不需要勾選constrain to margins。如果選中，會將父視圖的外邊距作為邊距的值來考慮。margin的默認(rèn)值是8，也就是說如果勾選，三個框里應(yīng)該填的是8.
（3）圖片填充image view：
（4）使用Resolve工具。
03 預(yù)覽助手編輯器
預(yù)覽助手編輯器能讓你更方便地查看view在不同尺寸設(shè)備，不同方向上的呈現(xiàn)情況。
1.選擇View-Assistant Editor-Show Assistant Editor-Automatic-Preview-Main.storyboard(Preview)
在左下角，選擇+按鈕，在彈出的窗口中選擇iPhone 5.5inch和iPad。
但是橫向時，cloud image顯得太大。
2.調(diào)整cloud image的大小。選中image view，ctrl+drag到view上，選擇Equal Heights。
解決這里constraints的沖突：選中新添加的constraint進(jìn)行修改，使得image view的高度等于view的高度或者小于等于view高度的40%
04?尺寸類別(Size Classes)
Size Classes簡介
1.Size Classes是什么？可以用來干什么?
它是對老式UI思路的全新抽象：把各個設(shè)備屏幕，以及它們屏幕旋轉(zhuǎn)的狀態(tài)都抽象成屏幕Size的變化,將這些Size歸納成幾個類別(Class)。
Size Class配合Auto Layout可以解決所有iOS設(shè)備屏幕尺寸及屏幕旋轉(zhuǎn)時候的UI適配問題 。
2.有幾種Size Classes？有幾種Size Classes組合？
共有兩種Size Classes：Regular和Compact。下表顯示的是Size Class在不同裝置的不同方向上的運(yùn)用情況：
有9種Size Classes組合。寬(Regular,Compact,Any),高(Regular,Compact,Any), 3 x 3,共9種組合。默認(rèn)是在寬任意，高任意模式下設(shè)置,且其他8種布局繼承它。
3.Size Classes怎么用？
首先，搭建基本布局。接下來，再根據(jù)不同Size Class的具體需求進(jìn)行自定義。
IB中某個View的出現(xiàn)與否，約束的出現(xiàn)與否，約束的值都是可以根據(jù)Size Classes單獨(dú)設(shè)置的。
比如，一個Image View，我只需要它出現(xiàn)在寬高緊縮(compact）的屏幕上（如Apple Watch)。Installed，表示“出現(xiàn)在屏幕上”。
項(xiàng)目練習(xí)
1.往TextContainer里添加內(nèi)容
--拖兩個Label出來，進(jìn)行字體，顏色，約束的設(shè)置。
對于城市這個label，字體設(shè)置為System-Thin-150，顏色為白色。對于溫度這個Label，字體設(shè)置為System-Thin-250，顏色為白色。
但是，此時的字體顯然太大了。
2.切換Size Class為Any Width|Compact Height模式
3.更改image view的約束
(1)刪除image view默認(rèn)類型的約束
--打開image view的Size Inspector，把Align Center X to：SuperView這個約束刪除。
雙擊這個約束進(jìn)去。如圖，這表示對于基本布局，約束是存在的，但是對于Any Width|Compact Height模式的布局，約束是不存在的。對剩下三個約束做同樣的刪除操作。
(2)為Any Width|Compact Height模式的image view添加約束
然后，ctrl drag image view到View 上，選擇Equal Widths，Multiplier為0.45
接下來，需要把label移到右邊。
4.更改TextContainer的約束。
(1)刪除默認(rèn)模式下的約束。Cmd +delete TextContainer.leader = leading
(2)添加約束。crtl drag TextContainer到View上。選擇Vertical Spacing to Top Layout Guide和Equal Widths（Multiplier設(shè)為0.5）
最后，update frames
05適配字體
注意：與overrride布局不同，override字體會影響到基本布局。
1.切換Size Class為Any Width|Any Height模式
2.打開城市l(wèi)abel的attributes inspector，點(diǎn)擊+號后，選擇Compact Width>Any Height。并修改字體。
溫度label同樣做法，只是Compact Width|Any Height的字體設(shè)置為150.
3.對兩個label的寬度加以限制。分別ctrl+drag label到TextContainer上，選擇Equal Widths。
4.對兩個label的Alignment和Autoshrink進(jìn)行修改。
最后項(xiàng)目完成！！！
Github項(xiàng)目地址：
