原文：http://www.raywenderlich.com/113768/adaptive-layout-tutorial-in-ios-9-getting-started譯者：@featherJ
【轉(zhuǎn)載請(qǐng)寫(xiě)明出處，多謝！】
更新日期：2015/9/22：教程為iOS 9, Xcode 7 以及 Swift 2由Sam Davies更新。
自適應(yīng)布局的介紹引發(fā)了ios開(kāi)發(fā)者們的一個(gè)巨大的轉(zhuǎn)變。現(xiàn)在，當(dāng)你設(shè)計(jì)你的app的時(shí)候，你已經(jīng)可以使用一個(gè)單獨(dú)布局并且不添加任何設(shè)備適配的代碼，使你的應(yīng)用工作到所有的iOS設(shè)備上了！
這一片教程將為你介紹自適應(yīng)布局。你將會(huì)學(xué)習(xí)到關(guān)于通用的storyboards，size classes，布局(layout)以及字體(font)自定義以及超有用的預(yù)覽助手編輯器(Preview Assistant Editor)。
在本教程中，你將從頭開(kāi)始創(chuàng)建一個(gè)簡(jiǎn)單的天氣應(yīng)用的用戶界面。如果你并不是特別熱衷于自動(dòng)布局也別擔(dān)心，教程的第一部分將提供一步一步的講解讓你通過(guò)自動(dòng)布局來(lái)創(chuàng)建一個(gè)用戶界面。你將會(huì)驚奇的發(fā)現(xiàn)你可以不用寫(xiě)一行代碼就完成這個(gè)界面。
通用的Storyboard
通用的Storyboard是你開(kāi)始Adaptive Layout (自適應(yīng)布局)?之旅的第一步。一個(gè)相同的Storyboard可以同時(shí)被用于iPad和iPhone設(shè)備。你并不需要為每一個(gè)設(shè)備存留一份Storyboard。
打開(kāi)Xcode并且選擇Create a new Xcode project，來(lái)創(chuàng)建一個(gè)新的Xcode項(xiàng)目：
選擇 iOS -> Application -> Single View Application，然后點(diǎn)擊下一步：
設(shè)置?Product Name(項(xiàng)目名)?為 AdaptiveWeather，Language(語(yǔ)言)?設(shè)置為Swift，同時(shí)設(shè)置Devices(設(shè)備) 為Universal(通用)：
當(dāng)項(xiàng)目開(kāi)啟之后，查看?Project Navigator(項(xiàng)目導(dǎo)航)?你講會(huì)看到這個(gè)單獨(dú)的storyboard文件：
Main.storyboard是一個(gè)為所有設(shè)備準(zhǔn)備的單獨(dú)的文件。打開(kāi)這個(gè)storyboard，你將會(huì)看到他包含一個(gè)單獨(dú)的?view controller(視圖控制器)，但是他的尺寸可能有些古怪：
好吧，他現(xiàn)在是個(gè)正方形！如果 Storyboard 在 Xcode 的編輯過(guò)程中匹配到某個(gè)目標(biāo)設(shè)備的屏幕尺寸那就顯然不太符合“一個(gè)Storyboard作用所有設(shè)備”的原則了，所以現(xiàn)在Storyboard是用一個(gè)抽象的尺寸替代的。
選擇storyboard文件，打開(kāi)File Inspector(文件檢查器) ，你將可以看到use Size Classes的選項(xiàng)，在你的項(xiàng)目中，勾上它：
這個(gè)選項(xiàng)默認(rèn)為所有新的iOS工程勾選。你可以在將舊項(xiàng)目升級(jí)到新項(xiàng)目的過(guò)程中手動(dòng)激活這個(gè)勾選。
構(gòu)建你的Storyboard
下面開(kāi)始這個(gè)小節(jié)，打開(kāi)Main.storyboard文件，從Object Library中拖出一個(gè)Image
View到你的view controller(視圖控制器)畫(huà)布中。在 Size Inspector
(尺寸檢查器)中設(shè)置X的值為150，Y的值為20。同時(shí)設(shè)置Width(寬度)為300，Height(高度)為265。
下一步，從Object Library中拖出一個(gè)View放到Image View的下面。在 Size Inspector (尺寸檢查器)中設(shè)置X為150，Y為315，同時(shí)設(shè)置Width(寬度)為300，Height(高度)為265。
選擇你剛剛添加的View，打開(kāi)Identity Inspector(身份檢查器)，編輯Document下的Label的內(nèi)容為T(mén)extContainer:
因?yàn)閯倓偼铣鰜?lái)的View和View
Controller(視圖控制器)的背景色默認(rèn)都為白色，所以可能不太容易找到這個(gè)View。下面我們修改一下他們的背景色。選擇View
Controller控件，打開(kāi)Attributes Inspector(屬性查看器)設(shè)置Background(背景色)為#4AABF7。
（其實(shí)隨便一個(gè)顏色就好，因?yàn)閄code的顏色選擇器沒(méi)沒(méi)法設(shè)置16進(jìn)制顏色值）。
下一步選擇選擇TextContainer，設(shè)置它的Background(背景色)為#3780BA。
接下來(lái)你的視圖控制器看上去將是下面截圖的樣紙：
Image View和TextContainer這兩個(gè)控件是view controller的子項(xiàng)，下面我們將為他們?cè)O(shè)置布局約束。
添加布局約束
選擇Image View并且點(diǎn)擊在下方自動(dòng)布局欄中的Align按鈕，勾選中Horizontal Center in Container(容器中的水平中心)，設(shè)置值為0，然后點(diǎn)擊Add 1 Constraint(添加一個(gè)約束)。
接下來(lái)，點(diǎn)擊Pin按鈕，添加一個(gè)頂部距離最近控件的距離為0的約束，如下圖：
你添加的這些約束將使得Image View有一個(gè)距離頂部和距離水平中心的固定距離。現(xiàn)在我們將設(shè)置 Image
View 和 TextContainer 之間的間距。在 Image
View上按住Control鍵并拖拽至TextContainer然后釋放鼠標(biāo)，如下圖：
接下來(lái)將顯示一個(gè)約束內(nèi)容的菜單，選擇Vertical Spacing(垂直間距):
這個(gè)約束用于決定從 Image View 控件的底部到TextContainer控件的頂部的距離。
選擇你的 Image View 然后打開(kāi) Size Inspector(尺寸檢查器) 你會(huì)看到如下：
你會(huì)看到你已經(jīng)添加了三個(gè)約束到布局上了，你可以在Size
Inspector(尺寸檢查器)內(nèi)簡(jiǎn)單的配置內(nèi)一個(gè)約束的參數(shù)。在Bottom Space To:
TextContainer約束上，點(diǎn)擊Edit(編輯)按鈕，將會(huì)彈出一個(gè)配置約束屬性的對(duì)話框，設(shè)置Constant的值為20：
然后點(diǎn)擊對(duì)話框外部，關(guān)閉這個(gè)對(duì)話框。
現(xiàn)在已經(jīng)將Image View和TextContainer之間的間隔設(shè)置為了20點(diǎn)?，F(xiàn)在你還需要設(shè)置TextContainer另外三個(gè)邊的約束。
選擇TextContainer然后點(diǎn)擊底部欄的Pin圖標(biāo)，在Spacing to nearest
neighbor(約束到最近部件)部分，設(shè)置left，right和bottom的間隔為0。保持Constrain to
margins(約束到邊緣)復(fù)選框?yàn)槲催x中狀態(tài)，如果勾選這個(gè)復(fù)選框，將會(huì)移除掉視圖的外邊距。
作為參考，這個(gè)對(duì)話框應(yīng)該是如下的樣紙：
點(diǎn)擊Add 3 constraints(添加3個(gè)約束)按鈕將這些新的約束添加到TextContainer上。這樣便設(shè)置好了TextContainer距離容器的左右下邊距的約束。
接下來(lái)你的storyboard看上去應(yīng)該是如同下面截圖的樣紙：
你應(yīng)該已經(jīng)注意到了在你的視圖上有一些橘黃色的和一些紅色的約束。這表示你的約束存在一些問(wèn)題需要你注意一下。你可以通過(guò)storyboard的自動(dòng)更新到frames的功能來(lái)調(diào)整這些約束，但是如果你現(xiàn)在這么做，Image View的尺寸將收縮為0。
這是因?yàn)楝F(xiàn)在這個(gè)Image View內(nèi)部還沒(méi)有任何內(nèi)容，這意味著他的內(nèi)部高度和寬度都為0。如果沒(méi)有物理寬高的約束，自動(dòng)布局是會(huì)依賴于部件的內(nèi)部尺寸來(lái)決定他的寬度和高度的。
接下來(lái)，在Project Navigator(項(xiàng)目導(dǎo)航)中打開(kāi)Images.xcassets文件。下載cloud_images.zip文件并解壓，你將會(huì)發(fā)現(xiàn)里面有三個(gè)圖片。 在Finder中選擇這個(gè)三個(gè)圖片，并且拖拽他們到空的資源目錄中：
他們將創(chuàng)建一個(gè)新的圖像集，并且已經(jīng)分配好了這三個(gè)圖像：
現(xiàn)在你可以應(yīng)用你的圖像集到Image View了，返回Main.storyboard 文件并選擇Image
View。切換到Attributes Inspector(屬性查看器)，在Image輸入框中輸入cloud然后選擇View -> Mode
為Aspect Fit (這幾個(gè)選項(xiàng)試一下就知道大概是做什么的) 如下圖：
接下來(lái)你的storyboard將看上去如下圖這樣：
但是目前仍有一些橘紅色的約束，我們還有很多的事情要去做。 首先，在Document Outline(文檔大綱中)選擇View Controller的View：
然后點(diǎn)擊在底欄中選擇 Resolve Auto Layout Issues 圖標(biāo)按鈕。然后在彈出的對(duì)話框中選擇All Views -> Update Frames：
然后 View Controller 內(nèi)的空間將會(huì)自動(dòng)重新排列，以解決之前不太符合的約束。接下來(lái)你看到的storyboard將會(huì)是如下的樣紙：
預(yù)覽助手編輯器
通常你需要構(gòu)建并在 iPad, iPhone 4s, 5s, 6 和 6
Plus設(shè)備上運(yùn)行你的項(xiàng)目，并在每一個(gè)旋轉(zhuǎn)方向上檢查，以保證這個(gè)新的通用storyboard。這個(gè)過(guò)程是很麻煩的，但是Xcode6提供了一個(gè)更好
的選擇即新的Preview Assistant Editor(預(yù)覽助手編輯器)。
打開(kāi)Main.storyboard文件，然后點(diǎn)擊View -> Assistant Editor
-> Show Assistant Editor。這將編輯區(qū)分成兩部分。在Jump
Bar中點(diǎn)擊Automatic，然后在彈出的下拉菜單中選擇Preview，然后選擇Main.storyboard。
然后新的預(yù)覽編輯器將呈現(xiàn)出一個(gè)storyboard在4英寸iPhone的屏幕的效果。如下：
通過(guò)點(diǎn)擊預(yù)覽框底部的 rotation icon(旋轉(zhuǎn)圖標(biāo))可以旋轉(zhuǎn)預(yù)覽效果?，F(xiàn)在預(yù)覽效果將旋轉(zhuǎn)為橫向：
這是一個(gè)模擬多設(shè)備的巨大的改進(jìn)，但是，還有更多！點(diǎn)擊預(yù)覽編輯器左下角的+按鈕將可以得到更多的可用預(yù)覽：
在列表中選擇5.5英寸的iPhone和iPad，以將他們添加到預(yù)覽區(qū)中一起顯示：
注意到在橫向的iPhone中有什么奇怪的效果了么？是的，云圖片實(shí)在太大了！為了修復(fù)這個(gè)問(wèn)題，我們將為Image View加入一個(gè)新的約束。
返回storyboard，在Image View上按下Control并拖拽到View Controller的View中釋放鼠標(biāo)來(lái)創(chuàng)建一個(gè)新的約束，在彈出的菜單中選擇Equal Heights(等高)：
現(xiàn)在在storyboard中又出現(xiàn)了紅色的約束。這是因?yàn)槟銊倓偺砑拥募s束與現(xiàn)有的約束發(fā)生了沖突，當(dāng)View Controller的View保持垂直方向的時(shí)候，不可能有相同的高度。
在 Document Outline (文檔大綱) 中選擇剛剛添加的約束，然后打開(kāi)Attributes
Inspector (屬性檢查器)。如果第一項(xiàng)并沒(méi)有被設(shè)置為cloud_small.Height，那么選擇第一項(xiàng)的下拉菜單中的Reverse
First and Second Item選項(xiàng)。
然后，設(shè)置Relation為 Less Than or Equal，設(shè)置 Multiplier (乘數(shù)) 為0.40。如下圖：
這意味著，云的圖片將在是原始尺寸，或者當(dāng)高度低于屏幕的40%的時(shí)候變小。
你會(huì)發(fā)現(xiàn)預(yù)覽面板的效果會(huì)在你更新約束的時(shí)候自動(dòng)刷新。效果如下：
那么此時(shí)是否可以讓多個(gè)設(shè)備的預(yù)覽效果同時(shí)自動(dòng)更新呢？答案是肯定的，新的Preview Assistant Editor (預(yù)覽助手編輯器)真的很有用！
要把現(xiàn)在的效果做成一個(gè)天氣的app，你還需要添加一些標(biāo)簽，用于顯示城市名和當(dāng)前的溫度。
為T(mén)extContainer添加內(nèi)容
打開(kāi)Main.storyboard文件，從Object Library中拖兩個(gè)Label(文本標(biāo)簽)到TextContainer視圖中，然后把他們排列成如下的樣紙：
選擇上面的一個(gè)標(biāo)簽然后通過(guò)Align和Pin菜單設(shè)置它的水平位置到中心，然后再添加一個(gè) top spacing to nearest neighbor為10的約束，如下圖所示：
下一步，選擇 Attributes Inspector(屬性檢查器)，設(shè)置Text (文本)為Cupertino，Color(顏色)為White(白色)，然后設(shè)置font(字體)為System, Thin同時(shí)Size為150。
現(xiàn)在你可能會(huì)發(fā)現(xiàn)文字變得無(wú)法辨認(rèn)，這是因?yàn)長(zhǎng)abel的框架的緣故，我們很快就可以解決這個(gè)問(wèn)題了。
現(xiàn)在選擇另一個(gè)Label，同時(shí)依舊通過(guò)Align和Pin菜單設(shè)置它的水平位置到中心，然后設(shè)置bottom space to nearest neighbor為10，檢查Size Inspector(尺寸檢查器)，是否和下圖一致：
通過(guò)Attributes Inspector(屬性檢查器)，設(shè)置Text為28C，然后設(shè)置Color為White，字體為System, Thin并且字號(hào)為250。
現(xiàn)在你可以解決剛才我們提到的由于標(biāo)簽的框架導(dǎo)致的問(wèn)題了。選擇View Controller 的
view，點(diǎn)擊storyboard底欄的Resolve Auto Layout Issues按鈕，然后選擇All Views ->
Update Frames。然后你將會(huì)看到storyboard更新為如下圖：
現(xiàn)在你發(fā)現(xiàn)兩個(gè)Label發(fā)生了重疊，看上去并不是我們所期待的樣子。但是，在我們修復(fù)任何問(wèn)題之前，可以發(fā)現(xiàn)在預(yù)覽區(qū)中iPad版本看上去是好的：
可以預(yù)見(jiàn)的，iPhone的字號(hào)太大了：
我們將在下一個(gè)章節(jié)中修復(fù)這個(gè)尺寸的問(wèn)題。
Size Classes
通用的storyboard是很給力的，但是已經(jīng)發(fā)現(xiàn)為所有的設(shè)備創(chuàng)建一個(gè)通用的布局已經(jīng)有些挑戰(zhàn)性了。然而，Adaptive Layout (自適應(yīng)布局)有更多的工具可以用來(lái)解決這些問(wèn)題。
自適應(yīng)布局的核心概念之一便是size classes。Size Class是一個(gè)可以應(yīng)用于任何能夠在橫向或縱向進(jìn)行顯示的視圖或者視圖控制器的屬性。
Xcode提供了兩種Size Classe：Regular(正常的)和Compact(緊湊)。盡管他們與視圖的物理尺寸是有關(guān)聯(lián)的，但是他們?nèi)匀豢梢杂靡环N語(yǔ)義上的尺寸呈現(xiàn)出來(lái)。
下面這個(gè)表格列出了size classe可以應(yīng)用的不同的設(shè)備和方向：
這些都是設(shè)備可以應(yīng)用的size classe。當(dāng)然，你也可以在視圖結(jié)構(gòu)中的任意一部分中重寫(xiě)size classe。這在比屏幕要小的容器中是相當(dāng)有用的。
Size Classes 和你
這對(duì)你和你所設(shè)計(jì)的app到底意味著什么呢？盡管你的app是有size class的，但是你構(gòu)建的布局和size class是無(wú)關(guān)的，也就是說(shuō)，你的布局需要為所有的size class進(jìn)行調(diào)整。
在涉及到自適應(yīng)布局的設(shè)計(jì)的時(shí)候，這是很重要的一點(diǎn)。首先你需要?jiǎng)?chuàng)建一個(gè)基本的布局，然后在為每一個(gè)特殊的size
class去調(diào)整你需要的size class。這里，不是要把每一個(gè)size
class視為一個(gè)全新的東西去從頭設(shè)計(jì)。你可以把一個(gè)自適應(yīng)布局，想象成是一個(gè)樹(shù)狀的層次結(jié)構(gòu)，在這個(gè)層次中，你可以把所有通用的設(shè)計(jì)放在父級(jí)節(jié)點(diǎn)中，
然后把需要單獨(dú)處理的部分放到子級(jí)的size class中。
目前為止，我們幾乎還沒(méi)有提到具體的設(shè)備布局適配問(wèn)題。這是因?yàn)樵谧赃m應(yīng)布局的核心概念中，size class是抽象于具體設(shè)備的。意思是說(shuō)，一個(gè)支持自適應(yīng)布局的視圖，可以在一個(gè)完整的屏幕中顯示，也可以被包含與另一個(gè)視圖控制器中顯示。
這樣做也是有益于蘋(píng)果的，這樣即使設(shè)備的屏幕范圍擴(kuò)大了，也不需要迫使程序的開(kāi)發(fā)者或者設(shè)計(jì)人員從新設(shè)計(jì)他們的app。
現(xiàn)在我們將使用size class來(lái)iPhone平放時(shí)候的布局，已解決目前的用戶界面看起來(lái)不好看的問(wèn)題。
使用Class Sizes
點(diǎn)擊底欄的w Any h Any按鈕，你將看見(jiàn)size class的選擇器彈出：
在這里你可以通過(guò)選擇表格單元的形式來(lái)選擇用哪種size class來(lái)呈現(xiàn)。一共有九個(gè)可能的選項(xiàng)：你有三個(gè)縱向的選擇和三中水平選擇(any(任意)，regular(正常)，compact(緊湊))，那么總共有九種size class可供選擇。
注意：這里在命名上有些輕微的差異。Size class
通常是和horizontal(水平)與vertical(垂直)聯(lián)系起來(lái)的。但是，在這里卻用了width和height，在這里width 等同于
horizontal，而height 等同于 vertical。
我們現(xiàn)在的布局還不能很好的工作于compact(緊湊)的高上。為了解決這個(gè)問(wèn)題，我們將選擇 Any(任何)Width | Compact(緊湊) Height的size class：
于是你將立刻發(fā)現(xiàn)在編輯器中的兩個(gè)變化：
畫(huà)布的形狀變成了一個(gè)新的size class。
底欄變成了藍(lán)色。這表示，你現(xiàn)在正在工作于一個(gè)特定的size class布局上。
為了改變布局，我們需要暫時(shí)的改變一些約束。在自適應(yīng)布局中有這樣兩個(gè)術(shù)語(yǔ)installing(安裝)和uninstalling(卸載)。一個(gè)約束被安裝表示它處于激活狀態(tài)了，反之，如果約束被卸載則表示它在當(dāng)前的size class中不在起作用。
然后我們通過(guò)點(diǎn)擊的方式選擇Image View，打開(kāi)Size Inspector(尺寸檢查器)。你可以看到指定視圖的所有約束：
通過(guò)單擊的方式選擇Align Center X to: Superview約束，然后按Delete鍵從當(dāng)前的size class中卸載這個(gè)約束。這個(gè)約束邊立即從當(dāng)前的欄中消失了，同時(shí)在Document Outline(文檔大綱)中變?yōu)榱嘶疑?/p>
注意：你可以在Size Inspector(尺寸檢查器)中This Size Class選項(xiàng)切換為All來(lái)查看已經(jīng)被卸載的約束。
在Size Inspector(尺寸檢查器)中雙擊被卸載的約束，你可以看到在末尾顯示的這部分：
這表示這個(gè)約束在基本布局中是被安裝的，但是在Any Width | Compact Height布局中是沒(méi)有被安裝的。
接下來(lái)我們用同樣的方式卸載掉image view上的其他三個(gè)約束。然后你的document outline(文檔大綱) 和image view的Size Inspector(尺寸檢查器)將會(huì)是如下的樣紙：
現(xiàn)在我們將為當(dāng)前的size class添加需要的約束。通過(guò)Align和Pin菜單來(lái)添加Vertically in the Container約束以及設(shè)置 left spacing to nearest neighbor為10：
通過(guò) Control-拖拽 的方式從 image view拖到view controller的view中然后在彈出的菜單中選擇Equal Widths。
打開(kāi)image view的Size Inspector(尺寸檢查器)然后雙擊 Equal Width to:
Superview約束。如果First Item 不是cloud_small.Width，你需要點(diǎn)擊下拉菜單中的Reverse First
and Second Item。然后設(shè)置Multiplier為0.45。
現(xiàn)在，在image view 中已經(jīng)為當(dāng)前的size class設(shè)置好了約束，但是text container還是有問(wèn)題的?，F(xiàn)在我們需要通過(guò)約束的方式在使得在當(dāng)前size class中文字部分變成居右。
現(xiàn)在TextContainer內(nèi)部針對(duì)標(biāo)簽的約束看起來(lái)還是可以接受的。為了使得TextContainer居右，我們先要卸載掉居左的約束。
在Document outline(文檔大綱)中選擇居左的約束，標(biāo)簽為T(mén)extContainer.leader = leading：
然后通過(guò)Cmd-Delete的組合鍵來(lái)卸載掉這個(gè)約束。
現(xiàn)在我們需要添加兩個(gè)新的約束到TextContainer，來(lái)使得他的位置保持正確。
下面我們可以直接在Document outline(文檔大綱)中通過(guò) Control-拖拽 的方式從TextContainer拖到view controller的View中：
然后通過(guò) Shift-點(diǎn)擊 的方式加選 Top Space to Top Layout Guide和 Equal Widths。然后點(diǎn)擊Add Constraints(添加約束)來(lái)創(chuàng)建新的約束：
打開(kāi) TextContainer 的Size Inspector(尺寸檢查器) 然后更新我們剛剛創(chuàng)建的兩個(gè)約束為如下：
Top Space to: Top Layout Guide 的 Constant值設(shè)置為0。
Equal Width to: Superview 的 Multiplier 值設(shè)置為 0.5。 注意這里你可能需要翻轉(zhuǎn)第一項(xiàng)和第二項(xiàng)，如果已經(jīng)是正確的則不需要再次翻轉(zhuǎn)。 通過(guò)雙擊的方式來(lái)進(jìn)入這個(gè)約束進(jìn)行設(shè)置即可。
點(diǎn)擊底部的 Resolve Auto Layout Issues? 圖標(biāo)，然后選擇 All Views -> Update frames。接下來(lái)storyboard將更新成新布局的效果如下：
于是乎，我們的布局就修改完成啦，現(xiàn)在距離成品已經(jīng)近在咫尺了。但是仍有一些字號(hào)問(wèn)題需要解決，我們將在下一個(gè)章節(jié)中繼續(xù)講解。
適配字體
現(xiàn)在TextContainer中的字號(hào)在iPad設(shè)備上看上去還好，但是在compact(緊湊)的size class中就顯得太大了。現(xiàn)在我們需要在size class中來(lái)重寫(xiě)字號(hào)。
注意：不想布局的重寫(xiě)，對(duì)于字體的配置將會(huì)影響到基本布局。對(duì)于字體的配置并不遵從當(dāng)前的size class重寫(xiě)原則。我們需要用下面的方法來(lái)實(shí)現(xiàn)。
點(diǎn)擊底部的size class按鈕，然后通過(guò)表格選擇當(dāng)前的size class為基本的Any Width | Any Height。然后你的size class 變成為了之前我們創(chuàng)建的基本布局。
現(xiàn)在選擇Cupertino字樣的標(biāo)簽然后打開(kāi)Attributes Inspector(屬性檢查器)。點(diǎn)擊Font左側(cè)的+號(hào)按鈕：
在彈出的菜單中選擇對(duì)應(yīng)的size class 來(lái)重寫(xiě)字號(hào)。 選擇Compact Width -> Any Height：
這個(gè)操作會(huì)創(chuàng)建第二個(gè)字體選擇器，用于應(yīng)用特殊的size class?，F(xiàn)在更新新的選擇器中的字號(hào)為90：
現(xiàn)在我們用同樣的方式來(lái)更新溫度的Label，這次設(shè)置Compact Width > Any Height的字號(hào)為150。
接下來(lái)在預(yù)覽區(qū)中自動(dòng)更新的效果如下：
現(xiàn)在，看上去似乎好了一些，但是Cupertino標(biāo)簽還是被裁減了。反復(fù)調(diào)整字號(hào)到適合的大小明顯不是一個(gè)明智之
舉。Cupertino稍微有點(diǎn)長(zhǎng)了，但是Washington, D.C.會(huì)更長(zhǎng)，Kleinfeltersville,
PA會(huì)更加的長(zhǎng)！那么我們應(yīng)該如何做呢？
我們又一次需要用自動(dòng)布局來(lái)解決這個(gè)問(wèn)題了。我們只需要簡(jiǎn)單的設(shè)置這兩個(gè)文本標(biāo)簽的寬度與TextContainer相匹配就可以了。用 Control-過(guò)拽 的方式從Cupertino標(biāo)簽拖拽到TextContainer，然后選擇Equal Widths。
同樣對(duì)溫度標(biāo)簽也這樣做。于是顯示的效果如下：
嗯，文本的截?cái)嗖⒉皇俏覀兤谕?。這是當(dāng)文本比容器長(zhǎng)時(shí)候的默認(rèn)填充方式?，F(xiàn)在我們需要一個(gè)方式來(lái)動(dòng)態(tài)的調(diào)整字號(hào)到容器的尺寸。
選擇Cupertino標(biāo)簽，然后打開(kāi)Attributes Inspector(屬性檢查器)。改變
AutoShrink 為 Minimum font scale 然后設(shè)置值為0.5。與此同時(shí)，我們?cè)O(shè)置Text
Alignment為Centered。就像下面的樣子：
我們對(duì)溫度標(biāo)簽也做同樣的處理。
現(xiàn)在再來(lái)看預(yù)覽區(qū)，iPhone的布局看上去就非常好了：
在預(yù)覽區(qū)中看上去還不錯(cuò)，但是我們可能還是可以花一些時(shí)間去看看是否每一樣?xùn)|西都是正常工作的。iPhone的屏幕看上去像是正確的樣子：
恭喜，你已經(jīng)學(xué)到了一些基本的自適應(yīng)布局的知識(shí)了。
