使用自动版式不同高度的两列内堆放 [英] Using AutoLayout to stack within two Columns of varying Heights

问题描述

目标定位的iOS 8.1

Targetting iOS 8.1

我使用自动版式奠定了一些在TableCell的标签。其中一些标签是可选的，有些可以包装自己的文字。他们在两个列分裂，这些列只是在的TableCell的内容查看2 UIViews。我的约束编程应用。

I am using AutoLayout to lay out a number of Labels in a TableCell. Some of those Labels are optional and some can wrap their Text. They are split across two "Columns", these columns are simply two UIViews in the TableCell's ContentView. My constraints are applied programatically.

第二次修订

没有<一个href=\"http://stackoverflow.com/questions/31658526/using-autolayout-to-stack-within-two-columns-of-varying-heights#answer-31804168\">SwiftArchitect's回答下面我不会已经解决了这个并接受了他的答案。但是，由于我的是所有code，在自定义的TableCell的，我还添加了一个<一个href=\"http://stackoverflow.com/questions/31658526/using-autolayout-to-stack-within-two-columns-of-varying-heights/#31835503\">separate下面答案

Without SwiftArchitect's answer below I would not have solved this and have accepted his answer. However because mine is all in code, in a custom tablecell, I have also added a separate answer below

更新

在试图从伸展到比他们需要的是我已经previously设置较大停止标签 SetContentHuggingPriority 和 SetContentCom pressionResistancePriority 1000，因为我belived这是说相当于的我希望标签的内容拥抱它的确切高度，我不希望它永远是COM $ p $垂直pssed 的
这一要求显然没有得到遵守由自动版式，你可以在下面的红色和粉红色的例子看看。

In an attempt to stop the labels from stretching to a size larger than they needed to be I had previously set the SetContentHuggingPriority and SetContentCompressionResistancePriority to 1000 as I belived this was the equivalent of saying "I want the Label to hug its content to its exact height and I do not want it to ever be compressed vertically" This request was clearly not being complied with by AutoLayout as you can see in the Red and Pink examples below.

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

我删除这些优先事项的设定和标签不再被压扁这是我原来的问题。当然，现在的某些标签被拉伸超过他们需要的高度。

I removed the setting of these priorities and the labels are no longer being squashed which was my original issue. Of course now certain labels are stretched beyond the height they need to be.

1. 为什么删除抱死，并且通讯pression优先解决我的
   问题？


2. 我怎样才能在红色框中的文本（红色框而不是后来添加的细胞的一部分）不扩大，而不必回到我的previous问题？

下面是几个什么都看起来像当COM pression和拥抱优先设置在哪里截图。背景颜色是用于调试

Here are a couple of screenshots of what it did look like when the Compression and Hugging priorities where set. The background colours are for debugging

的一般问题是，含视图的（有色紫色和红色）进行自己施胶的两个中较小的。正如可以在上面的一个优先级3看到的是被切割，因为左边的列容器不需要任何更高

The general problem was that the Containing View's (colored purple and red) were sizing themselves to the smaller of the two. As you can see in the top one "Priority 3" is being cut because the left column container doesn't need to be any higher.

在接下来的例子中，没有优先级标记，但EVENTDATE被压扁。

In this next example there is no Priority label but the EventDate is being squashed.

推荐答案

的以下的答案已经被编写和测试。它工作正常在iPhone和放大器; iPad的肖像和放大器;景观。最高塔获胜，而另一只需要所需的空间。如果需要的话它甚至可以被修改，以垂直居中对象。它解决了垂直限标签的担忧，以及动态扩展。的

preliminary建议

• 如果您可以使用故事板。你可以用国家的最先进的图形用户界面直观地​​测试所有的约束条件。


• 请不可以鼓捣拥抱，COM pression，甚至的UILabel 高度：让每一个标签把它垂直所需的空间，和只添加顶部和侧面锚

作为容器
• 使用额外的观点来定义每个列的宽度。使用乘数来得到，说三分之二和三分之一1。


• 让这些观点通过将一个高度约束到最低标签的底部（leftColumn.bottom平等lowestLeftLabel.bottom）计算出自己的理想高度


• 不得添加或删除动态的看法;相反，隐藏他们，让他们preserve相关的限制。

• Use a Storyboard if you can. You can test all your constraints visually with a state-of-the-art GUI.
• Do not tinker with hugging, compression, or even UILabel height: let each label take the space it needs vertically, and only add top and side anchors
• Use extra views as containers to define the width of each column. Use multiplier to get, say 2 thirds and 1 third.
• Let these views calculate their ideal height by adding a single height constraint to the bottom of the lowest label (leftColumn.bottom Equal lowestLeftLabel.bottom)
• Do not add or remove views dynamically ; rather, hide them so that they preserve the associated constraints.

解决方案说明

为了简单起见，我已经创建2子视图，1的每一列，并且通过侧位于它们一侧。它们锚定在顶端/左侧和顶部/右，它们的宽度进行计算，并且其高度是从它们各自的含量（*）的。

For simplicity, I have created 2 subviews, 1 for each column, and positioned them side by side. They are anchored on top/left and top/right, their width is calculated, and their height is derived from their respective content(*).

左边和右边的子视图有1/2 乘数，而我加常数的 2的像素保证金。这两列内的标签固定左，右（前导空格集装箱和尾随空格集装箱），与8像素的余量。这确保没有标签永远流血超出其列。

The left and right subviews have a 1/2 multiplier, to which I added a constant of 2 pixels for margin. The labels inside these two columns are anchored left and right (leading space to container and trailing space to container), with an 8 pixels margin. This ensure no label ever bleeds beyond its column.

1. 考虑到的高度，你的的UITableViewCell 是最大的2个内列。换句话说，containerView.height> = left.height 和 containerView.height> = right.height。


2. 确保您不会删除任何无形的标签。 view.hidden 不会破坏你的约束，那就是你想要的。


3. 锚每个的UILabel 左，右的容器中，最上面的容器为好，但以后每label.top应固定在 .bottom 之一，它上面的。这样，你的内容的流量的。如果你愿意，你可以添加利润。

1. Consider that the height of your UITableViewCell is the largest of the 2 inner columns. In other words, containerView.height >= left.height and containerView.height >= right.height.
2. Ensure you are not deleting any of the invisible labels. view.hidden will not disrupt your constraints, and that is what you want.
3. Anchor each UILabel left and right to container, the uppermost to the container as well, but every subsequent label.top should be anchored to the .bottom of one above it. This way, your content will flow. You can add margins if you want.

（*）的最后一个关键是约束，以配合​​每一列的高度上列等于 .bottom 该列的最低标签。在上面的例子中，你可以清楚地看到，右列，背景为蓝色，比左边的要短。

(*) The final key is to tie the height of each column with a constraint on the column to equal the .bottom of the lowest label for that column. In the example above, you can clearly see that the right column, with a blue background, is shorter than the left one.

当我看到你就想code的解决方案，我在不到15分钟用故事板创建我的榜样。它不仅是一个概念，它是一个实际的实施。它具有完全相同的 0线code ，并适用于所有iOS设备。顺便说一句，这也 0的错误

While I see you wanted a solution in code, I created my example using a Storyboard in less than 15 minutes. It is not merely a concept, it is an actual implementation. It has exactly 0 lines of code, and works on all iOS devices. Incidentally, it has also 0 bugs.

所有约束列表

的的通知> =这里和那里洒。他们是关键，让你单独列高大。的

的 NSLayoutContraint 是几乎相同的→和研究

这里获取故事板，以及详细的文章的有的。

这篇关于使用自动版式不同高度的两列内堆放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！