码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-03-14 09:43:03      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:ios   autolayout   

前面两节我们解决了歌手名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的约束就做好了:

技术分享


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

标签:ios   autolayout   

原文地址:http://blog.csdn.net/yamingwu/article/details/44246115

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!