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

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