在 xib 文件的 TableViewCell 中显示可变数量的图像的最佳方法是啥？

Posted 2023-02-27

【中文标题】在 xib 文件的 TableViewCell 中显示可变数量的图像的最佳方法是啥？

【英文标题】：What's the best approach to display a variable number of images within a TableViewCell in a xib file?在 xib 文件的 TableViewCell 中显示可变数量的图像的最佳方法是什么？

【发布时间】：2017-03-20 15:45:52

【问题描述】：

我正在构建一个关于会议的应用程序，我想在其中显示每个会议单元中 VIP 参与者的预览。

这些参与者不可点击也不可滚动，唯一的目的是让他们快速一目了然。

问题在于视图非常动态：

VIP 出现时带有图片或姓名缩写 其余的与会者只是一个数字 如果 >5 个 VIP，圆圈开始重叠在一起（间距变小） 如果有 9 个 VIP，大环绕“所有 VIP 都出席”

这是它的外观：

我该怎么办？

CollectionView（看起来有点矫枉过正，因为我对与图像的任何交互都不感兴趣）？ 堆栈视图？ 图像（并以编程方式更改约束）？

注意：

这些只是表格视图单元的一种，但我们有更多的变化，所以我们在 xib 文件中构建自定义单元。 Xcode 不允许我将 Collection View Cell 添加到 xib 中的 Collection View 中。

【问题讨论】：

如果假设有 8 个 VIP，那么实际应该发生什么？像图像/名称应该可以滚动吗？因为如果您尝试将 8 一起显示，则会显得非常小。还是重叠罚款？他们应该如何出现将回答你应该做什么。

我的方法是使用 StackView 构建自定义视图，该视图根据其大小添加/删除 imagesViews 并自动添加/更改“+X”视图。必要时。

@Rikh 在 8 个 VIP 的情况下，它看起来像第 6 个单元格示例，圆圈重叠很多。我应该按照 -PEEJWEEJ 的建议去做吗？

@PEEJWEEJ 我从未使用过 StackViews，是否可以处理视图之间的动态和负间距？我会尝试这种方法，非常感谢:)

UIStackView 仅从 ios 9 开始，如果您支持 iOS 8，那么您将遇到问题。否则，如果它解决了您的问题，那就是最好的解决方案，我自己从未使用过UIStackView，所以我无法提供帮助:)。

【参考方案1】：

有趣的任务 - 我相信有很多方法，但这里有一个使用 UIStackView 加上一些即时计算。

这个想法是定义视图之间的最大间隙；所有视图的最大宽度；计算所需的实际间隙，然后让 UIStackview 处理实际定位。

当然不是您需要的所有功能，但应该让您朝着正确的方向前进。

您可以在此处查看/下载源代码：https://github.com/DonMag/ScratchPad

查看本示例的 Swift3/SpreadingViews 子项目。

【讨论】：

霍莉莫莉你是个天才！非常感谢，这正是我需要的：D

【参考方案2】：

可滚动视图（基于 UIScrollView 的 UICollectionView 视图）的问题在于，您必须处理滚动，或预先计算内容的宽度，这并不容易。出于这个原因，如果您不想拥有可滚动的内容，我不会使用 UICollectionView，也不会使用任何基于 UIScrollView 的视图。

然后您可以选择使用 UIStackView。堆栈视图非常适合“附加”多个视图并以非常简单的方式创建某种“堆”视图。但是，如果您不控制需要多少项目，您将超出容器视图的边界。

因此，我会这样做：

“固定容器视图宽度”案例：如果您的容器视图（您的单元格）具有固定宽度（永远不会改变），我将手动添加尽可能多的 UIImageViews 我想在XIB 本身，然后根据我要显示的项目数隐藏/取消隐藏它们。

“可变容器视图宽度”案例：如果您的容器视图（您的单元格）具有可变宽度（根据屏幕大小或任何其他因素而变化），那么您将不得不计算在任何情况下（算一算！）您可以在可用宽度内显示的项目数量。然后，您可以选择使用 UIStackView 还是手动将视图和约束添加到容器视图。

我说的有道理吗？

谢谢，

【讨论】：

我可以拥有参加者的数量，所以我可以控制这一点，但每次会议都会有所不同。问题是参与者可用的空间相对于单元格宽度（全屏宽度，因此会因不同设备而异）始终保持相同的 70%，但我担心的是圆圈之间的空间，它会改变视参加人数而定。所以我想我会尝试你建议的 StackView 方法，谢谢：D