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

标签：ios   autolayout   

接下来，我们对详情页中间右侧的控件进行排版。

首先将右侧这些空间拖动到合适的位置：

在label之间添加水平间距约束：

只有水平间距约束是不够的，还需要为这三个label添加y轴方向的约束，这里我们使用Editor菜单的Align\Baselines约束，分别为每行的两个label添加约束：

接下来，我们通过编码的方式，为album value label添加内容，首先为其创建outlet：

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

static NSArray *albums; if (albums == nil) {
albums = @[ @"The Complete Riverside Recordings", @"Live at the Blue Note" ];
}
self.albumValueLabel.text = albums[index % 2];

为album value标签添加一个值为-4的tailing space约束：

可以看到，record label也被改变了，这是我们需要使用Content Compression Resistance Priority，这个优先级的作用是控制空间是否会被压缩。当左右标签使用相同的优先级时，自动布局在需要时，会同时压缩两侧的标签，但是如果我们将左侧的5个标签的这个优先级改为751，自动布局就只会压缩右侧的标签了：

执行程序，左侧的标签始终都可以被完全显示，但是在水平模式下还有问题：

因为左侧的标签与右侧的标签之间有一个水平间距约束，这就导致它们会按约束排列在一起，我们需要将Album value标签的trailing space约束改为>=：

我们继续完善这个程序，为文本编辑框和滑动条添加约束。

首先为文本框添加top space，heading space和trailing space约束：

添加这3个约束后，程序执行效果如下：

我们需要将编辑框的Content Hugging优先级改为199，这样编辑框才能在需要时被拉伸：

最后我们为滑块以及4/5标签添加如下约束：

为imageView添加到superview的左右约束，到子view的上约束和到某个按钮的下约束：

我试一试所有的在3.5寸、4寸、4.7寸和5.5寸iphone上预览这个程序，看看效果如何：

转载请注明出处：http://blog.csdn.net/yamingwu/article/details/44246805

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

标签：ios   autolayout   

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