如何使用自动布局来调整表格视图单元格中的视图？

Question

我有一个单元格，其中放置了四个按钮和四个标签。每个按钮都被分配了一个宽度为50和高度为50的图片。此外，所有按钮都有一个相应的标签，用于描述它们的用途。

我的目标是调整按钮和标签的大小，以便在不同设备上屏幕尺寸发生变化时保持按钮和标签的纵横比不变。我一直在玩自动布局改变拥抱和压缩来实现这一目标但尚未成功。任何帮助将不胜感激......

Answer 1

我认为你应该看一下UIStackView，因为这看起来完全是堆栈的一个用例。只需将每对按钮/标签放在一个堆栈中，然后将所有四对放入一个水平堆栈中，然后将其约束到单元格本身。您应该能够通过配置堆栈的属性（轴，分布，对齐，间距）来处理所有需要。

Answer 2

1. 将按钮和标签嵌入视图中。将此视图的宽度设置为内容视图的宽度，并将乘数值更改为1：4。这将根据superview调整视图的宽度。此外，为此视图将顶部和底部约束设置为0。

2. 将宽度和高度约束设置为50后，向按钮提供居中对齐y轴约束。将其顶部约束设置为您认为合适的值。

3. 将标签的前导和尾随约束设置为类似值8.选择文本的中心对齐方式。此外，为按钮及其超级视图提供顶部约束。

4. 复制视图并粘贴以创建三个视图，并为第一个视图提供相等的宽度约束。另外，提供它们的前导，尾随，顶部和底部约束。

Answer 3

以下是如何实现这一目标的快速教程：

1 -

完成第一个Gif：

请注意，您可以使用UIStackView

获得相同的输出