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

Question

针对iOS 8.1

我正在使用AutoLayout在TableCell中布置一些标签.其中一些标签是可选的,有些可以包装它们的文本.它们分为两个"列",这些列只是TableCell的ContentView中的两个UIView.我的约束以编程方式应用.

第二次更新

如果没有SwiftArchitect的答案,我就不会解决这个问题并接受了他的回答.但是因为我的所有代码都在自定义的tablecell中,所以我在下面还添加了一个单独的答案

UPDATE

在试图从伸展到比他们需要的是我以前设定的扩大停止标签SetContentHuggingPriority,并SetContentCompressionResistancePriority以1000作为我belived这是说相当于" 我希望标签的内容拥抱它的确切高度和我不希望它被垂直压缩 "AutoLayout显然没有遵守此请求,您可以在下面的红色和粉红色示例中看到.

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

我删除了这些优先级的设置,标签不再被压扁,这是我原来的问题.当然,现在某些标签已经超出了他们需要的高度.

1. 为什么删除Hugging和Compression优先级可以解决我的问题？
2. 如何在不返回我之前的问题的情况下将红色框中的文本(红色框不是后面添加的单元格的一部分)放到不扩展中？

下面是一些屏幕截图,介绍了压缩和拥抱优先级设置时的效果.背景颜色用于调试

一般的问题是包含视图(彩色紫色和红色)正在测量两者中较小的一个.正如你在前面看到的那样,"优先级3"正在被削减,因为左列容器不需要更高.

在下一个示例中,没有Priority标签,但EventDate正在被压缩.

Answer 1

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

初步建议

• Storyboard如果可以,请使用.您可以使用最先进的GUI直观地测试所有约束.
• 不要不与拥抱,压缩,甚至是鼓捣UILabel高度:让每一个标签把它垂直需要空间,并且只添加顶部和侧面的锚
• 使用额外视图作为容器来定义每列的宽度.用multiplier得到的,说的三分之二和三分之一1.
• 让这些视图通过在最低标签的底部添加单个高度约束来计算它们的理想高度(leftColumn.bottom Equal lowestLeftLabel.bottom)
• 不要动态添加或删除视图; 相反,隐藏它们以便它们保留相关的约束.

解决方案描述

为简单起见,我创建了2个子视图,每列1个,并将它们并排放置.它们锚定在顶部/左侧和顶部/右侧,计算它们的宽度,并且它们的高度来自它们各自的内容(*).

左右子视图有一个1/2 multiplier,我为其添加了constant2个像素的边距.这两列中的标签左右锚定(leading space到容器和trailing space容器),边距为8像素.这确保没有标签在其色谱柱之外渗出.

1. 请考虑您的高度UITableViewCell是2个内部列中最大的.换句话说,containerView.height> = left.height 和 containerView.height> = right.height.
2. 确保您没有删除任何不可见的标签.view.hidden不会破坏你的约束,这就是你想要的.
3. 将每个UILabel左侧和右侧锚定到容器,最上面的容器也固定到容器,但是每个后续的label.top应该锚定到容器.bottom上方的一个.这样,您的内容就会流动.您可以根据需要添加边距.

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

虽然我看到你想要一个代码解决方案,但我Storyboard在不到15分钟的时间内使用a创建了我的示例.它不仅仅是一个概念,而是一个实际的实现.它只有0行代码,适用于所有iOS设备.顺便说一句,它也有0个错误.

所有约束列表

注意> =洒在这里和那里.它们是使您的列独立高的关键.

的NSLayoutContraint是几乎相同的大号和- [R .

在这里获取故事板,并在那里找到详细的文章.