如何在 stackView 中定位 imageView 和标签，使我能够根据它们的状态调整它们的大小？

Posted 2023-03-15

【中文标题】如何在 stackView 中定位 imageView 和标签，使我能够根据它们的状态调整它们的大小？

【英文标题】：How can I position an imageView and a label in a stackView in a way that enables me to resize them according to their state?

【发布时间】：2019-09-09 15:50:23

【问题描述】：

我正在编写一个测验应用程序。问题显示在 tableView 中，其中有 2 种单元格。QuestionCell 和 MultipleChoiceCell。对于每个问题，我有一个 QuestionCell 和 4 个 MultipleChoiceCells。

问题：

如果单元格由文本组成，这就是 multipleChoiceCells 的外观。

如果它们由照片组成，它们应该是这样的。

这是一个多重选择单元

即使选项至少包含照片，imageView 旁边的标签也会为每个问题显示“A) 或“B)”或“C)”或“D)”。还有 imageView 的宽度高度为 150。

如果 multipleChoiceCell 包含该问题的文本且没有图像，那么它应该使用 stackView 的所有宽度。

在过去 8 小时内，我尝试了许多不同的方法，无论是否使用 stackViews，但找不到解决方案。我最接近的解决方案是不使用 stackView，但它在 iPhone 5s 屏幕尺寸上失败了。我上面显示的屏幕截图来自我 iPhone X 上的那个解决方案。

我该如何解决这个问题？请给我一些启发...

编辑：当使用堆栈视图时，会出现以下问题。MultipleChoiceCell 有图像，但我仍然需要标签来显示“A”“B”“C”或“D”。而且无论如何标签都占用太多空间我愿意。

【问题讨论】：

你的问题不清楚... “在iPhone 5s屏幕尺寸上失败了” ...它是怎么失败的？也许添加一个屏幕截图，说明它在 5s 上的外观？

5s上根本看不到标签。我将尝试还原并截取屏幕截图。不过这需要一些时间......

对于stack view的解决方案，如果在不需要的时候隐藏image view，是不是文字标签不会占满？

@DavidSteppenbeckPhD 使用 stackViews 的问题恰恰相反。标签占用了太多空间。我用截图编辑了这个问题。

我的意思是，如果您只有有文字但没有图像，那么文字应该填满单元格的整个宽度，对吧？

【参考方案1】：

我认为使用UIStackView 是可行的方法。您只需要确保正确设置某些约束和拥抱优先级即可获得所需的外观。如果我对您的理解正确，我认为这就是您想要的：

我将label 和imageView 嵌入到具有属性的水平stackView 中：

stackView.alignment = .fill
stackView.distribution = .fill
imageView.contentMode = .left

另外，imageView 具有 150 的固定高度限制，但没有宽度限制。 label 的水平拥抱优先级为 751。

(i) 如果您希望 label 中的文本填充整个宽度（但没有图像），请执行以下操作：

imageView.isHidden = true
label.numberOfLines = 0

(ii) 如果您需要短文本，例如 A) 等和图像，请执行以下操作：

imageView.isHidden = false
label.numberOfLines = 1

【讨论】：

事实上，您甚至可以将标签拥抱优先级设置为 required (1000)，然后您可能只需要保持 lab​​el.numberOfLines = 0。玩转看看！

感谢您的回答。我花了一整天的时间试图弄清楚这一点。我现在正在尝试解决另一个小问题。这样做之后，由于 imageView 的高度，tableviewCell 的高度始终为 150。由于 autoDimension 已打开，我需要在没有图像时为 60，以便单元格大小对于短文本（可点击区域）不会太小，而在有图像时为 150。所以我在玩 imageView 高度约束。我将其设置为更大 >= 60，但由于原始图像尺寸要大得多，这成为一个问题。现在我正在努力解决这个问题。

只要把高度约束放在stackView而不是imageView上，根据情况更新它的constraint.constant值。

工作就像一个魅力。非常感谢。