如何使 UICollectionView 的高度可自动调整和滚动？

Posted 2023-03-14

【中文标题】如何使 UICollectionView 的高度可自动调整和滚动？

【英文标题】：How to make UICollectionView's height autoresizable and scrollable?

【发布时间】：2021-02-01 22:50:15

【问题描述】：

我有一个 ViewController，它使用 2 个 CollectionViews（水平的像 insta-stories 和垂直的（黑色的））。我遇到了 Vertical CollectionView 无法调整大小的问题，因此，我无法向下滚动以获取所有单元格。有什么方法可以使整个页面可滚动以正确显示我的单元格，或者我必须为此使用 TableViewController ？谢谢

这是代码

private var postsCollectionView: UICollectionView?

override func viewDidLoad() 
    super.viewDidLoad()
    ...
    initializePosts()

func initializePosts() 
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .vertical
    layout.itemSize = CGSize(width: 380, height: 285)
    layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    layout.minimumLineSpacing = 30
    postsCollectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    postsCollectionView?.register(PostCell.self, forCellWithReuseIdentifier: PostCell.identifier)
    postsCollectionView?.showsHorizontalScrollIndicator = false
    postsCollectionView?.showsVerticalScrollIndicator = false
    postsCollectionView?.contentInsetAdjustmentBehavior = .always
    postsCollectionView?.delegate = self
    postsCollectionView?.dataSource = self
    postsCollectionView?.backgroundColor = .blue
    guard let postsCollections = postsCollectionView else 
        return
    
    view.addSubview(postsCollections)

...
override func viewDidLayoutSubviews() 
    super.viewDidLayoutSubviews()
    postsCollectionView?.frame = CGRect(x: 0, y: 330, width: view.frame.size.width, height: view.frame.size.height).integral

【问题讨论】：

我会为垂直单元格使用 tableView 并添加一个 collectionView 作为 UITableView.tableHeaderView，或者将 collectionView 添加为 tableView 中的第一个单元格。此外，您应该使用自动布局。这将使您的生活更轻松。

【参考方案1】：

您可以使用多种方法。

首先在视图控制器的顶视图中添加postsCollectionView，附加视图的边和约束，然后在postsCollectionView中注册section header（UICollectionReusableView），在section header中放一个类似Instagram的横向collection view .

其次，在视图控制器的顶视图中添加一个垂直滚动视图，并应用视图的边缘和约束，在垂直滚动视图中添加一个类似于Instagram的水平集合视图，postCollectionView是添加。这时候应该动态创建Collection View，使其自身大小与内容大小一致，参考下面link。