表视图单元格中复杂视图的自动布局答案

【问题标题】：Auto Layout for complex view in Table View Cell表视图单元格中复杂视图的自动布局
【发布时间】：2016-10-17 06:02:11
【问题描述】：

我知道这可能不是最好的问题，但我真的需要一个起点：

如果我想创建如下布局（使用自动布局）：

我尝试的是：

将三个零放在水平堆栈视图中
然后将三个标签（帖子、关注者、关注者）放在水平堆栈视图中。
然后将上面的两个水平堆栈视图放到一个垂直堆栈视图中。
然后，我将（帖子、关注者、关注）标签下方的灰色按钮添加到上方创建的垂直堆栈视图中。所以最后我得到了一个垂直堆栈视图，由两个水平堆栈视图和灰色按钮组成。
最后，我将图像添加到上述步骤中创建的垂直堆栈视图的左侧，从而形成最终的水平堆栈视图。这一步完全破坏了我的布局。使图像宽度为 500，使堆栈视图离开屏幕。因此，我将包含图像、灰色按钮和两个水平堆栈视图的最后一个水平堆栈上的布局约束设置为Bottom Space: 140, Top space 10, Leading Space 20, Trailing space 20。（我没有接触这个最终堆栈视图中的堆栈视图。我只在此步骤中创建的主水平堆栈视图上放置了布局。

4bar 建议后：

请注意，我没有触摸底部的名字、facebook.com 或生物标签。

【问题讨论】：

标签： ios autolayout

【解决方案1】：

如果你没有为最外层的水平堆栈视图设置分布模式，它将默认为 UIStackViewDistributionFill，在这种情况下，排列的子视图将根据它们的拥抱优先级拉伸以填充整个宽度。增加图像视图上的内容拥抱优先级（例如，提高到 251）以防止其拉伸。此外，如果图像尺寸大于您想要为其分配的空间，您可能还需要在图像上设置额外的宽度或高度限制以覆盖其固有尺寸。

要了解的主要内容是 UIStackView 的大小由其排列的子视图的固有大小以及间距驱动。在填充模式下，如果可用空间过多，则使用内容拥抱优先级来确定要拉伸哪个视图；如果可用空间太少，则使用抗压缩优先级来确定要压缩的视图。

【讨论】：

好的，所以我将分配模式更改为平均填充。现在看起来好多了。我在上面的帖子中更新了它的外观。现在继续上图。我可以限制图像视图的宽度和高度并使模式方面适合吗？它似乎像我上面的帖子一样工作。
由于某种原因，即使帖子标签在主故事板中显示为p...，但由于某种原因，当我运行实际应用程序时它显示为posts。你知道原因吗？那是因为在我运行应用程序时计算了抗压性，并且它会根据我在主故事板中的约束期间设置的抗压性优先级进行检查？
要给右侧垂直堆栈最大的空间量，您可能需要 Fill 而不是 FillEqually；然后调整相对内容拥抱优先级，以便右侧视图伸展而左侧视图不伸展。然后，是的，您还可以在图像视图上设置宽度、高度和/或纵横比约束。
不确定为什么您在故事板中的预览与您在设备上看到的不匹配。您是否将预览大小设置为匹配？
取决于您选择的分发模式；再次，点击上面文档的链接，查看拥抱/压缩优先级在每种模式中扮演的角色的详细信息。这些优先级是在排列的子视图上设置的，即标签。另一个例子，回到你原来的问题，你会在右侧垂直堆栈视图上设置拥抱优先级，相对于左侧图像视图，因为它们是最外层水平堆栈的排列子视图。（您可以将他们视为兄弟姐妹。）

【解决方案2】：

如下图，需要设置包含图片的stackView的宽度。

【讨论】：

【解决方案3】：

如果您希望图像看起来像一个正方形，则必须将图像的宽度和高度固定为相同的值。然后将 Mode 设置为 AspectFit 以使图像看起来不会被拉伸。固定标签的宽度，如“帖子”。这样他们就会显示整个文本。

【讨论】：