时间戳

首页 > 解决方案 > UITableView 内的内部内容大小的 UICollectionView

ios - UITableView 内的内部内容大小的 UICollectionView

问题描述

让我先说在过去的几个月里我花了大约 100 个小时搜索 Google 和 StackOverflow 试图回答这个问题。我已经遵循了许多教程，但无法解决我的问题。每一个都是一个重大的失望，令人沮丧。

期待

期待

现实

现实

问题

我有一个包含 UIView 的 UITableView。UIView 具有自动布局约束，将其固定在单元格边缘 15pt 处，然后我给它一个阴影和圆角。在那个 UIView 里面，我有几个标签，然后是一个 UICollectionView 和一个堆栈视图。

我的 UICollectionView 的高度一直为 0，我不知道如何使它具有内在大小。我似乎可以让它正确显示的唯一方法是通过情节提要内的自动布局强制它具有特定的高度（这是我为截取此屏幕截图所做的）。不幸的是，强迫这样的高度是不现实的，原因有两个：

  1. 高度根据设备的宽度而变化。由于图像是正方形，因此高度松散地（但不完全）是设备宽度的一半。
  2. 如果没有图像，则集合视图的高度应为 0。

看起来应该可以在这里使用流布局的内在内容大小。

故事板

故事板

约束

我在每个标签、集合视图和堆栈视图之间有大约 15pt 的空间（因此，垂直空间）。集合视图原型单元格中有一个图像视图。图像视图的顶部、底部、尾部和前导空间都设置为集合视图单元格的 0，并且比例为 1:1。

集合视图布局

为了实现一张大图和四张小图的布局，我使用了 SNCollectionViewLayout。

数据源/委托

在我的控制器中viewDidLoad，我estimatedRowHeight将 UITableView 设置为 400，并将 设置rowHeight为UITableView.automaticDimension.

在 tableView cellForRowAt 中，我将一个可重用的自定义UITableViewCell类出列，在表格视图单元格上设置各种出口，并为表格视图单元格调reloadData()用集合视图。在情节提要中，我将表格视图单元格设置为集合视图的数据源和委托。

在表格视图单元格的awakeFromNib函数中，我设置了圆角半径、阴影，并使用以下代码在集合视图上进行流布局（您可以在他们的示例中看到）：

let snCollectionViewLayout = SNCollectionViewLayout()
snCollectionViewLayout.fixedDivisionCount = 4
snCollectionViewLayout.delegate = self
snCollectionViewLayout.itemSpacing = 10
collectionView.collectionViewLayout = snCollectionViewLayout

我还SNCollectionViewLayoutDelegate通过编写以下函数实现了可选协议：

func scaleForItem(inCollectionView collectionView: UICollectionView, withLayout layout: UICollectionViewLayout, atIndexPath indexPath: IndexPath) -> UInt {
    if indexPath.row == 0 || collectionView.numberOfItems(inSection: indexPath.section) <= 2 {
        return 2
    } else {
        return 1
    }
}

这个函数就是为什么第一张图像的高度和宽度是其余图像的两倍。

研究

为了弄清楚这一点，我检查了collectionView.collectionViewLayout.collectionViewContentSize表格视图单元格的 cellForRowAt 和 willDisplay 方法。无论哪种情况，它都是 (0,0)。

我还尝试在集合视图单元格的 cellForItemAt 和 willDisplay 中检查它。除非我向集合视图添加高度约束以使其变高，否则这些日志行甚至不会打印，但是我没有一个好的方法可以将高度降低到应有的水平，并且任何时候我我试过了，我得到了冲突的约束警告和非常不稳定的拉伸视图（例如堆栈视图被完全压扁）。

在测试中，我强制设置了一个足够大的高度约束以使集合视图适合，当这种情况发生时，它会正确呈现并且集合视图内容大小是正确的，所以我知道它能够跟踪（可以看到在这里）。

有没有人对此有任何见解？如果您有任何要研究的细节，我很乐意提供更多代码。我试图给出全貌，同时尽可能短（我知道它很长）。

我觉得这个问题与表格视图单元格内的集合视图有关。

提前致谢。

标签： iosswiftuitableviewuicollectionviewintrinsic-content-size

解决方案

在表格视图单元格中保持高度约束连接。

@IBOutlet weak var collectionViewHeightConstraint: NSLayoutConstraint!

并根据高度计算以编程方式更新高度约束值

self. collectionViewHeightConstraint.constant = 100 // set it to 0 if nothing to display

推荐阅读