上一节我们完成了对歌手名称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