本章練習(xí)我們繼續(xù)使用第五章和第六章的練習(xí)Passport App，在本章練習(xí)中，Passport App會增加Auto Layout功能，App的界面會隨著不同的設(shè)備（iPhone、iPad）不同方向（橫屏、豎屏）進(jìn)行自適應(yīng)和自我調(diào)節(jié)（見圖7-18）。
Exercise: Building More on the Passport App | Page 201
打開Passport工程，點(diǎn)擊Project Navigator中的Passport，顯示工程詳細(xì)信息。往下滑把Devices設(shè)置成Universal，接著勾選Upside Down、Landscape Left、Landscape Right。然后打開Images.xcassets文件，選中AppIcon，敲擊鍵盤刪除鍵。接著在白色的sidebar點(diǎn)擊鼠標(biāo)右鍵，選擇New App Icon，一個(gè)全新的iPad和iPhone應(yīng)用圖標(biāo)格子出現(xiàn)。然后打開圖標(biāo)文件夾，把對應(yīng)的圖標(biāo)拖動到對應(yīng)的格子中。
模擬器選擇下拉菜單頂部工具欄Passport字樣的右邊。
下拉菜單中包括了所有當(dāng)前模擬器可用的設(shè)備（見圖7-19）。選擇iPad Air，點(diǎn)擊Play按鈕。現(xiàn)在iOS模擬器啟動iPad Air樣式。
iPad Air的模擬器非常大，所以要調(diào)小一些，點(diǎn)擊模擬器，然后頂部菜單選擇Window -> Scale -> 50%（見圖7-20）。iPad Air模擬器會調(diào)整成標(biāo)準(zhǔn)尺寸的50%。
Page 202 | Chapter 7: Devices and Auto Layout
Passport App在iPad上看起來并不好看。圖片的位置變化了，然后labels也偏移了位置（見圖7-21）。這是因?yàn)楫?dāng)前的控件位置使用的是固定的寬高坐標(biāo)。
你需要把控件位置設(shè)置成Auto Layout。打開Main.storyboard文件，選擇File Inspector（見圖7-22），勾選Use Auto Layout，勾選Use Size Classes。點(diǎn)擊Enable Size Classes（見圖7-23）
Exercise: Building More on the Passport App | Page 203
Size classes用來調(diào)整不同設(shè)備下的布局，現(xiàn)在我們可以使用Auto Layout了，要使用Auto Layout，首先我們要給控件增加約束（constraints）。打開Passport Scene。
Page 204 | Chapter 7: Devices and Auto Layout
借助輔助線把Image View放到界面的中間，然后把Image View往上移動直到上方出現(xiàn)一條水平的輔助線。點(diǎn)擊Align按鈕，選擇Horizontal Center in Container，然后點(diǎn)擊Add 1 Constraint。接著點(diǎn)擊Pin按鈕，上下左右四個(gè)方向選中上方豎線，值從下拉框中選擇Use Standard Value，選中Width和Height兩個(gè)選項(xiàng)，點(diǎn)擊Add 3 Constraints（見圖7-24）。
把右側(cè)的三個(gè)Label放到Image View的右側(cè)下方，Label的右邊距和Image View的右邊距相同對齊，選中這三個(gè)右側(cè)Label，點(diǎn)擊Align按鈕，勾選Trailing Edges選項(xiàng)，點(diǎn)擊Add Constraints。然后點(diǎn)擊Pin按鈕，勾選上方向豎線，選擇Use Standard Value，Update Frames選項(xiàng)下拉選擇Items of New Constraints，點(diǎn)擊Add Constraints（見圖7-25）。
Exercise: Building More on the Passport App | Page 205
把左側(cè)的三個(gè)Label放到Image View的左側(cè)下方，Label的左邊距和Image View的左邊距相同對齊，選中這三個(gè)左側(cè)Label，點(diǎn)擊Align按鈕，勾選Leading Edges選項(xiàng)，點(diǎn)擊Add Constraints。然后點(diǎn)擊Pin按鈕，勾選上方向豎線，選擇Use Standard Value，Update Frames選項(xiàng)下拉選擇Items of New Constraints，點(diǎn)擊Add Constraints（見圖7-26）。
Page 206 | Chapter 7: Devices and Auto Layout
選中按鈕，借助輔助線把按鈕放到水平居中的位置，放到Label的下方。點(diǎn)擊Align按鈕，勾選Horizontal Center in Container，點(diǎn)擊Add 1 Constraint，最后點(diǎn)擊Pin按鈕，勾選上方向豎線，選擇Use Current Canvas Value，點(diǎn)擊Add 1 Constraint（見圖7-27）。
剛剛設(shè)置的這些約束會應(yīng)用到所有的size classes和layouts中?，F(xiàn)在，我們要為某個(gè)size class設(shè)置單獨(dú)的約束了。點(diǎn)擊最下方的“Any,Any”，會出現(xiàn)一個(gè)小的格子框，這里控制著當(dāng)前我們編輯的是哪個(gè)size class，點(diǎn)擊格子框的右下角（見圖7-28），這個(gè)size class是用來設(shè)計(jì)iPad的橫屏和豎屏。
Exercise: Building More on the Passport App | Page 207
選中Image View，一條藍(lán)色豎線出現(xiàn)在Image View的右側(cè)，這時(shí)Image View的高度約束，雙擊這條約束，把值由225改為400，接著雙擊Image View下方的藍(lán)色豎線，這是寬度約束，雙擊，把值由225改為400。Image View的大小已經(jīng)重新設(shè)定了，Label和Button會自動調(diào)整它們的位置（見圖7-29）。
Page 208 | Chapter 7: Devices and Auto Layout
想要預(yù)覽剛剛修改的約束效果，我們可以使用Previewer，在打開Previewer之前，我們最好給窗口騰出一些屏幕空間來，隱藏Project Navigator和Inspector，打開Assistant Editor，就是兩個(gè)圓圈相交的圖標(biāo)，在Assistant Editor的工具欄中，點(diǎn)擊Automatic，會出現(xiàn)一個(gè)下拉菜單，選擇Preview -> Main.storyboard(Preview)（見圖7-30）。
右側(cè)出現(xiàn)了一個(gè)4英寸iPhone的預(yù)覽圖，點(diǎn)擊左下角的加號，選擇iPad，一個(gè)iPad的預(yù)覽效果就出現(xiàn)在Previewer中了（見圖7-31）?，F(xiàn)在各個(gè)控件在iPad上的效果看起來好多了。點(diǎn)擊iPad preview下方的彎曲箭頭，就可以調(diào)整iPad的方向，雖然方向變化了，但是控件的位置還是放置正確，調(diào)整一下4英寸iPhone，方向變化后，界面看起來不太友好了，各個(gè)控件的位置似乎并不合適。
Exercise: Building More on the Passport App | Page 209
在最下方點(diǎn)擊“Regular，Regular”，然后點(diǎn)擊最上邊一行格子的中間的那個(gè)格子，這時(shí)size class變成了“Any,Compact”（見圖7-32）。這個(gè)size class是用來設(shè)計(jì)iPhone橫屏的效果，這時(shí)界面會調(diào)整方向，有些控件會無法出現(xiàn)在界面中。為了解決這個(gè)問題，我們需要從頂部菜單欄中點(diǎn)擊Edit -> Select All，這樣所有的控件都選中了，把Image View拖到界面的最頂部，所有的控件都顯示出來了。
Page 210 | Chapter 7: Devices and Auto Layout
這個(gè)size class需要全新的Layout（見圖7-33）。點(diǎn)擊Resolve Auto Layout Issues按鈕，選擇最下邊的Clear Constraints，這樣就會清除這個(gè)size class下的所有約束條件。接著把Image View放到屏幕的左上方，直到左邊和上方都出現(xiàn)了輔助線，選中Image View，點(diǎn)擊Pin按鈕，勾選上方方向豎線，選擇Use Standard Value，左側(cè)方向豎線，選擇Use Current Canvas Value。勾選Width和Height選項(xiàng)，點(diǎn)擊Add Constraints，把Label和Button放到圖片右側(cè)上方，直到上方出現(xiàn)了輔助線，以及Image View的右側(cè)也出現(xiàn)了輔助線，點(diǎn)擊Pin按鈕，上方方向豎線選擇Use Standard Value，左側(cè)方向豎線，選擇Use Current Canvas Value，點(diǎn)擊Add Constraints。
所有的設(shè)置都已經(jīng)完成了，可以對App進(jìn)行測試了，模擬器選擇iPhone 5s，點(diǎn)擊Play按鈕（Command+R），選擇Hardware -> Rotate Right（Command+方向鍵）（見圖7-34），在iPad Air上運(yùn)行也沒有問題（見圖7-35）
Exercise: Building More on the Passport App | Page 211
如果App沒有按照你想要的結(jié)果運(yùn)行，或者程序有了錯(cuò)誤或警告，不要太擔(dān)心，學(xué)習(xí)的最佳方式就是試錯(cuò)，熟能生巧，到我們的網(wǎng)站上下載示例代碼，對比一下代碼，多試幾次，直到搞定這個(gè)程序?yàn)橹埂?/p>
Page 212 | Chapter 7: Devices and Auto Layout
