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

Posted 2021-04-17

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

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

答案

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

另一答案

1. 将按钮和标签嵌入视图中。将此视图的宽度设置为内容视图的宽度，并将乘数值更改为1：4。这将根据superview调整视图的宽度。此外，为此视图将顶部和底部约束设置为0。
2. 将宽度和高度约束设置为50后，为按钮提供中心对齐y轴约束。将其顶部约束设置为您认为合适的值。
3. 将标签的前导和尾随约束设置为类似值8.选择文本的中心对齐方式。此外，为按钮和超级视图提供顶部约束。
4. 复制视图并粘贴以创建三个视图，并为第一个视图提供相等宽度约束。另外，提供它们的前导，尾随，顶部和底部约束。

另一答案

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

1-

2-完成第一个Gif：

请注意，您可以使用UIStackView实现相同的输出