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

上一节我们完成了对歌手名称label的布局设置,这一节我们对最下方的三个按钮的布局进行配置。

首先选中三个按钮,设置Size to Fit Content,让这三个按钮拥有合适的大小:

为了方便查看按钮的大小,我们为按钮设置一个背景色并设置如下图所示的约束:

在预览窗口,旋转界面为横屏,可以看到三个按钮的布局可以接受:

如果三个按钮宽度一致,看起来会更好看一些, 接下来我们将这三个按钮设置为等宽的:

由于约束始终是两两之间的,所以我们会看到有个按钮有两个带等号的约束,这是正常的。

如果都是英文,看起来已经不错了,但是如果我们的程序要支持国际化,有些语言的文字比英文长多了,比如荷兰语的Next为"Volgende Artiest",那么我们的程序会变成什么样呢?

可以看到,delete和cancel按钮重叠在一起了:

所以我们要修改我们的约束,让其为:如果有足够的空间融安所有的元素,让所有的元素等宽。

接下来,我们为delete和cancel按钮添加水平间距约束,然后选中这个水平间距约束,修改其constant位standard,修改relation为Greater Than or Equal:

这样,按钮看起来是如下图所示的布局:

可以看到,按钮在水平模式,看起还不错,但是在垂直模式虽然没有重叠了,但是最后一个按钮还是没有完整的现实整个单词。

我们可以为约束设置优先级,优先级取值范围为1到1000,1000意味着这个约束必须总是被满足。

选中等宽约束,将它们的优先级改为700,出现橙色线,则通过update frames来resolve:

修改后,约束效果如下:

通过size inspector可以看到,delete和cancel按钮的宽度都是76,而Next按钮不是,因为它的等宽约束无法满足。

如果修改delete为Verwijderen,再查看这三个按钮的宽度,可以看到,它们的宽度都不相等了,因为屏幕宽度无法满足等宽约束,这正是我们所期望的自适应效果。

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

时间: 2024-10-21 15:10:25

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

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 详情页面 (d) 对右侧标签进行排版

接下来,我们对详情页中间右侧的控件进行排版. 首先将右侧这些空间拖动到合适的位置: 在label之间添加水平间距约束: 只有水平间距约束是不够的,还需要为这三个label添加y轴方向的约束,这里我们使用Editor菜单的Align\Baselines约束,分别为每行的两个label添加约束: 接下来,我们通过编码的方式,为album value label添加内容,首先为其创建outlet: @property (weak, nonatomic) IBOutlet UILabel *albumV

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