第七章练习 Building More on the Passport App - 给护照App增加更多功能
本章练习我们继续使用第五章和第六章的练习Passport App，在本章练习中，Passport App会增加Auto Layout功能，App的界面会随着不同的设备（iPhone、iPad）不同方向（横屏、竖屏）进行自适应和自我调节（见图7-18）。
Exercise: Building More on the Passport App | Page 201
打开Passport工程，点击Project Navigator中的Passport，显示工程详细信息。往下滑把Devices设置成Universal，接着勾选Upside Down、Landscape Left、Landscape Right。然后打开Images.xcassets文件，选中AppIcon，敲击键盘删除键。接着在白色的sidebar点击鼠标右键，选择New App Icon，一个全新的iPad和iPhone应用图标格子出现。然后打开图标文件夹，把对应的图标拖动到对应的格子中。
模拟器选择下拉菜单顶部工具栏Passport字样的右边。
下拉菜单中包括了所有当前模拟器可用的设备（见图7-19）。选择iPad Air，点击Play按钮。现在iOS模拟器启动iPad Air样式。
iPad Air的模拟器非常大，所以要调小一些，点击模拟器，然后顶部菜单选择Window -> Scale -> 50%（见图7-20）。iPad Air模拟器会调整成标准尺寸的50%。
Page 202 | Chapter 7: Devices and Auto Layout
Passport App在iPad上看起来并不好看。图片的位置变化了，然后labels也偏移了位置（见图7-21）。这是因为当前的控件位置使用的是固定的宽高坐标。
你需要把控件位置设置成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用来调整不同设备下的布局，现在我们可以使用Auto Layout了，要使用Auto Layout，首先我们要给控件增加约束（constraints）。打开Passport Scene。
Page 204 | Chapter 7: Devices and Auto Layout
借助辅助线把Image View放到界面的中间，然后把Image View往上移动直到上方出现一条水平的辅助线。点击Align按钮，选择Horizontal Center in Container，然后点击Add 1 Constraint。接着点击Pin按钮，上下左右四个方向选中上方竖线，值从下拉框中选择Use Standard Value，选中Width和Height两个选项，点击Add 3 Constraints（见图7-24）。
把右侧的三个Label放到Image View的右侧下方，Label的右边距和Image View的右边距相同对齐，选中这三个右侧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
把左侧的三个Label放到Image View的左侧下方，Label的左边距和Image View的左边距相同对齐，选中这三个左侧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）。
刚刚设置的这些约束会应用到所有的size classes和layouts中。现在，我们要为某个size class设置单独的约束了。点击最下方的“Any,Any”，会出现一个小的格子框，这里控制着当前我们编辑的是哪个size class，点击格子框的右下角（见图7-28），这个size class是用来设计iPad的横屏和竖屏。
Exercise: Building More on the Passport App | Page 207
选中Image View，一条蓝色竖线出现在Image View的右侧，这时Image View的高度约束，双击这条约束，把值由225改为400，接着双击Image View下方的蓝色竖线，这是宽度约束，双击，把值由225改为400。Image View的大小已经重新设定了，Label和Button会自动调整它们的位置（见图7-29）。
Page 208 | Chapter 7: Devices and Auto Layout
想要预览刚刚修改的约束效果，我们可以使用Previewer，在打开Previewer之前，我们最好给窗口腾出一些屏幕空间来，隐藏Project Navigator和Inspector，打开Assistant Editor，就是两个圆圈相交的图标，在Assistant Editor的工具栏中，点击Automatic，会出现一个下拉菜单，选择Preview -> Main.storyboard(Preview)（见图7-30）。
右侧出现了一个4英寸iPhone的预览图，点击左下角的加号，选择iPad，一个iPad的预览效果就出现在Previewer中了（见图7-31）。现在各个控件在iPad上的效果看起来好多了。点击iPad preview下方的弯曲箭头，就可以调整iPad的方向，虽然方向变化了，但是控件的位置还是放置正确，调整一下4英寸iPhone，方向变化后，界面看起来不太友好了，各个控件的位置似乎并不合适。
Exercise: Building More on the Passport App | Page 209
在最下方点击“Regular，Regular”，然后点击最上边一行格子的中间的那个格子，这时size class变成了“Any,Compact”（见图7-32）。这个size class是用来设计iPhone横屏的效果，这时界面会调整方向，有些控件会无法出现在界面中。为了解决这个问题，我们需要从顶部菜单栏中点击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放到屏幕的左上方，直到左边和上方都出现了辅助线，选中Image View，点击Pin按钮，勾选上方方向竖线，选择Use Standard Value，左侧方向竖线，选择Use Current Canvas Value。勾选Width和Height选项，点击Add Constraints，把Label和Button放到图片右侧上方，直到上方出现了辅助线，以及Image View的右侧也出现了辅助线，点击Pin按钮，上方方向竖线选择Use Standard Value，左侧方向竖线，选择Use Current Canvas Value，点击Add Constraints。
所有的设置都已经完成了，可以对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没有按照你想要的结果运行，或者程序有了错误或警告，不要太担心，学习的最佳方式就是试错，熟能生巧，到我们的网站上下载示例代码，对比一下代码，多试几次，直到搞定这个程序为止。
Page 212 | Chapter 7: Devices and Auto Layout