本章練習(xí)我們繼續(xù)使用第五章和第六章的練習(xí)Passport App侈询，在本章練習(xí)中茫孔，Passport App會增加Auto Layout功能，App的界面會隨著不同的設(shè)備（iPhone痒玩、iPad）不同方向（橫屏愤估、豎屏）進行自適應(yīng)和自我調(diào)節(jié)（見圖7-18）。
Exercise: Building More on the Passport App | Page 201
打開Passport工程打洼，點擊Project Navigator中的Passport龄糊，顯示工程詳細信息。往下滑把Devices設(shè)置成Universal募疮，接著勾選Upside Down炫惩、Landscape Left、Landscape Right阿浓。然后打開Images.xcassets文件他嚷，選中AppIcon，敲擊鍵盤刪除鍵。接著在白色的sidebar點擊鼠標右鍵筋蓖，選擇New App Icon卸耘，一個全新的iPad和iPhone應(yīng)用圖標格子出現(xiàn)。然后打開圖標文件夾粘咖，把對應(yīng)的圖標拖動到對應(yīng)的格子中蚣抗。
模擬器選擇下拉菜單頂部工具欄Passport字樣的右邊。
下拉菜單中包括了所有當前模擬器可用的設(shè)備（見圖7-19）瓮下。選擇iPad Air翰铡，點擊Play按鈕。現(xiàn)在iOS模擬器啟動iPad Air樣式唱捣。
iPad Air的模擬器非常大两蟀，所以要調(diào)小一些，點擊模擬器震缭，然后頂部菜單選擇Window -> Scale -> 50%（見圖7-20）赂毯。iPad Air模擬器會調(diào)整成標準尺寸的50%。
Page 202 | Chapter 7: Devices and Auto Layout
Passport App在iPad上看起來并不好看拣宰。圖片的位置變化了党涕，然后labels也偏移了位置（見圖7-21）。這是因為當前的控件位置使用的是固定的寬高坐標巡社。
你需要把控件位置設(shè)置成Auto Layout膛堤。打開Main.storyboard文件，選擇File Inspector（見圖7-22）晌该，勾選Use Auto Layout肥荔，勾選Use Size Classes。點擊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)一條水平的輔助線右莱。點擊Align按鈕蚜锨，選擇Horizontal Center in Container，然后點擊Add 1 Constraint慢蜓。接著點擊Pin按鈕亚再，上下左右四個方向選中上方豎線，值從下拉框中選擇Use Standard Value晨抡，選中Width和Height兩個選項针余，點擊Add 3 Constraints（見圖7-24）饲鄙。
把右側(cè)的三個Label放到Image View的右側(cè)下方，Label的右邊距和Image View的右邊距相同對齊圆雁，選中這三個右側(cè)Label忍级，點擊Align按鈕，勾選Trailing Edges選項伪朽，點擊Add Constraints轴咱。然后點擊Pin按鈕，勾選上方向豎線烈涮，選擇Use Standard Value朴肺，Update Frames選項下拉選擇Items of New Constraints，點擊Add Constraints（見圖7-25）坚洽。
Exercise: Building More on the Passport App | Page 205
把左側(cè)的三個Label放到Image View的左側(cè)下方戈稿，Label的左邊距和Image View的左邊距相同對齊，選中這三個左側(cè)Label讶舰，點擊Align按鈕鞍盗，勾選Leading Edges選項，點擊Add Constraints跳昼。然后點擊Pin按鈕般甲，勾選上方向豎線，選擇Use Standard Value鹅颊，Update Frames選項下拉選擇Items of New Constraints敷存，點擊Add Constraints（見圖7-26）。
Page 206 | Chapter 7: Devices and Auto Layout
選中按鈕堪伍，借助輔助線把按鈕放到水平居中的位置锚烦，放到Label的下方。點擊Align按鈕帝雇，勾選Horizontal Center in Container涮俄，點擊Add 1 Constraint，最后點擊Pin按鈕摊求，勾選上方向豎線，選擇Use Current Canvas Value刘离，點擊Add 1 Constraint（見圖7-27）室叉。
剛剛設(shè)置的這些約束會應(yīng)用到所有的size classes和layouts中。現(xiàn)在硫惕，我們要為某個size class設(shè)置單獨的約束了茧痕。點擊最下方的“Any,Any”，會出現(xiàn)一個小的格子框恼除，這里控制著當前我們編輯的是哪個size class踪旷，點擊格子框的右下角（見圖7-28）曼氛，這個size class是用來設(shè)計iPad的橫屏和豎屏。
Exercise: Building More on the Passport App | Page 207
選中Image View令野，一條藍色豎線出現(xiàn)在Image View的右側(cè)舀患，這時Image View的高度約束，雙擊這條約束气破，把值由225改為400聊浅，接著雙擊Image View下方的藍色豎線，這是寬度約束现使，雙擊低匙，把值由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竿屹，就是兩個圓圈相交的圖標，在Assistant Editor的工具欄中灸姊，點擊Automatic拱燃，會出現(xiàn)一個下拉菜單，選擇Preview -> Main.storyboard(Preview)（見圖7-30）力惯。
右側(cè)出現(xiàn)了一個4英寸iPhone的預(yù)覽圖碗誉，點擊左下角的加號，選擇iPad父晶，一個iPad的預(yù)覽效果就出現(xiàn)在Previewer中了（見圖7-31）∠保現(xiàn)在各個控件在iPad上的效果看起來好多了。點擊iPad preview下方的彎曲箭頭甲喝，就可以調(diào)整iPad的方向尝苇，雖然方向變化了，但是控件的位置還是放置正確埠胖，調(diào)整一下4英寸iPhone糠溜，方向變化后，界面看起來不太友好了直撤，各個控件的位置似乎并不合適非竿。
Exercise: Building More on the Passport App | Page 209
在最下方點擊“Regular，Regular”谋竖，然后點擊最上邊一行格子的中間的那個格子红柱，這時size class變成了“Any,Compact”（見圖7-32）承匣。這個size class是用來設(shè)計iPhone橫屏的效果，這時界面會調(diào)整方向锤悄，有些控件會無法出現(xiàn)在界面中韧骗。為了解決這個問題，我們需要從頂部菜單欄中點擊Edit -> Select All铁蹈，這樣所有的控件都選中了宽闲，把Image View拖到界面的最頂部，所有的控件都顯示出來了握牧。
Page 210 | Chapter 7: Devices and Auto Layout
這個size class需要全新的Layout（見圖7-33）容诬。點擊Resolve Auto Layout Issues按鈕，選擇最下邊的Clear Constraints沿腰，這樣就會清除這個size class下的所有約束條件览徒。接著把Image View放到屏幕的左上方，直到左邊和上方都出現(xiàn)了輔助線颂龙，選中Image View习蓬，點擊Pin按鈕，勾選上方方向豎線措嵌，選擇Use Standard Value躲叼，左側(cè)方向豎線，選擇Use Current Canvas Value企巢。勾選Width和Height選項枫慷，點擊Add Constraints，把Label和Button放到圖片右側(cè)上方浪规，直到上方出現(xiàn)了輔助線或听，以及Image View的右側(cè)也出現(xiàn)了輔助線，點擊Pin按鈕笋婿，上方方向豎線選擇Use Standard Value誉裆，左側(cè)方向豎線，選擇Use Current Canvas Value缸濒，點擊Add Constraints足丢。
所有的設(shè)置都已經(jīng)完成了，可以對App進行測試了庇配，模擬器選擇iPhone 5s斩跌，點擊Play按鈕（Command+R），選擇Hardware -> Rotate Right（Command+方向鍵）（見圖7-34）讨永，在iPad Air上運行也沒有問題（見圖7-35）
Exercise: Building More on the Passport App | Page 211
如果App沒有按照你想要的結(jié)果運行滔驶，或者程序有了錯誤或警告遇革，不要太擔(dān)心卿闹，學(xué)習(xí)的最佳方式就是試錯揭糕，熟能生巧，到我們的網(wǎng)站上下載示例代碼锻霎，對比一下代碼著角，多試幾次，直到搞定這個程序為止旋恼。
Page 212 | Chapter 7: Devices and Auto Layout
