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

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

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

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

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

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

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

然后修改nextButtonTapped方法:

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

执行程序,效果如下,滑动条和Rating标签重叠在了一起:

为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

时间: 2024-08-26 14:09:54

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

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轴

iOS 自动布局 Auto Layout 入门 06 详情页面 (中) 按钮的布局

上一节我们完成了对歌手名称label的布局设置,这一节我们对最下方的三个按钮的布局进行配置. 首先选中三个按钮,设置Size to Fit Content,让这三个按钮拥有合适的大小: 为了方便查看按钮的大小,我们为按钮设置一个背景色并设置如下图所示的约束: 在预览窗口,旋转界面为横屏,可以看到三个按钮的布局可以接受: 如果三个按钮宽度一致,看起来会更好看一些, 接下来我们将这三个按钮设置为等宽的: 由于约束始终是两两之间的,所以我们会看到有个按钮有两个带等号的约束,这是正常的. 如果都是英文,

IOS 自动布局(auto layout)

IOS的布局 和 Android的布局不太一样: Android 主要用的是九大布局:线性布局.帧布局等等. IOS 用的是布局约束. 同时,老的auto resize仍然可以用(会被转成约束). 如果一个view在xib里面不添加任何约束,那么系统会自动给这个view加上约束. 学习自动布局,主要通过so 和 ios 的guide,以及各种blog. view1.attribute1 = multiplier × view2.attribute2 + constant 牢记这个公式,假设自己是

iOS开发之Auto Layout入门

随着iPhone6与iOS8的临近,适配的问题讲更加复杂,最近学习了一下Auto Layout的使用,与大家分享.  什么是Auto Layout? Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往Autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 为什么要用Auto Layout? Autolayout能解决不同屏幕(iPhone4,iPhone5,iPad...)之间的适配问题. 在iPhone4时代开发者只需要适

转////iOS 8 Auto Layout界面自动布局系列1-自动布局的基本原理

iOS 8 Auto Layout界面自动布局系列1-自动布局的基本原理 http://blog.csdn.net/pucker/article/details/41832939 标签: iosinterface苹果布局界面 2014-12-10 00:25 11286人阅读 评论(2) 收藏 举报  分类: iOS开发(19)  版权声明:本文为博主原创文章,未经博主允许不得转载. 苹果今年如约放出了新的iPhone 6与iOS 8系统,SDK针对新的设备和系统的界面适配也进行了若干改进,因此

iOS Programming Auto Layout: Programmatic Constraints 自动布局:通过编程限制

iOS Programming? Auto Layout: Programmatic Constraints? 1.? However, if your views are created in code, then you will need to constrain them programmatically. 如果你的view是由代码创建的,那么你需要用编程限制它了. To have a view to work with, you are going to recreate the im

Swift语言Auto Layout入门教程

Swift语言Auto Layout入门教程:上篇 开始用自动布局约束的方式思考吧! 更新记录:该教程由Brad Johnson更新Swift和iOS 8内容,原文第一版作者为教程编纂组的Matthijs Hollemans. 你可曾为了让App在横竖屏模式下都能展现整洁的界面而感到苦恼?你可曾为了让布局同时支持iPhone和iPad而感到心烦?别灰心,好消息来啦! 为某种确切尺寸的屏幕设计用户界面并不麻烦,但如果屏幕画面的框架不固定,为适应新环境,App中各个UI元素的位置和大小都需要相应调整

Swift语言Auto Layout入门教程:上篇

原文:Beginning Auto Layout Tutorial in Swift: Part 1/2,译者:@TurtleFromMars 开始用自动布局约束的方式思考吧! 更新记录:该教程由Brad Johnson更新Swift和iOS 8内容,原文第一版作者为教程编纂组的Matthijs Hollemans. 你可曾为了让App在横竖屏模式下都能展现整洁的界面而感到苦恼?你可曾为了让布局同时支持iPhone和iPad而感到心烦?别灰心,好消息来啦! 为某种确切尺寸的屏幕设计用户界面并不麻

iOS 7 - Auto Layout on iOS Versions prior to 6.0

链接地址:http://stackoverflow.com/questions/18735847/ios-7-auto-layout-on-ios-versions-prior-to-6-0 Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required. iOS 7 - Auto Layout on