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

标签：ios   autolayout   

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

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

标签：ios   autolayout   

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