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的约束就做好了:

技术分享


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。