如何使用自动布局使超级视图适合最大的内在大小子视图

Question

我有一列具有内在尺寸（图像、标签等）的多个动态子视图。如何让超级视图适合自动布局中的子视图。

如果子视图不是动态的，我只会将最大子视图的前沿/后沿约束到超级视图。像这样

我认为我可以与前沿对齐，然后将尾部约束设置为 >= 8，逻辑是“如果子视图太窄，后沿可以大于 8，但如果子视图宽扩展超级视图，因此至少有 8 个后沿。”但是IB不喜欢这样

注意事项：

• 无法使用堆栈视图
• 子视图具有动态宽度。因此，在示例中，任何行都可能是最宽的。

Answer 1

按照以下步骤，

1. 向主视图添加一个视图（比如视图 A）。
2. 将所有三个标签（例如标签 1、标签 2、标签 3）作为子视图添加到视图 A。
3. 将视图 A 固定到其所有四个侧面的超级视图。将顶部、底部、左侧和右侧的约束更改为大于等于 (>=)10，其中根据需要设置优先级（因为如果内容扩展，可以避免视图 A 超出屏幕）。
4. 给标签1添加约束，即固定到视图A的顶部，左右两边，常量等于0。标签1底部固定到标签2顶部等于10，其中约束优先级根据需要设置.
5. 也按照相同的步骤标记 2。
6. 对标签 3 执行相同的步骤。即，将其固定到标签 2 的底部和视图 A 的右侧、左侧。将其固定到视图 A 的底部，其中底部约束应等于 0，优先级设置为低。

您可以根据自己的要求更改约束值。它会起作用的。 您可以将任何标签可以收缩的压缩阻力优先级更改为低。

更新：对于下面提到的 git 链接

为 ViewA 添加以下约束，

• ViewA 中心 X 和 Y 到 SuperView 中心 X 和 Y (=0 @1000)
• ViewA 前导和 SuperView 前导 (>=10 @1000)
• ViewA 尾随和 SupreView 尾随 (>=10 @1000)
• ViewA 顶部和 SuperView 顶部 (>=10 @1000)
• ViewA 底部和底部尾随 (>=10 @1000)
• Image1 to superview Leading,top (=0 @1000)
• Image1 到超级视图尾随 (>=0 @1000)
• Image1 到 Image2 底部 (=10 @1000)
• Image2 到 superview 前导 (=0 @1000)
• Image2 到超级视图尾随 (>=0 @1000)
• Image2 到 Image3 底部 (=10 @1000)
• Image3 到 superview 前导 (=0 @1000)
• Image3 到超级视图尾随 (>=0 @1000)
• Image3 到 superView 底部 (=0 @999)

然后选择 ViewA 并设置更新帧，仍然会出现红色标记，表示缺少约束。您仍然可以按照 xcode 的建议添加缺少的约束，但将其设置为 在构建时删除。更新框架并运行。希望它能按照您的要求工作。

Answer 2

好的，这就是我的工作方式。不确定这是否是最好的方法。

1. 将所有尾随约束设置为>=
2. 在超级视图上设置宽度
3. 为超级视图宽度约束创建一个出口
4. 在您的 ViewController 中，覆盖 viewDidLayoutSubviews()
   1. 计算所有子视图的最大宽度
   2. 将边距添加到该宽度
   3. 将超级视图宽度常量设置为计算的最大值