UIView与UICollectionView滚动问题及预览实现咨询

方案一：用UICollectionView Section Header实现固定 #

不要把固定视图做成普通Cell，而是定义为Section Header（组头），通过布局设置让它固定在顶部：

1. 注册Header视图

collectionView.register(FixedHeaderView.self, 
                        forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, 
                        withReuseIdentifier: "FixedHeader")

2. 实现数据源代理返回Header

func collectionView(_ collectionView: UICollectionView, 
                    viewForSupplementaryElementOfKind kind: String, 
                    at indexPath: IndexPath) -> UICollectionReusableView {
    let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, 
                                                                withReuseIdentifier: "FixedHeader", 
                                                                for: indexPath) as! FixedHeaderView
    // 配置Header内容
    return header
}

3. 设置Header固定：

• 若用UICollectionViewFlowLayout：

let layout = UICollectionViewFlowLayout()
layout.sectionHeadersPinToVisibleBounds = true
collectionView.collectionViewLayout = layout

• 若用UICollectionViewCompositionalLayout：

let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), 
                                        heightDimension: .absolute(80))
let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, 
                                                        elementKind: UICollectionView.elementKindSectionHeader, 
                                                        alignment: .top)
header.pinToVisibleBounds = true

let group = NSCollectionLayoutGroup.horizontal(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(50))) // 配置你的cell布局组
let section = NSCollectionLayoutSection(group: group)
section.boundarySupplementaryItems = [header]

collectionView.collectionViewLayout = UICollectionViewCompositionalLayout(section: section)

方案二：固定视图与UICollectionView并列布局 #

直接将固定视图放在UICollectionView外部，通过AutoLayout约束实现固定：

1. 在父视图中添加两个子视图：固定UIView和UICollectionView
2. 添加AutoLayout约束：

// 固定视图约束
fixedView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
fixedView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
fixedView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
fixedView.heightAnchor.constraint(equalToConstant: 80).isActive = true

// CollectionView约束
collectionView.topAnchor.constraint(equalTo: fixedView.bottomAnchor).isActive = true
collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true

为什么用Cell会导致整个滚动？ #

UICollectionView的Cell属于内容滚动区域的一部分，默认会跟随contentOffset的变化一起滚动。把固定视图做成Cell时，它会被当作可滚动内容的一部分，自然会跟着列表整体滚动。只有将其设置为固定的Header，或者放到CollectionView外部，才能实现顶部固定的效果。

内容的提问来源于stack exchange，提问作者Mark Roberts