Chapter 1 構(gòu)建自適應(yīng)用戶界面
@(Intermediate iOS 10 Programming with Swift)
起初，蘋(píng)果發(fā)布的初代iPhone手機(jī)是固定3.5英寸屏幕，我們很容易為它開(kāi)發(fā)應(yīng)用程序屁置，只需要考慮兩個(gè)不同的方向（垂直或水平）就可以疗疟。后來(lái)蘋(píng)果公司發(fā)布了一款9.7英寸的iPad劲妙，如果你在當(dāng)時(shí)就是一位應(yīng)用程序開(kāi)發(fā)者，就必須要在Xcode中創(chuàng)建兩個(gè)不同的UI設(shè)計(jì)——一個(gè)適用于iPhone村缸，而另一個(gè)則適用于iPad纷捞。
時(shí)光荏苒痢虹，到了2015年，蘋(píng)果的iPhone和iPad產(chǎn)品已經(jīng)發(fā)生了巨大的變化主儡。隨著iPhone6和iPhone6 Plus（現(xiàn)在的iPhone 7和7 Plus）推出奖唯，我們的應(yīng)程序需要支持各種屏幕尺寸和分辨率的iOS設(shè)備。它包括：
- iPhone 4/4s (3.5-inch)
- iPhone 5/5c/5s (4-inch)
- iPhone 6/6s/7 (4.7-inch)
- iPhone 6/6s/7 Plus (5.5-inch)
- iPad / iPad 2 / iPad Air / iPad Air 2 (9.7-inch)
- iPad Mini / iPad Mini 2 / iPad Mini 3 / iPad Mini 4 (7.9-inch)
- iPad Pro (9.7/12.9-inch)
對(duì)于iOS開(kāi)發(fā)人員來(lái)說(shuō)糜值，創(chuàng)建一個(gè)通用的應(yīng)用程序丰捷，是一個(gè)非常大的挑戰(zhàn)，我們需要適應(yīng)所有上面列出來(lái)的屏幕尺寸和方向的喲寂汇，唉病往，那么你可以如何來(lái)設(shè)計(jì)這種像素級(jí)的完美的應(yīng)用程序UI呢？
從iOS 8開(kāi)始骄瓣，移動(dòng)操作系統(tǒng)提供了一個(gè)稱之為Adaptive User Interface（自適應(yīng)用戶界面）的概念停巷，這是蘋(píng)果支持iOS設(shè)備的任何尺寸和任何方向的解決方案。現(xiàn)在榕栏，應(yīng)程序可以對(duì)用戶界面的調(diào)整細(xì)節(jié)到特定設(shè)備甚至是特定的方向上畔勤。
這導(dǎo)致了一種稱為自適應(yīng)布局的新的UI設(shè)計(jì)概念，從Xcode 7開(kāi)始扒磁，開(kāi)發(fā)工具允許開(kāi)發(fā)人員使用Interface Builder構(gòu)建適應(yīng)所有不同設(shè)備屏幕尺寸和方向的應(yīng)用程序UI庆揪，在Xcode 8中Interface Builder進(jìn)一步重新設(shè)計(jì)，以便于我們簡(jiǎn)化自適應(yīng)用戶界面的制作妨托。我們甚至可以實(shí)時(shí)預(yù)覽任何的iOS設(shè)備上呈現(xiàn)的UI設(shè)計(jì)效果缸榛。
要實(shí)現(xiàn)自適應(yīng)布局，我們需要使用一個(gè)名為Size Classes的概念兰伤。這在iOS 8或更高的版本中可用内颗，它也可能是實(shí)現(xiàn)自適應(yīng)布局最重要的一個(gè)方面。Size Classes是根據(jù)屏幕的尺寸和方向?qū)υO(shè)備進(jìn)行分類的抽象医清。你可以同時(shí)使用Size Classes和自動(dòng)布局（Auto Layout）來(lái)設(shè)計(jì)自適應(yīng)用戶界面起暮。在iOS8/9/10中創(chuàng)建自適應(yīng)布局的過(guò)程如下：
- 你首先要設(shè)計(jì)一個(gè)通用的布局，這個(gè)通用布局足以支持大多數(shù)屏幕尺寸和方向会烙。
- 你選擇一個(gè)特定的size class并提供你的布局特性负懦。例如，當(dāng)設(shè)備處于橫向的時(shí)候柏腻，你希望增加兩個(gè)Label之間的距離纸厉。
在本章中，我們將通過(guò)構(gòu)建通用應(yīng)用程序引導(dǎo)大家了解所有自適應(yīng)的概念五嫂，比如Size Classes類颗品。該應(yīng)用程序支持所有目前可用的屏幕尺寸和方向肯尺。
Adaptive UI demo
這個(gè)項(xiàng)目我們不需要編寫(xiě)代碼，你將主要使用故事板布局用戶界面組件躯枢，了解如何使用自動(dòng)布局和size Classes讓UI自適應(yīng)则吟。經(jīng)過(guò)本章之后，你將擁有一個(gè)適用于多個(gè)屏幕尺寸和方向的單個(gè)視圖控制器的應(yīng)用程序锄蹂。
Creating the Xcode Project
首先啟動(dòng)Xcode氓仲，并使用Single View Application模板創(chuàng)建一個(gè)新的項(xiàng)目，在項(xiàng)目選項(xiàng)中得糜，將項(xiàng)目名稱命名為AdaptiveUIDemo敬扛，并確保device設(shè)置為Universal。
項(xiàng)目創(chuàng)建好以后在Project Setting頁(yè)面中將Deployment Target從10.0調(diào)整為9.3（或者更低）朝抖。因?yàn)閕OS 10不再支持3.5英寸的設(shè)備啥箭，所以將其設(shè)置為9.3可以允許我們測(cè)試iPhone4s的應(yīng)用程序。你可能不想測(cè)試舊一代的設(shè)備治宣，但是在本書(shū)的示例中急侥，我們想要驗(yàn)證的是如何通過(guò)自適應(yīng)界面構(gòu)建適應(yīng)所有的屏幕大小的UI。
現(xiàn)在炼七，打開(kāi)Main.storyboard缆巧。在Interface Builder中，您會(huì)發(fā)現(xiàn)有一個(gè)大小為iPhone 6的視圖控制器豌拙。如果你以前使用Xcode 7陕悬，我相信你超喜歡這個(gè)改變。它不會(huì)再顯示一個(gè)具有方形畫(huà)布的通用視圖控制器按傅。新的Interface Builder允許你在模擬設(shè)備中布置用戶界面捉超，您可以使用底部欄中的設(shè)備配置控件輕松地在不同設(shè)備之間切換。例如唯绍，選擇View as打開(kāi)設(shè)備配置面板拼岳，然后選擇iPhone 6s Plus。故事板中的視圖控制器的大小便相應(yīng)發(fā)生變化况芒。
現(xiàn)在我們就來(lái)開(kāi)始設(shè)計(jì)app的用戶界面惜纸。首先，從http://www.appcoda.com/resources/swift3/adaptiveui-images.zip下載圖像包绝骚，并將圖像導(dǎo)入到Assets.xcassets耐版。
接下來(lái)回到故事板。我通常從iPhone 6s開(kāi)始布局用戶界面压汪，然后再為其他屏幕尺寸添加特定的布局粪牲。因此，如果您選擇了其他設(shè)備（例如iPhone 6s Plus）止剖，建議您將設(shè)備設(shè)置更改為iPhone 6s腺阳。
現(xiàn)在落君，將image view從對(duì)象庫(kù)拖動(dòng)到視圖控制器。將其寬度設(shè)置為375亭引，高度為390绎速。選中image view，然后在Attributes檢查器中痛侍，設(shè)置image為tshirt朝氓，將mode設(shè)置為Aspect Fill魔市。
然后主届，拖動(dòng)一個(gè)view到視圖控制器，并將其放在image view的正下方待德。此view用作容納其他UI組件（如Label）的容器君丁。通過(guò)分組相關(guān)的UI組件到同一個(gè)view下，可以使你以后的工作變得更加輕松将宪。在Size檢查器中绘闷，確保將width設(shè)置為375，Height為277较坛。
在整個(gè)章節(jié)中印蔗，我會(huì)將這個(gè)視圖稱為Product Info View。 您的界面布局應(yīng)類似于下圖丑勤。
接下來(lái)华嘹，將Label拖到Product Info View。將Label更改為PSD T-Shirt Mockup Template法竞。將字體設(shè)置為Avenir Next耙厚，其大小為25點(diǎn)。按command + =調(diào)整label到合適的大小岔霸。在Size檢查器中薛躬，將X的值更改為15，將Y更改為15呆细。
拖拽另一個(gè)label型宝，將其放在上一個(gè)label的正下方。在Attributes檢查器中絮爷，將text更改為This is a free psd T-shirt mockup provided by pixeden.com. The PSD comes with a plain simple tee-shirt mockup template. You can edit the t-shirt color and use the smart layer to apply your designs. The high-resolution makes it easy to frame specific details with close-ups.并將字體設(shè)置為Avenir Next趴酣。將字體大小更改為18點(diǎn)，將行數(shù)更改為0略水。
在Size檢查器中价卤，將X的值更改為15，將Y更改為58渊涝。將寬度設(shè)置為352慎璧，將高度設(shè)置為182床嫌。
請(qǐng)注意，兩個(gè)label應(yīng)放置在Product Info View中胸私。您可以通過(guò)雙擊打開(kāi)Document Outline來(lái)仔細(xì)檢查厌处。兩個(gè)label放在view的下面。如果你按照正確的程序岁疼，你的屏幕應(yīng)該類似于下面這樣阔涉。
即使你的設(shè)計(jì)完全不符合理想的參考設(shè)計(jì)，但也沒(méi)有問(wèn)題捷绒。我們將使用auto layout constraints來(lái)進(jìn)行之后的布局瑰排。
現(xiàn)在，應(yīng)用程序界面是iPhone 6s或4.7英寸的屏幕暖侨。我們進(jìn)行一個(gè)快速測(cè)試椭住，以查看不同設(shè)備上的設(shè)計(jì)外觀和感覺(jué)。
在Xcode 8中字逗，您有兩種實(shí)時(shí)預(yù)覽app UI的方法：
- 通過(guò)使用設(shè)備配置面板
- 使用預(yù)覽助手（Preview Assistant）
如您以前嘗試過(guò)的京郑，您可以單擊View as按鈕切換到另一個(gè)設(shè)備。現(xiàn)在嘗試將設(shè)備更改為iPhone SE葫掉，在看看它的外觀些举。看起來(lái)不好看圖像和文本都被截?cái)嗔思蠛瘛Ｄ梢岳^續(xù)切換到其他設(shè)備來(lái)預(yù)覽用戶界面户魏。
另外，你也可以使用Preview assistant套腹，它可讓你一次評(píng)估不同尺寸iOS設(shè)備上的設(shè)計(jì)效果绪抛。
要打開(kāi)預(yù)覽助手，請(qǐng)打開(kāi)Assistant pop-up menu > Preview (1)电禀。 然后按住option鍵幢码，單擊Main.storyboard（Preview）。
然后尖飞，Xcode將在助理編輯器中顯示app UI的預(yù)覽症副。默認(rèn)情況下，它顯示在iPhone 4英寸設(shè)備上的預(yù)覽政基。您可以點(diǎn)擊助手編輯器左下角的+按鈕來(lái)預(yù)覽iPhone 3.5英寸和其他設(shè)備贞铣。如果您將所有設(shè)備（包括iPad）添加到助理編輯器中，則屏幕應(yīng)如下圖所示沮明。如您所見(jiàn)辕坝，目前的設(shè)計(jì)在除iPhone 6之外的所有設(shè)備上都看起來(lái)不盡如人意。到目前為止荐健，我們還沒(méi)有定義任何自動(dòng)布局約束酱畅。這就是為什么視圖不適合所有設(shè)備琳袄。
Adding Auto Layout Constraints
現(xiàn)在，我們要定義UI組件的布局約束纺酸。首先窖逗，我們從image view開(kāi)始。一些開(kāi)發(fā)人員害怕使用自動(dòng)布局餐蔬。我曾經(jīng)以描述性的方式寫(xiě)過(guò)布局約束碎紊。以image view為例，這里有一些我可以想到的限制：
- image view的頂部樊诺，左側(cè)和右側(cè)與main view之間不應(yīng)有間距仗考。
- image view占主視圖的55-60％。
- image view和Product Info View之間沒(méi)有間距啄骇，應(yīng)為零痴鳄。
如果將上述約束轉(zhuǎn)換為自動(dòng)布局約束，則它們將按原樣轉(zhuǎn)換：
- 為image view的top缸夹、leading（即左）和trailing（即右）邊緣創(chuàng)建間距約束。將距離設(shè)置為0螺句。
- 定義image view和main view之間的高度約束虽惭，并將約束的乘數(shù)設(shè)置為0.585。 （我預(yù)先計(jì)算了這個(gè)值蛇尚，但0.55和0.6之間的任何值都可以正常工作芽唇。）
- 在image view和Product Info View之間創(chuàng)建間距約束，并將其值設(shè)置為0取劫。
現(xiàn)在選擇image view匆笤，然后單擊自動(dòng)布局菜單上的Pin按鈕以創(chuàng)建間距約束。對(duì)于左側(cè)谱邪、上側(cè)和右側(cè)炮捧，將值設(shè)置為0。確保Constrain to margin選項(xiàng)未選中惦银，因?yàn)槲覀円O(shè)置相對(duì)于super view邊緣的約束咆课。 然后點(diǎn)擊Add 3 constraints按鈕。
接下來(lái)扯俱，打開(kāi)Document Outline书蚪。從image view （tshirt）拖動(dòng)鼠標(biāo)到main view。出現(xiàn)提示時(shí)迅栅，從彈出菜單中選擇Equal Heights殊校。
一旦添加了等高度約束，它應(yīng)該出現(xiàn)在Document Outline的Constraints部分读存。選擇約束并轉(zhuǎn)到Size檢查器为流。在這里您可以編輯約束的值來(lái)更改它的定義窜醉。
在下一步之前，確保第一個(gè)item設(shè)置為tshirt.Height艺谆，第二個(gè)item設(shè)置為Superview.height榨惰。 如果不是，您可以單擊第一個(gè)item的選擇框静汤，然后選擇Reverse First and Second item琅催。
默認(rèn)情況下，multiplier的值設(shè)置為1虫给，這意味著tshirt image view占用main view的100％（這里的main view是superview）藤抡。如前所述，image view應(yīng)該只占main view的大約60％抹估。 所以將乘數(shù)從1改為0.585缠黍。
接下來(lái)，選擇Product Info View药蜻，然后單擊Pin按鈕瓷式。選擇左側(cè)、右側(cè)和底部语泽，并將該值設(shè)置為0贸典。確保未勾選Constrain to margin選項(xiàng)。然后單擊Add 3 constraints按鈕踱卵。這為Product Info View添加了三個(gè)間距約束廊驼。
此外，我們必須在image view和Product Info View之間定義間距約束惋砂。在Document Outline中妒挎，拖拽image view（tshirt）到Product Info View。出現(xiàn)提示時(shí)西饵，從菜單中選擇Vertical Spacing酝掩。這會(huì)創(chuàng)建一個(gè)垂直間距約束，使image view底部和Product Info View頂部之間沒(méi)有間隙罗标。
如果您現(xiàn)在在其他設(shè)備上查看所呈現(xiàn)的視圖庸队，則image view現(xiàn)在應(yīng)適用于所有設(shè)備；然而闯割，label還有很多工作要做彻消。
現(xiàn)在，我們來(lái)定義兩個(gè)label所需要的約束宙拉。
選擇字體較大的標(biāo)題label宾尚。點(diǎn)擊Pin按鈕。 將top的值設(shè)置為15，左側(cè)為15和右側(cè)為15煌贴。同樣御板，確保取消選擇邊界約束，然后單擊添加3約束牛郑。
接下來(lái)怠肋，選擇另外一個(gè)標(biāo)簽。為頂部淹朋、左側(cè)笙各、右側(cè)和底部添加四個(gè)間距約束。單擊Pin按鈕并相應(yīng)地添加約束础芍。
一旦添加了約束杈抢，您將看到一些紅色的約束線，表示出現(xiàn)了一些布局問(wèn)題仑性。當(dāng)某些約束是不明確的時(shí)候惶楼，可能會(huì)發(fā)生自動(dòng)布局問(wèn)題。要解決這些問(wèn)題诊杆，請(qǐng)打開(kāi)Document Outline歼捐，然后單擊紅色箭頭以查看問(wèn)題列表。
Xcode會(huì)智能的嘗試為我們解決這些問(wèn)題刽辙。只需點(diǎn)擊指示圖標(biāo)窥岩，彈出窗口就會(huì)顯示可能的解決方案。出現(xiàn)提示時(shí)宰缤，單擊更改優(yōu)先級(jí)以解決這些問(wèn)題。
有時(shí)晃洒，您可能會(huì)看到黃色指示器慨灭。這表明有一些毛病。同樣球及，您可以讓Interface Builder通過(guò)updating the frame來(lái)匹配約束以解決這個(gè)問(wèn)題氧骤。
酷！您已經(jīng)創(chuàng)建了所有的自動(dòng)布局約束吃引〕锪辏可以查看預(yù)覽并查看UI在各種設(shè)備上的外觀了。
注意：Interface Builder和Preview assistant在Xcode 8中仍然很差镊尺。有時(shí)朦佩，在實(shí)時(shí)預(yù)覽中渲染的UI與真實(shí)設(shè)備或模擬器上顯示的UI不完全相同。因此庐氮，如果您發(fā)現(xiàn)任何問(wèn)題语稠，請(qǐng)運(yùn)行該項(xiàng)目并在模擬器中執(zhí)行該應(yīng)用程序。
視圖看起來(lái)好多了，image view完美顯示和對(duì)齊了仙畦。但是输涕，還有幾個(gè)問(wèn)題：
- 描述label在大尺寸設(shè)備的屏幕上垂直居中。我們希望它在標(biāo)題label的正下方顯示慨畸。
- 某些型號(hào)的iPhone上標(biāo)題和說(shuō)明label只顯示了一部分莱坎。
我們來(lái)看看第一個(gè)問(wèn)題。你還記得我們?yōu)槊枋鰈abel定義了幾個(gè)垂直空間限制嗎寸士？描述label應(yīng)距標(biāo)題label 8點(diǎn)檐什，距super view的底部15點(diǎn)。 為了滿足約束碉京，iOS必須在更大的屏幕尺寸上擴(kuò)展描述label厢汹。因此，描述文字就垂直居中了谐宙。
Content Hugging Priority
問(wèn)你一個(gè)問(wèn)題烫葬。為什么iOS不擴(kuò)展標(biāo)題label而是描述label呢？實(shí)際上有兩個(gè)選項(xiàng)讓iOS用于渲染滿足布局約束的UI凡蜻。iOS如何實(shí)現(xiàn)這一選擇搭综？
如果選擇說(shuō)明label并轉(zhuǎn)到Size檢查器，則應(yīng)注意划栓，content hugging priority（vertical）被設(shè)置為250《医恚現(xiàn)在選擇標(biāo)題label并查看其content hugging priority。你應(yīng)該注意到它設(shè)置為251忠荞。換句話說(shuō)蒋歌，它具有比說(shuō)明label更高的content hugging priority（vertical）够坐。
content hugging priority的value會(huì)幫助iOS確定應(yīng)該放大哪個(gè)view专执。具有較高h(yuǎn)ugging優(yōu)先級(jí)的view可以抵抗來(lái)自其內(nèi)在的尺寸的增長(zhǎng)尤慰。這里萧求，標(biāo)題label具有較高的hugging priority感猛。這就是為什么iOS選擇讓說(shuō)明label更大许蓖，而描述標(biāo)簽的大小不變催跪。
Editing the Relation of the Constraints
現(xiàn)在你應(yīng)該對(duì)content hugging priority有一個(gè)基本的了解若厚，讓我們繼續(xù)解決我們發(fā)現(xiàn)的第一個(gè)問(wèn)題讥邻。
您可以隨時(shí)查看Size檢查器下特定組件的約束迫靖。選擇描述label，然后轉(zhuǎn)到Size檢查器兴使。你將在Constraint部分找到約束的列表系宜。
我們已經(jīng)為這個(gè)label定義了四個(gè)間距約束。如果你查看這些約束鲫惶，他們每個(gè)都有一個(gè)Equal關(guān)系蜈首。這意味著在渲染描述label時(shí)，label的每一邊應(yīng)該與指定的約束完全相同。間隔不能大也不能小欢策。
那么吆寨，如何修改約束，使描述label放置在標(biāo)題label下踩寇，而不管屏幕尺寸如何啄清？
我想你可能會(huì)知道答案。不用嚴(yán)格地將約束關(guān)系設(shè)置為等于俺孙，底部間隔約束應(yīng)該有一些更大的靈活性辣卒。空間不需要等于15點(diǎn)睛榄。這只是我們想要的最小空間荣茫。該空間實(shí)際上可以隨著屏幕大小而增長(zhǎng)。
現(xiàn)在场靴，雙擊Bottom Space約束來(lái)編輯它啡莉。將關(guān)系從Equal更改為Greater than or Equal，一旦作出改變旨剥，空間問(wèn)題應(yīng)該是固定的咧欣。
好的，現(xiàn)在是研究第二個(gè)布局問(wèn)題的時(shí)候了轨帜。
- 某些iPhone型號(hào)的標(biāo)題和說(shuō)明label會(huì)顯示一部分魄咕。
這個(gè)問(wèn)題很容易解決。 我們可以讓較小屏幕尺寸的iOS設(shè)備顯示較小的字體蚌父。選擇標(biāo)題label哮兰，然后轉(zhuǎn)到Attributes檢查器。將Autoshrink選項(xiàng)的值設(shè)置為Minimium Font Size苟弛。對(duì)描述label重復(fù)相同的步驟奠蹬。
僅此而已。如果您預(yù)覽iPhone 4s / 5上的用戶界面或在這些設(shè)備上執(zhí)行項(xiàng)目嗡午，則兩個(gè)label都將正確顯示。
Size Classes
正如我在本章開(kāi)頭提到的冀痕，設(shè)計(jì)自適應(yīng)用戶界面要分為兩個(gè)部分荔睹。到目前為止，我們已經(jīng)創(chuàng)建了通用布局言蛇∑基本布局足以支持大多數(shù)屏幕尺寸。該過(guò)程的第二部分是使用Size Classes來(lái)微調(diào)設(shè)計(jì)腊尚。
首先吨拗，什么是Size Classes？
一個(gè)Size Classes標(biāo)識(shí)顯示空間的垂直（高）和水平（寬度）尺寸的相對(duì)量。iOS中有兩種類型的大小類：regular（常規(guī)）和compact（緊湊）劝篷。常規(guī)尺寸類別表示較大的屏幕空間哨鸭，而緊湊尺寸類別表示較小的屏幕空間量。
通過(guò)使用Size Classes描述每個(gè)顯示維度娇妓，這導(dǎo)致有四個(gè)抽象設(shè)備：常規(guī)寬度 - 常規(guī)高度像鸡，常規(guī)寬度 - 緊湊高度，緊湊寬度 - 常規(guī)高度和緊湊寬度 - 緊湊的高度哈恰。
下表顯示了iOS設(shè)備及其相應(yīng)的Size Classes只估。
要表征顯示環(huán)境，您必須同時(shí)指定水平Size Classes和垂直Size Classes着绷。例如蛔钙，iPad具有Regular水平（寬度）Size Classes和Regular垂直（高度）Size Classes。
使用基本布局荠医，您可以使用Size Classes來(lái)提供布局特殊化吁脱，以覆蓋基本布局中的某些設(shè)計(jì)。例如子漩，您可以更改采用緊湊高度 - 常規(guī)寬度Size的設(shè)備的Label字體大小豫喧。或者您可以更改按鈕的位置幢泼，特別是對(duì)于Regular Size紧显。
請(qǐng)注意，縱向的所有iPhone都具有緊湊的寬度和常規(guī)高度缕棵。換句話說(shuō)孵班，您的用戶界面將顯示在iPhone 4上幾乎相同，就像在iPhone 7上一樣招驴。
iPhone 6/7 Plus在橫向上具有Regular寬度和Compact的高度Size篙程。這允許您創(chuàng)建一個(gè)完全不同于iPhone 7（或更低版本）的UI設(shè)計(jì)。
Using Size Classes for Font Customization
通過(guò)對(duì)Size Classes的一些基本了解别厘，我們來(lái)看看如何使用它進(jìn)行app 的布局專業(yè)化虱饿。
不用說(shuō)，我們想讓iPhone的標(biāo)題和描述label完美触趴。當(dāng)前的字體大小是iPhone的理想選擇氮发，但對(duì)于iPad來(lái)說(shuō)太小了。我們要做的是使iPad設(shè)備上的字體更大一些冗懦。
使用Size Classes爽冕，您現(xiàn)在可以調(diào)整特定屏幕尺寸的字體樣式。在這種情況下披蕉，我們要更改所有iPad型號(hào)的字體大小颈畸。在Size Classes方面乌奇，iPad設(shè)備默認(rèn)為水平（寬度）的Regular和垂直（高度）的Regular Size Classes。
要設(shè)置此特定Size Classes的字體大小眯娱，請(qǐng)先在Interface Builder中切換到iPad設(shè)備礁苗，然后選擇標(biāo)題label。在Attributes檢查器下困乒，您應(yīng)該看到字體設(shè)置旁邊的加號(hào)（+）按鈕寂屏。點(diǎn)擊+按鈕。將width和height都設(shè)為Regular娜搂，然后單擊Add Variation迁霎。
然后，您將看到一個(gè)新的Font選項(xiàng)條目百宇，它專用于該特定的Size Classes考廉。保持原始字體選項(xiàng)的大小不變，但將wR hR字體字段的大小更改為35點(diǎn)携御。
這將指明iOS在iPad上使用較大的第二種字體昌粤。對(duì)于iPhone設(shè)備，原始字體仍將用于顯示文本∽纳玻現(xiàn)在選擇描述Label涮坐。再次，在Attributes檢查器下誓军，單擊+按鈕袱讹，然后單擊Add Variation。 將wR hR font字段的大小更改為25點(diǎn)昵时。 在模擬器中查看預(yù)覽或測(cè)試應(yīng)用程序捷雕。所有屏幕尺寸的布局看起來(lái)都很完美。
Using Size Classes to Customize a View
現(xiàn)在壹甥，用戶界面適合所有設(shè)備的縱向方向救巷，他們?nèi)绾螌?duì)待橫向呢？ 在Preview Assistant中句柠，單擊設(shè)備上的旋轉(zhuǎn)按鈕（例如iPhone 4 inch）浦译。或者您可以使用模擬器在橫向模式下查看UI溯职。該視圖看起來(lái)不錯(cuò)管怠，但我認(rèn)為有更好的方式在橫向上布局UI。
我將向您展示如何為視圖創(chuàng)建另一種設(shè)計(jì)缸榄，以利用更寬的屏幕尺寸。這是Size Classes的真正魅力祝拯。
更寬但更短的屏幕尺寸甚带，最好同時(shí)呈現(xiàn)image view和Product Info View她肯。每個(gè)占主視圖的50％。此屏幕顯示了iPhone 橫向的最終設(shè)計(jì)效果鹰贵。
那么我們?nèi)绾问褂肧ize Classes創(chuàng)建兩個(gè)不同的UI呢晴氨？目前，我們只有一套適用于所有Size Classes的自動(dòng)布局約束碉输。為了創(chuàng)建兩個(gè)不同的UI籽前，我們必須為每個(gè)UI使用兩組不同的布局約束：
- 對(duì)于iPad和iPhone（縱向），我們利用現(xiàn)有的布局和布局約束敷钾。
- 對(duì)于iPhone（橫向）枝哄，我們重新啟動(dòng)UI并定義一組新的布局約束。
首先阻荒，我們必須將現(xiàn)有的布局約束移動(dòng)到Size Classes挠锥，以便當(dāng)設(shè)備是縱向方向的iPad或iPhone時(shí)激活約束。在設(shè)備配置面板中侨赡，您將找到Vary for Traits按鈕蓖租，它是用來(lái)設(shè)計(jì)用戶界面變體的。當(dāng)您點(diǎn)擊按鈕時(shí)羊壹，會(huì)顯示一個(gè)popover蓖宦，其中包含兩個(gè)選項(xiàng)供您選擇。在這種情況下油猫，選擇高度稠茂，然后單擊Interface Builder中的任意位置。設(shè)備配置面板變?yōu)樗{(lán)色眨攘，并顯示我們剛剛選擇的Size Classes的受影響設(shè)備主慰。如果您單擊Varying 18 Regular Height Devices選項(xiàng)，它將顯示所有受影響的設(shè)備鲫售，包括iPad和iPhone（人像）共螺。
在變化模式下，您對(duì)畫(huà)布所做的任何更改僅適用于當(dāng)前變體（或Size Classes）情竹。因?yàn)槲覀兿Ｍ麑⑺鞋F(xiàn)有的限制遷移到這個(gè)變體藐不。 在Document Outline視圖中選擇所有約束（按住Command并選擇每個(gè)約束）。接下來(lái)秦效，轉(zhuǎn)到Size Classes檢查器雏蛮，然后單擊+按鈕（安裝的選項(xiàng)旁邊）創(chuàng)建一個(gè)變體。
Interface Builder 會(huì)在Regular-height復(fù)選框中顯示Installed阱州。因?yàn)樗鞋F(xiàn)存的約束都被應(yīng)用在此Size Classes挑秉。取消選中Installed的復(fù)選框，并選中hR Installed的復(fù)選框苔货。這意味著為iPad和iPhone（橫向）設(shè)備被激活所有選定的限制犀概。最后立哑，單擊完成更改以完成更改。
您如何知道約束是否僅應(yīng)用于Regular-height設(shè)備姻灶？在設(shè)備配置窗格中铛绰，您可以將iPhone的方向更改為橫向。您應(yīng)該發(fā)現(xiàn)产喉，橫向的UI不再正確地呈現(xiàn)捂掰。而且，所有的約束都是灰色的曾沈，這意味著它們不屬于這個(gè)Size Classes这嚣。
現(xiàn)在是時(shí)候以橫向重新設(shè)計(jì)應(yīng)用程序布局了，可以定義一組單獨(dú)的布局約束晦譬。
確保您在設(shè)備配置欄中選擇iPhone 6s設(shè)備和橫向疤苹。再次點(diǎn)擊Vary for Traits按鈕。在popover中敛腌，選擇Height可以在橫向模式下為所有iPhone設(shè)備創(chuàng)建變體卧土。
從現(xiàn)在開(kāi)始，您所做的所有更改將僅適用于所選Size Classes（即Compact寬度和Compact高度）像樊。
首先尤莺，選擇T恤image view。在Size檢查器中生棍，將x設(shè)置為0颤霎，將y設(shè)置為0，將width設(shè)置為333涂滴，將height設(shè)置為375友酱。在Attributes檢查器中，確保Clip to Bounds選項(xiàng)已啟用柔纵。
接下來(lái)缔杉，選擇標(biāo)題和描述Label。轉(zhuǎn)到Size檢查器搁料，將x設(shè)置為333或详，將y設(shè)置為0，將width設(shè)置為334郭计，將height設(shè)置為375霸琴。
最后，調(diào)整標(biāo)題和描述標(biāo)簽的大小昭伸，使其適合梧乘。這里我將兩個(gè)標(biāo)簽的寬度改為303點(diǎn)。您的布局應(yīng)與圖1.31類似庐杨。
到目前為止宋下，我們還沒(méi)有為此Size Classes定義任何布局約束∥松疲現(xiàn)在選擇T恤Image view，然后點(diǎn)擊Pin按鈕学歧。添加頂部、底部各吨、左邊和右邊共四個(gè)空間約束枝笨。
接下來(lái)，選擇view揭蜒，并為頂部横浑，左側(cè)和右側(cè)添加三個(gè)空間約束。
其余的是添加標(biāo)題和描述Label的布局約束屉更。選擇標(biāo)題Label徙融，然后單擊Pin按鈕。添加頂部瑰谜、底部欺冀、左側(cè)和右側(cè)的空間限制（參見(jiàn)圖1.34）。然后萨脑，為描述標(biāo)簽添加兩個(gè)空間約束（左側(cè)和右側(cè)）隐轩。
由于我們希望這兩個(gè)視圖各占據(jù)屏幕的50％，因此可以從T恤image view拖動(dòng)到容器視圖渤早。當(dāng)彈出面板出現(xiàn)時(shí)职车，選擇Equal Width以添加約束。
一旦定義了約束鹊杖，Interface Builder會(huì)檢測(cè)到一些歧義悴灵。單擊黃色圓圈按鈕以顯示問(wèn)題列表，然后單擊每個(gè)指示符圖標(biāo)骂蓖，選擇更新框架以解決問(wèn)題积瞒。最后，確保您單擊完成來(lái)保存更改涯竟。您的最終布局看起來(lái)與圖1.36相似赡鲜。
如果您看到Document Outline中的約束，您應(yīng)該看到啟用了一些約束庐船，而有些則會(huì)變?yōu)榛疑辍Ｕｎ伾械倪@些約束應(yīng)用于當(dāng)前Size Classes。在這種情況下筐钟，它是Compact寬度和Compact高度揩瞪。如果切換到縱向模式，您將看到啟用了一組不同的約束篓冲。
這是您如何使用Size Classes應(yīng)用到指定設(shè)備的布局約束集李破，并在Interface Builder中布置兩個(gè)不同的UI宠哄。如果您使用任何iPhone模擬器運(yùn)行應(yīng)用程序，您將看到兩個(gè)不同的用戶界面嗤攻，用于縱向和橫向毛嫉。另一件好事是，當(dāng)視圖從縱向更改為橫向時(shí)妇菱，iOS會(huì)平滑過(guò)渡承粤。 它看起來(lái)很棒，對(duì)吧闯团？
Using Size Classes to Customize Constraints
希望您現(xiàn)在可以了解如何使用Size Classes自定義字體并查看特定Size Classes組合的設(shè)計(jì)辛臊。在這些自定義之上，您可以使用Size Classes來(lái)自定義特定的約束房交。
如果要將iPhone 6/7 Plus（橫向）的視圖設(shè)計(jì)更改為此視圖彻舰，但保持其他iPhone的設(shè)計(jì)完好無(wú)損？
您可以看到候味，標(biāo)題和描述已被移動(dòng)到視圖的右下角部分刃唤。顯然，我們必須定制標(biāo)題標(biāo)簽和其Super view之間的頂層間距約束负溪。
讓我們看看如何做到這一點(diǎn)透揣。
首先，將設(shè)備更改為iPhone 6s Plus川抡，并在設(shè)備配置窗格中將方向設(shè)置為橫向辐真。因?yàn)槲覀円谶@個(gè)特定的方向上為這個(gè)設(shè)備應(yīng)用特定的布局，請(qǐng)點(diǎn)擊Vary for Traits按鈕崖堤，并選擇height和width選項(xiàng)侍咱。 Interface Builder應(yīng)該指出這種更改只適用于Regular寬度和compact高度設(shè)備。接下來(lái)密幔，選擇標(biāo)題Label頂端的垂直空間約束楔脯。在屬性檢查器中，您應(yīng)該看到常量字段胯甩。該值以點(diǎn)為單位定義垂直空間昧廷。因?yàn)槲覀円獮檫@個(gè)特定的Size Classes增加這個(gè)值，請(qǐng)點(diǎn)擊+按鈕并確認(rèn)添加變體偎箫。
這將為wR hC大小類創(chuàng)建一個(gè)附加字段木柬。將值設(shè)置為150點(diǎn)。僅此而已淹办。記住單擊Done Varying按鈕保存更改眉枕。
您可以在Interface Builder中或使用模擬器預(yù)覽新的UI設(shè)計(jì)。在iPhone 6 / 6s / 7 Plus上，當(dāng)設(shè)備處于橫向時(shí)速挑，會(huì)出現(xiàn)新的UI谤牡。
總結(jié)
隨著Xcode 8中的改進(jìn)的Interface Builder，Apple為開(kāi)發(fā)人員提供了一個(gè)更好的工具來(lái)在iOS應(yīng)用程序中構(gòu)建自適應(yīng)UI姥宝。我希望你已經(jīng)了解了Size Classes的概念翅萤，并且知道如何使用它們來(lái)創(chuàng)建自適應(yīng)布局。
自適應(yīng)布局是自iOS 8以來(lái)引入的最重要的概念之一腊满。開(kāi)發(fā)人員只有單個(gè)設(shè)備和屏幕大小才能設(shè)計(jì)出來(lái)断序。如果您要構(gòu)建下一個(gè)應(yīng)用程序，請(qǐng)確保掌握Size Classes和自動(dòng)布局的概念糜烹，并使您的應(yīng)用適應(yīng)多種屏幕尺寸和方向。 應(yīng)用程序設(shè)計(jì)的未來(lái)更有可能適應(yīng)漱凝。所以準(zhǔn)備好了疮蹦！
作為參考，您可以從http://www.appcoda.com/resources/swift3/AdaptiveUIDemo.zip下載Xcode項(xiàng)目茸炒。
