Swift：在UICollectionViewController首行前程序化添加视图的问题

嘿，我完全懂你现在的困扰——要在带头部的UICollectionView里，给头部下方、首行单元格前加一个能跟着滚动全程不消失的TabBar，之前试了各种设置都没搞定对吧？我之前做类似需求的时候也踩过不少坑，给你两个亲测有效的方案：

方案一：利用UICollectionView的Section Header（最推荐） #

这个方案最贴合UICollectionView的原生设计，不用复杂的自定义布局就能实现需求：

• 调整布局设置：确保你的UICollectionView用的是UICollectionViewFlowLayout，把sectionHeadersPinToVisibleBounds设为false——这样Section Header就会跟着内容一起滚动，不会固定在顶部。
• 拆分头部结构：把原来的大头部设为UICollectionView的全局头部（collectionView.collectionHeaderView），然后把TabBar放在第一个Section的Section Header里。这样滚动时，全局头部、TabBar、单元格会作为一个整体滚动，TabBar不会凭空消失。
• 注册并配置自定义Header：给TabBar专门写一个UICollectionReusableView子类，把TabBar嵌进去，然后在代码里注册并返回这个Header。

代码示例 #

首先在viewDidLoad里做初始化配置：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 注册TabBar对应的Section Header
    collectionView.register(TabBarSectionHeader.self, 
                            forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader,
                            withReuseIdentifier: "TabBarHeader")
    
    // 设置全局头部（你原来的那个头部视图）
    let globalHeader = YourOriginalHeaderView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 200))
    collectionView.collectionHeaderView = globalHeader
    
    // 配置FlowLayout，关闭Header悬停，设置TabBar Header的尺寸
    if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        flowLayout.sectionHeadersPinToVisibleBounds = false
        flowLayout.headerReferenceSize = CGSize(width: view.frame.width, height: 50)
    }
}

然后实现Section Header的创建：

override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    guard kind == UICollectionView.elementKindSectionHeader, indexPath.section == 0 else {
        return super.collectionView(collectionView, viewForSupplementaryElementOfKind: kind, at: indexPath)
    }
    
    let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TabBarHeader", for: indexPath) as! TabBarSectionHeader
    // 配置TabBar的选项和代理
    header.tabBar.items = [
        UITabBarItem(title: "标签1", image: nil, tag: 0),
        UITabBarItem(title: "标签2", image: nil, tag: 1)
    ]
    header.tabBar.delegate = self
    return header
}

自定义的TabBarSectionHeader：

class TabBarSectionHeader: UICollectionReusableView {
    let tabBar = UITabBar()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupTabBar()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupTabBar() {
        addSubview(tabBar)
        tabBar.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            tabBar.leadingAnchor.constraint(equalTo: leadingAnchor),
            tabBar.trailingAnchor.constraint(equalTo: trailingAnchor),
            tabBar.topAnchor.constraint(equalTo: topAnchor),
            tabBar.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
    }
}

方案二：自定义UICollectionViewLayout（复杂场景适用） #

如果你的UICollectionView用了自定义布局，或者需要更精细的滚动控制，可以手动布局TabBar的位置：

• 在布局中计算位置：在prepare()方法里，根据全局头部的高度，计算出TabBar的初始frame（Y坐标等于全局头部高度，宽度和集合视图一致）。
• 同步滚动偏移：在layoutAttributesForElements(in:)方法里，给TabBar对应的布局属性设置动态偏移，确保它跟着滚动内容一起移动。
• 添加TabBar到集合视图：把TabBar作为子视图添加到UICollectionView上，或者作为Supplementary View管理，避免布局混乱。

注意事项 #

• 不要把全局头部直接加在UICollectionViewController的view上，一定要用collectionView.collectionHeaderView，这样头部才属于滚动内容的一部分，TabBar的滚动才会和整体协调。
• 测试时注意内容不足的情况：当集合视图内容高度小于屏幕高度时，TabBar要保持在头部下方，不能被顶到奇怪的位置。
• 如果之后需要TabBar悬停的效果，可以在scrollViewDidScroll(_:)里监听滚动偏移量，动态调整TabBar的frame——不过你要的是随滚动移动，这个可以作为扩展功能备用。

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