使用 AutoLayout 在不同高度的两列中堆叠

针对 iOS 8.1

我正在使用 AutoLayout 在 TableCell 中布置多个标签。其中一些标签是可选的，有些可以包裹它们的文本。它们分为两个“列”，这些列只是 TableCell 的 ContentView 中的两个 UIView。我的约束是通过编程应用的。

第二次更新

Without SwiftArchitect 的回答下面我不会解决这个问题并接受他的答案。然而，因为我的全部都是代码，在自定义表格单元中，我还添加了一个下面单独回答

UPDATE

为了阻止标签拉伸到比所需尺寸更大的尺寸，我之前设置了SetContentHuggingPriority and SetContentCompressionResistancePriority到 1000，因为我相信这相当于说“我希望标签将其内容保持在准确的高度，并且我不希望它被垂直压缩” 正如您在下面的红色和粉色示例中看到的那样，自动布局显然没有遵守此请求。

this.notesLabel.SetContentHuggingPriority(1000, UILayoutConstraintAxis.Vertical);
this.notesLabel.SetContentCompressionResistancePriority(1000, UILayoutConstraintAxis.Vertical);

我删除了这些优先级的设置，并且标签不再被压扁，这是我最初的问题。当然，现在某些标签已经超出了它们需要的高度。

1. 为什么删除拥抱和压缩优先级可以修复我的问题 问题？
2. 如何使红色框中的文本（红色框不是稍后添加的单元格的一部分）不展开而不返回到上一问题？

以下是设置压缩和拥抱优先级时的一些屏幕截图。背景颜色用于调试

一般问题是包含视图（紫色和红色）的大小调整为两者中较小的一个。正如您在顶部看到的，“优先级 3”被删除，因为左列容器不需要更高。

在下一个示例中，没有优先级标签，但 EventDate 被压缩。

以下答案已被编写并测试。它适用于 iPhone 和 iPad、纵向和横向。最高的柱子获胜，另一根柱子只占用它所需的空间。如果需要的话，甚至可以将其修改为垂直居中的对象。它解决了垂直剪切标签问题以及动态缩放。

初步建议

• Use a Storyboard如果可以的话。您可以使用最先进的 GUI 直观地测试所有约束。
• Do not修补拥抱、压缩，甚至UILabelheight：让每个标签在垂直方向占据它需要的空间，并且只添加顶部和侧面锚点
• 使用额外的视图作为容器来定义每列的宽度。使用multiplier比如说，三分之二和三分之一。
• 让这些视图通过向最低标签的底部添加单个高度约束来计算其理想高度（leftColumn.bottom Equal lowerLeftLabel.bottom）
• 不要动态添加或删除视图；相反，隐藏它们以便它们保留相关的约束。

解决方案描述

为简单起见，我创建了 2 个子视图，每列 1 个，并将它们并排放置。它们锚定在上/左和上/右，计算它们的宽度，并且从它们各自的内容(*)导出它们的高度。

左右子视图各有1/2multiplier，我添加了一个constant2 像素的边距。这两列内的标签左右锚定（leading space到容器和trailing space到容器），边距为 8 像素。这可确保标签不会渗出其色谱柱。

1. 考虑一下你的身高UITableViewCell是 2 个内列中最大的一个。换句话说，containerView.height >= left.heightand容器视图.高度 >= 右.高度。
2. 确保您没有删除任何不可见标签。view.hidden不会破坏你的约束，这就是你想要的。
3. 锚定每个UILabel容器的左侧和右侧，容器的最上面，但每个后续的 label.top 都应该锚定到.bottom它上面的一个。这样，您的内容将flow。如果需要，您可以添加边距。

(*) 最后的关键是将每列的高度与列上的约束联系起来，使其等于.bottom该列的最低标签。在上面的示例中，您可以清楚地看到蓝色背景的右列比左列短。

虽然我看到您想要代码中的解决方案，但我使用Storyboard不到 15 分钟。它不仅仅是一个概念，更是一个实际的实施。它正好有0行代码，并适用于所有 iOS 设备。顺便说一句，它还0 bugs.

所有约束的列表

注意到处都有 >= 。它们是使您的柱子独立高的关键。

The NSLayoutContraint几乎相同L and R.

获取故事板here，以及一篇详细的文章there.