具有不同元素组合的自动布局

Posted 2023-02-23

【中文标题】具有不同元素组合的自动布局

【英文标题】：Auto-layout with different combinations of elements

【发布时间】：2014-06-08 07:21:58

【问题描述】：

我有一个 UITableViewCell 有几个不同的图标，可以以不同的组合显示。这是一个例子：

在这种情况下，有 4 种不同的组合：

所有 3 个元素都显示在屏幕上（如图所示）-> 在这种情况下，所有元素彼此等距 三个元素中有两个正在显示 -> 在这种情况下，两个元素应该更优雅地占据空间，因此 contentView 到 firstIcon，firstIcon 到 secondIcon，并且 secondIcon 和 contentView 的底部应该都等距李> 三个元素之一正在显示 -> 在这种情况下，一个元素应该在屏幕上居中 没有显示任何元素

我试图弄清楚在这种情况下如何布局约束，理想情况下不必在代码中执行此操作，在 tableview 滚动时在运行时删除和添加所有这些约束，这可能会使滚动生涩.

有没有办法在设计时让它工作？也许通过对每个图像尽可能垂直居中设置一些约束，并且只有在有其他元素时才让它抵抗。丢失的元素可能会被“隐藏”或从 contentView 中完全删除（以最有效的方式）。

【参考方案1】：

我认为您的设计时解决方案行不通。没有您可以指定的约束 - 隐藏视图参与布局，如果您要删除视图，那么您正在删除约束。

不要假设约束更新会给您带来性能问题 - 先做最简单的方法，然后测量。

在这种情况下，最简单的方法可能是使用容器视图来保存您的三个图标。这可以固定在单元格的顶部和底部，并且与右边缘保持正确的距离。这些约束不会改变。

所有三个图像视图都可以添加到此容器中。在水平方向上，它们不需要约束——它们可以在 x 轴上默认为零并且具有固有宽度。

根据单元格内容，您可以将每个图像视图设置为可见或不可见，删除容器视图上的约束，然后添加新的约束以提供垂直位置。最简单的一组约束是在容器视图的底部使用乘数。您将每个可见图像视图的中心 Y 约束到适当的乘数 - 如果只有一个可见，乘数 0.5，如果有两个，0.33 和 0.66，并且对于所有三个，0.25、0.5 和 0.75。

这不是一组复杂的约束，如果它导致滚动问题，我会感到惊讶。

【讨论】：

Dangit - 这几乎是我刚刚提出的建议......尽管我正在努力将其概括为循环并根据图像数量添加约束。

听起来很有效率。但我对几件事感到困惑：容器视图的高度是否会根据元素的数量而缩小？还是它保持不变，在内容视图中垂直居中，只有其中的元素发生了变化？此外，当您说图像视图应包含乘数时；它被限制在什么范围内？相邻的图像，还是容器视图？

@mc01 循环是我所做的，它非常简单，但我在手机上输入了这个答案，所以我尽量避免使用代码......

容器视图保持相同大小（单元格的全高）。每个图像都相对于容器的高度受到限制。

如何将图像的 centerY 约束到其父视图的高度？当我尝试这个时：NSLayoutConstraint *att1 = [NSLayoutConstraint constraintWithItem:self.firstIcon attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.iconContainerView attribute:NSLayoutAttributeHeight multiplier:0.5 constant:0]; 但它给了我一个错误“[NSLayoutConstraint constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:]: Invalid pairing of layout attributes”