如何使用情节提要在 Tableview Cell 中为 2 个标签和一个图像视图设置约束？

Posted 2023-03-29

【中文标题】如何使用情节提要在 Tableview Cell 中为 2 个标签和一个图像视图设置约束？

【英文标题】：how to setup constraint for 2 labels and one image view in Tableview Cell using storyboard?

【发布时间】：2018-11-06 16:44:58

【问题描述】：

我是快速开发的新手。我被困在某一时刻。我想并排添加 2 个标签和一个图像视图，如下图所示。我尝试了很多组合，但无法达到预期的效果。我什至尝试将两个标签放在一个容器视图中，将图像视图放在另一个容器视图中，并为其设置约束，但没有成功。下面是我想要实现的输出。

我们将不胜感激。

【问题讨论】：

您可以使用UIStackview。它更容易。

【参考方案1】：

应用如下约束：

标签 1：

标签 2：

图像视图：

希望对你有帮助。

【参考方案2】：

我认为，一张图片可以更好地代表它。请按照以下步骤将约束应用于您的视图：

1) 将尾随、宽度和高度应用于您的图像视图。仍然没有 y 位置会引发错误。将在下一张图片中处理。

2) 对齐图像视图，垂直居中到超级视图。

3) 也为您的时间标签执行与第 1 步和第 2 步相同的操作。只需给出前导约束而不是尾随。

4) 将前导和尾随约束赋予名称标签并将其垂直居中对齐到超级视图。因为您已经为时间标签和图像视图指定了宽度，所以它将覆盖剩余的可用宽度，前后各有 3 px 的填充。

5) 现在，您将看到此视图的警告，这是因为您已固定时间标签的宽度，如果此标签的文本变大会怎样？您可以通过2种方法处理这种情况

*首先，将autoshrink 属性从Fixed Font Size 更改为Minimum Font Scale，系数为0.5。但它只会处理此案，不会删除警告。 *

第二，更新时间标签的宽度约束为>=。但它会再次产生错误，因为将约束更新为>= 将与名称标签的自动宽度检测冲突。为了解决这个问题，请关注下一张图片

6) 减少名称标签的Horizontal Content Hugging Property。

【讨论】：

您的解决方案有效，但是当我更改方向时，图像视图超出了 iPhone X 中的 Tableview。

太棒了 完美的工作。我的 tableview 在左右两边都有空间，这就是 iPhone X 中图像视图出现在外面的原因。谢谢。

【参考方案3】：

您可以使用水平堆栈视图。您可以水平放置标签和图像。