如何在同一个 UIViewController 上垂直堆叠多个 UICollectionView？答案

【问题标题】：How to stack multiple UICollectionView's vertically on the same UIViewController?如何在同一个 UIViewController 上垂直堆叠多个 UICollectionView？
【发布时间】：2021-10-20 19:37:34
【问题描述】：

在同一个 UIViewController 上垂直堆叠多个 UICollectionView 需要什么？我在下面添加了我的代码，我遇到的问题是我没有看到 StoryCollectionView。当我查看 View Hierarchy 时，我看到 PostCollectionView 从上到下占据了整个屏幕，我还看到 StoryCollectionView 在它自己的视图下方也占据了整个屏幕。我想要实现的是将 StoryCollectionView 放在屏幕顶部，将 PostCollectionView（垂直滚动）放在它的正下方

    let layout = UICollectionViewFlowLayout()
    layout.itemSize = CGSize(width: view.frame.width, height: ((view.frame.width * 0.75) + (view.frame.width / 3 - 8.75) * 0.75) - 38)

    storyCollectionView = StoryCollectionView(frame: view.frame, collectionViewLayout: layout)
    view.addSubview(storyCollectionView)
    NSLayoutConstraint.activate([
        storyCollectionView.topAnchor.constraint(equalTo: view.topAnchor)
    ])

    postCollectionView = PostCollectionView(frame: view.frame, collectionViewLayout: layout)
    view.addSubview(postCollectionView)
    NSLayoutConstraint.activate([
        postCollectionView.topAnchor.constraint(equalTo: storyCollectionView.bottomAnchor)
    ])

【问题讨论】：

标签： ios swift uicollectionview uikit nslayoutconstraint

【解决方案1】：

问题是您的约束设置不正确。在您的情况下，您需要定义每个集合视图的高度，以及顶部、前导和尾随锚约束。以下是堆叠两个高度为 250 的集合视图的方法：

NSLayoutConstraint.activate([
        storyCollectionView.topAnchor.constraint(equalTo: view.topAnchor),
        storyCollectionView.heightAnchor.constraint(equalToConstant: 250),
        storyCollectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        storyCollectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
    ])

NSLayoutConstraint.activate([
        postCollectionView.topAnchor.constraint(equalTo: storyCollectionView.bottomAnchor),
        postCollectionView.heightAnchor.constraint(equalToConstant: 250),
        postCollectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        postCollectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
    ])

还要确保在两个集合视图上将 translatesAutoresizingMaskIntoConstraints 属性设置为 false。

【讨论】：