StackView 中的多个 CollectionView答案

【问题标题】：Multiple CollectionViews In StackViewStackView 中的多个 CollectionView
【发布时间】：2021-10-01 17:38:58
【问题描述】：

我目前有几个使用组合布局的集合视图，我正在尝试将它们添加到两个独立的垂直堆栈视图中。我的一个集合视图将进入 headerContentView，另一个将进入实际的 contentView。

我的 collectionView 应该通过使内在内容大小无效来自行调整大小。但是，出于某种原因，只有一个 collectionView 是可见的，因为它会将自身调整为内容大小。但是，另一个的高度为 0。请注意，包含第二个 collectionView 的堆栈视图的高度也为零。

我需要帮助才能正确调整集合视图的大小。 感谢您的宝贵时间。

堆栈视图：

internal let contentStackView: UIStackView = {
    let stackView = UIStackView()
    stackView.axis = .vertical
    return stackView
}()

StackView 的约束：

private func setUpView() {
    backgroundColor = .blue
    layoutMargins = UIEdgeInsets(top: 0, left: 16, bottom: 24, right: 16)

    addSubview(headerView)
    addSubview(contentStackView)

    // Preserve superview layout margins so that sub-elements can be laid out using layoutMarginsGuide
    contentStackView.preservesSuperviewLayoutMargins = true

    [headerView, contentStackView].forEach { $0.translatesAutoresizingMaskIntoConstraints = false }
    NSLayoutConstraint.activate([
        headerView.topAnchor.constraint(equalTo: topAnchor),
        contentStackView.topAnchor.constraint(equalTo: headerView.bottomAnchor, constant: 16),
        layoutMarginsGuide.bottomAnchor.constraint(lessThanOrEqualTo: contentStackView.bottomAnchor),

        headerView.leadingAnchor.constraint(equalTo: leadingAnchor),
        headerView.trailingAnchor.constraint(equalTo: trailingAnchor),
        contentStackView.leadingAnchor.constraint(equalTo: leadingAnchor),
        contentStackView.trailingAnchor.constraint(equalTo: trailingAnchor)
    ])
}

private func setUpHeaderView() {
    // Preserve superview layout margins so that sub-elements can be laid out using layoutMarginsGuide
    headerView.preservesSuperviewLayoutMargins = true
    headerContentStackView.preservesSuperviewLayoutMargins = true
    headerView.addSubview(headerContentStackView)

    headerContentStackView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        headerContentStackView.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor),
        headerView.bottomAnchor.constraint(lessThanOrEqualTo: headerContentStackView.bottomAnchor),

        headerContentStackView.leadingAnchor.constraint(equalTo: headerView.leadingAnchor),
        headerContentStackView.trailingAnchor.constraint(equalTo: headerView.trailingAnchor)
    ])

    // Add header contents to header content stack view
    headerContentStackView.addArrangedSubview(headerBarView)
    headerContentStackView.addArrangedSubview(notificationView)
}

组合布局：

 private static func generateCompositionalLayout() -> UICollectionViewLayout {
    // Items
    let itemSize: NSCollectionLayoutSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(UIConstantsIconTileCollectionView.PhaseTwo.fractionalWidthForItems),
        heightDimension: .fractionalHeight(UIConstantsIconTileCollectionView.PhaseTwo.fullWidthOrHeight)
    )
    let fullItem: NSCollectionLayoutItem = NSCollectionLayoutItem(layoutSize: itemSize)

    // Groups
    let groupSize: NSCollectionLayoutSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(UIConstantsIconTileCollectionView.PhaseTwo.fullWidthOrHeight),
        heightDimension: .fractionalWidth(UIConstantsIconTileCollectionView.PhaseTwo.fractionalWidthForGroups)
    )
    let group: NSCollectionLayoutGroup = NSCollectionLayoutGroup.horizontal(
        layoutSize: groupSize,
        subitem: fullItem,
        count: UIConstantsIconTileCollectionView.PhaseTwo.numberOfItemsPerGroup
    )
    group.interItemSpacing = .fixed(UIConstantsIconTileCollectionView.PhaseTwo.interGroupSpacing)

    // Section
    let section: NSCollectionLayoutSection = NSCollectionLayoutSection(group: group)
    section.contentInsets = NSDirectionalEdgeInsets(
        top: 0,
        leading: UIConstantsIconTileCollectionView.PhaseTwo.interSectionSpacing,
        bottom: 0,
        trailing: UIConstantsIconTileCollectionView.PhaseTwo.interSectionSpacing
    )

    return UICollectionViewCompositionalLayout(section: section)
}

自选尺寸集合视图：

// MARK: - View Layout
override var contentSize: CGSize {
    didSet {
        invalidateIntrinsicContentSize()
    }
}

override var intrinsicContentSize: CGSize {
    return contentSize
}

【问题讨论】：

标签： ios collectionview stackview

【解决方案1】：

我的解决方案是我实现 CollectionViewController 的方式。我正在覆盖 loadView() 并用 collectionView 替换视图本身。示例如下：

override func loadView() {
     view = collectionView
}

但是，当我覆盖 viewDidLoad 并将 collectionView 添加为子视图并将其约束到视图控制器视图时，它工作得很好。示例如下：

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(collectionView)
    // Constraint collectionView -> view
}

我不明白为什么这与 stackViews 配合得更好，因为它让我大吃一惊，但这解决了问题。如果有人对为什么本质上只是有一个 collectionView 的容器视图与 stackView 很好地配合，我将不胜感激。

【讨论】：