10、详细页面创建指南

详细页面创建指南

1. 布局名称标签

在设置好图像视图后，接下来要为名称标签添加约束以进行布局。具体操作如下：
- 将名称标签放置在图像下方约 10 个点的位置，并确保其居中。
- 按下 Ctrl 键，从标签拖动到图像视图，会弹出之前见过的对话框，按下 Shift 键，添加“垂直间距”和“水平居中”约束。这样能使标签相对于图像水平居中，并设置标签与图像的垂直间距。
- 从标签向下拖动，设置其与容器视图的垂直间距，修改此约束，使标签与容器底部间距为 8 个点，确保内容视图有高度，解决之前遇到的自动布局问题。

更改预览设备，图像和标签应在每个布局中都能完美居中。之前的设计中，iPad 上的图像更大，因此需要为 iPad 的大屏幕设置单独的尺寸约束。

2. 大屏幕图像和标签调整

在 Interface Builder 中点击“Vary for Traits”按钮，有三种变化选项：
- 按高度变化
- 按宽度变化
- 按宽度和高度变化

若选择按宽度变化，添加的新约束将应用于所选尺寸类轴匹配的所有特征集合。为使大图像显示效果良好，应同时按宽度和高度变化。因为在 iPhone 6 Plus 横屏模式下，大图像会覆盖过多屏幕，所以大图像应仅在水平和垂直轴都能容纳的设备上显示。

具体操作步骤如下：
1. 再次点击“Vary for Traits”，勾选宽度和高度框，此时 iPhone 会从设备列表中消失。
2. 在 Interface Builder 窗口左侧的文档大纲中找到图像视图，展开其约束，选择宽度约束。
3. 在屏幕右侧属性检查器底部，