水平方向CollectionView组头默认居左，如何实现其居上显示？

方案一：使用UICollectionView组合布局（iOS 13+） #

这是苹果官方推荐的实现方式，通过组合布局可以轻松让水平滚动的section组头固定在section上方，无需复杂自定义逻辑。

核心步骤是用NSCollectionLayoutBoundarySupplementaryItem定义组头，并设置顶部对齐，同时给section开启正交滚动（水平滚动）：

// 定义组头尺寸：宽度占满CollectionView，高度固定44
let headerSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0),
    heightDimension: .absolute(44)
)
// 创建组头补充项，设置对齐方式为顶部
let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(
    layoutSize: headerSize,
    elementKind: UICollectionView.elementKindSectionHeader,
    alignment: .top
)

// 定义item和水平排列的group
let itemSize = NSCollectionLayoutSize(
    widthDimension: .absolute(120),
    heightDimension: .absolute(150)
)
let item = NSCollectionLayoutItem(layoutSize: itemSize)
item.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)

let groupSize = NSCollectionLayoutSize(
    widthDimension: .absolute(120),
    heightDimension: .absolute(150)
)
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

// 创建section并开启水平滚动，添加组头
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .continuous // 开启水平滚动
section.boundarySupplementaryItems = [sectionHeader]

// 生成最终布局
let layout = UICollectionViewCompositionalLayout(section: section)

配置完成后，组头会固定在对应section的顶部，不会随水平滚动的item移动，视觉效果和垂直CollectionView的组头一致。

方案二：自定义UICollectionViewLayout（兼容iOS 13以下） #

如果需要支持iOS 13之前的版本，需通过自定义布局控制组头位置：

• 重写layoutAttributesForElements(in:)方法，为组头设置独立frame：宽度等于CollectionView宽度，y值对应section顶部，x值固定为0。
• 计算section内item的frame时，让它们从组头下方开始水平排列。
• 重写shouldInvalidateLayout(forBoundsChange:)方法，确保滚动时组头位置保持正确。

示例代码片段：

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    let attributes = super.layoutAttributesForElements(in: rect)?.map { $0.copy() as! UICollectionViewLayoutAttributes }
    attributes?.forEach { attr in
        if attr.representedElementKind == UICollectionView.elementKindSectionHeader {
            guard let collectionView = collectionView else { return }
            // 固定组头位置在section顶部，宽度占满CollectionView
            attr.frame = CGRect(
                x: 0,
                y: attr.frame.origin.y,
                width: collectionView.bounds.width,
                height: attr.frame.height
            )
            // 确保组头在最上层
            attr.zIndex = 10
        }
    }
    return attributes
}

注意事项 #

• 注册组头时要使用正确的elementKind，即UICollectionView.elementKindSectionHeader，避免布局找不到对应视图。
• 多section场景下，两个方案都会自动让每个section的组头置顶在各自section上方，无需额外处理。

内容的提问来源于stack exchange，提问作者Alexander Petrov