具有动态大小的单元格的复杂AutoLayout [英] Complex AutoLayout for Cell with dynamic size

问题描述

我有一个单元格包含一个容器，有10个子视图（其中两个是简单的边界，其他是标签）。方案看起来像这样。

I have a cell that contains a container with 10 subviews (two of them are simply bounds and the others are labels). The scheme looks like this.

>

动态标签可能包含巨大的文本，因此单元格应符合适当的大小以适合内容。问题是如何手动设置所有的约束...我已经尝试了十几次自己做，但似乎我不是那么好。表视图支持行高的自动尺寸，并使用自定义估计高度。

Dynamic labels may contain huge text so the cells should conform the appropriate size to fit the content. The question is how to set up all the constraints manually... I've tried a dozen of times to do it myself but seems I'm not that good at this. The table view supports auto dimension for row height and uses custom estimated height.

在故事板中看起来是这样的。

In Storyboard it looks this way.

其中蓝色视图是视图C 的子视图。后面的灰色视图是视图B 。粗体标签是静态的，其他是动态的。

Where blue views are a subviews of View C. A grey view behind is a View B. Bold labels are static and the others are dynamic.

演示项目。

如何设置约束？

非常感谢！

推荐答案

设置约束，以便获得所需的结果。这是我得到的：

I managed to setup your constraints so that you get the result you needed. This is what I get:

我希望这是你想要的样子。

I hope this is how you wanted it to look like.

项目的链接。
我将尝试解释如何添加约束，使它更有意义。

Here is a link with the project. I will try to explain how I added the constraints so that it makes more sense.

• 首先， B，它需要与 contentView 一样大。为此，您可以向superView添加top / bottom / left / right约束。由于您使用的是自动维度，如果您添加所有优先级为1000（最大值）的约束，则在运行时会出现一些与约束有关的错误。这是因为，在单元格大小可以自动计算之前为零，因此约束崩溃。因此，我为优先级为999的顶部和尾部空间设置优先级，以便您不再看到错误日志。


• 然后，您需要将视图C的需要（顶部或底部）/左/右和高度约束


• 标签的约束。因为你需要正确的，有多行，约束需要指定这种特定情况下的垂直布局。所以，你有如下：第一个标签：顶部/左边的名称标签和权利到超级视图。


• 对于不需要调整大小的标签，只需要前导空格为父级，水平空格为右标签和静态宽度。此外，您需要一个约束来将顶部与右侧的标签对齐。

• First of all, you have view B which needs to be as big as the contentView. For this you add top/bottom/left/right constraints to the superView. Because you are using automatic dimensions, if you add all constraints with priority 1000(the maximum one), you will get some error with the constraints while running. This is because, before the cell size can be calculated automatically it is zero, so the constraints crash. Therefore, I set the priority for top and trailing space with a priority of 999 so that you don't see the error log anymore. The result is the same.
• Then views C needs (top or bottom)/left/right and height constraint
• Then you need to add the constraints for the labels. Since you need the right ones to have multiple lines, the constraints need to specify the vertical layout for this particular case. So, you have as follows: first label: top/left to name label and right to super view. All the other have top to the previous one,and bottom to the next one.
• for the labels that don't need to resize you just need leading space to parent,horizontal space to the right label and static width. Also, you will need a constraint to align the top with the label on the right.

这是我得到的结果：

This is the result I get:

希望我的解释有意义，只是让我知道如果你有问题。祝您的项目顺利！

Hope my explanation made sense, just let me know if you have questions. Good luck with your project!

这篇关于具有动态大小的单元格的复杂AutoLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！