自动布局中按钮等宽且间距相等

Question

23

我想使用自动布局约束来自动调整视图中几个大小相似的按钮的大小，以实现以下效果：

调整大小之前

伸展之前

调整大小后的期望效果

伸展之后

正如您所看到的，我希望按钮具有相同的大小，而且我还希望每个按钮之间的间距为20个点。一开始看起来很简单，因此我设置了以下约束：

实际调整大小后发生的事情

输入图像描述

在预览或测试运行应用程序时，按钮会调整大小，甚至不遵循我设置的相同宽度约束。实际上，包含视图的视图也会调整大小以适应新的按钮大小。有谁知道如何在界面构建器中纯粹解决此问题？

- Jian Jie

你是否成功按照上述要求添加了“20像素”的间距？你能分享一些相关的内容吗？ - Jasmeet

1

@Jeev 是的，我通过重新做一切来解决了问题。不幸的是，我无法找出我的错误，因此我没有发布答案。上述的三个要点已足以满足约束条件。 - Jian Jie

从外观上看，您可能具有内容压缩阻力优先级不小于等宽约束优先级的特征。 - DeFrenZ

@DavideDeFranceschi 我不这么认为。我记得上次出错和成功时，我都没有干涉任何内容的紧缩/压缩优先级。 - Jian Jie

我曾经遇到过同样的问题。小提示：在按钮上加边框可以很好地揭示问题，因为实际大小比想象中要大。编写函数使按钮更美观：

func makeButtonsPretty() {
    for element in buttons {
        element.layer.borderWidth = 3
    }
}

- finneycanhelp

4个回答

7

在界面构建器中，您可以设置按钮之间的间距约束，就像您上面描述的那样。然后，您可以按住命令键选择所有按钮，并指定“相等宽度”约束以应用于所选对象。

- B H

4

最终我找到了解决这个问题的方法。我已经测试过它，确实很有效。

就是这样！下面的图片显示了在接口生成器中它的工作方式：

将模拟大小设置为“自由形式”，并测试不同的宽度（我将其设置为330）。

- Marek R

3

这个问题似乎是由错误的“内容吸附优先级”和“内容压缩阻力优先级”引起的。因此，您应该将它们设置为低的内容吸附和高的压缩阻力（所有值应该相同）。

因为内容吸附是抵制视图增长的属性，而内容压缩阻力优先级是抵制视图缩小的属性。关于这些更多信息，您可以在这个问题中找到。

- iHulk

谢谢您的回复。我尝试将按钮和视图的内容抱紧优先级设置为250，内容压缩阻力优先级设置为1000，但仍然出现相同的情况。 - Jian Jie

根据您发布的其他问题中关于“内容吸附优先级”的定义，似乎我的问题与吸附有关。我还尝试将按钮和视图的“内容吸附优先级”设置为1，但仍然没有改变。 - Jian Jie

@JianJie 朋友，请检查一下你是否在使用 sizeToFitContent 来调整你的按钮大小？ - iHulk

1

不，我不是。IB检查器面板中也没有这样的属性。这个问题只是在我尝试更新我的应用程序以使用自动布局时出现的。 - Jian Jie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dobranoc · Accepted Answer

设置：
- 所有按钮的等宽
- 所有按钮之间的水平间距
- 第一个按钮对其父视图的前导，最后一个按钮对其父视图的尾随
这些应该就可以了。除非你与父视图有问题（例如ScrollView缺少约束）