iOS 自动布局 Auto Layout 入门 06 详情页面 (c) 对左侧标签进行排版

前面两节我们解决了歌手名label和按钮的布局问题，接下来我们对界面中的一列标签进行自动布局。

对label进行排版

选中5个label选择Align\Right Edges：



为这些label添加位置约束：

Release Year标签到左边界的距离为0
Notes标签到顶部的垂直间距为64
每个label之间的垂直间距为14



选择resolve auto layout issues->update frames，看起来好多了吧：



这里，我们只为Release Year这个label设置了x轴约束，其它4个label依靠“右对齐”约束，来确定自己在x轴的位置。

对于英文程序，这样就可以了，因为Release Year是最长的，但是如果这个label不是最长的，会怎么样的？下面，我们通过添加一些代码来试试：

为Release Year标签添加outlet

@property (weak, nonatomic) IBOutlet UILabel *releaseYearLabel;

在nextButtonTapped函数的index++语句之前，添加以下代码：

static NSArray *texts; if (texts == nil) {
texts = @[ @"Year:", @"Very Long Label Text:", @"Release Year:" ];
}
self.releaseYearLabel.text = texts[index % 3];

执行程序，效果如下：



可以看到，当Release Year标签变得很短时，其它标签就越界了。。。

选中Record Label标签，添加Leading Space to Superview约束，在Relation中选择大约或等于



运行程序，现在效果是这样的了：



Year标签的位置还不是很合适，我们期望它和其它标签一样靠右对齐。现在Year标签有2个水平约束，一个是leading space，一个是右对齐。从程序执行效果来看，显然是leading space约束赢了。我们可以修改这个约束为“大于或等于”。再添加另一个leading space水平约束，并将其优先级降低为200：



因为label和button控件都在知道自己的合适大小（用于显示标题），添加第二个leading space水平约束并设置其优先级低于200的目的是为了，让Year label不被拉伸。因为这个约束优先级低于250（Content Hugging），就会使label保持自己原有的大小。

使用subview

界面中间部分的label和其它控件还是比较多和复杂的，我们最好是添加一个子view，将这些空间放到这个子view中，这样可以将这些空间相关的约束也集中管理起来。

选中界面中间部分的所有标签和按钮等控件，选择Editor菜单的Embed In\View选项，将它们加到子view之中：



不好的是，将控件加入子view会丢失之前对这些控件设置的约束。我们需要将它们全部添加回来。

加回来只有，我们需要为Record Label添加一个bottom space为20约束，用于确定子view的高度。

然后我们再为子view添加pin约束：



这样我们的子view和其中的label的约束就做好了：