使用自动布局的表格视图中的水平集合视图

Posted 2023-03-03

【中文标题】使用自动布局的表格视图中的水平集合视图

【英文标题】：Horizontal collection view in table view using autolayout

【发布时间】：2017-07-22 08:11:42

【问题描述】：

我正在拼命尝试使用自动布局将水平滚动集合视图放入表格视图单元格中，但集合视图和表格视图单元格不会按预期布局，因此它们的高度最终为零。我已经查看了我可以在此处找到的关于此主题的所有帖子，但没有一个可以帮助我解决问题。

一般结构如下所示：

表格视图

表格视图单元格

收藏视图

|收藏查看单元格 |收藏查看单元格 | ...

表格视图单元格

收藏视图

|收藏查看单元格 |收藏查看单元格 | ...

我已经设置了 TableView 自动调整大小的属性

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 100.0

以及集合视图流布局属性：

flowLayout.scrollDirection = .horizontal
flowLayout.estimatedItemSize = CGSize(width: 1.0, height: 1.0)

TableViewCell 布局：

contentView.layout("H:|[a]|", views: collectionView)
contentView.layout("V:|[a]|", views: collectionView)

CollectionViewCell 布局：

contentView.layout("H:|[a]|", views: imageView)
contentView.layout("H:|[a]|", views: titleLabel)
contentView.layout("H:|[a]|", views: subtitleLabel)
contentView.layout("V:|[a]-(4)-[b][c]|", views: imageView, titleLabel, subtitleLabel)

我已经尝试手动设置集合视图的高度，但它的 contentSize 始终为零，可能是因为它没有空间来潜在地呈现其单元格。

override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) 
    collectionViewHeightConstraint.constant = collectionView.contentSize.height

我认为我需要告诉集合视图在我的代码中的任何位置进行布局，并为其提供足够的空间，但我的尝试最终导致运行时出现大量自动布局错误。所以也许有人可以帮我解决这个问题，我真的不想硬编码高度。

提前谢谢你，

安德烈亚斯

【参考方案1】：

您可以使用“UICollectionViewDelegateFlowLayout”，它告诉集合视图每个单元格的大小，然后为单元格的子视图项添加自动布局约束。

将您的集合视图应用到 UICollectionViewDelegateFlowLayout，并设置 集合视图的数据源和委托

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
        return CGSize(width: 100, height: frame.height)
    

【讨论】：

问题是，单元格没有固定大小，它们应该自己自动布局。

如何在容器视图中添加子视图，设置此视图 sizeToFit，使用此容器的框架动态设置单元格的大小