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

Posted 2023-03-15

【中文标题】如何使用自动布局来调整表格视图单元格中的视图大小？

【英文标题】：How to use auto layout to resize views in a table view cell?

【发布时间】：2017-10-23 04:26:55

【问题描述】：

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

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

【参考方案1】：

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

【讨论】：

我错过了分发。谢谢。

【参考方案2】：

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

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

将标签的前导和尾随约束设置为 8 之类的值。选择文本居中对齐。此外，为按钮提供顶部约束，为其父视图提供底部约束。

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

【参考方案3】：

这里有一个快速教程，说明如何实现这一目标：

1-

2- 完成第一个 Gif：

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