如何以编程方式无间距布局CollectionView于导航栏、标签与TabBar之间？

要实现这个需求，Auto Layout（自动布局）是最优的实现方式——它能自动适配不同屏幕尺寸、横竖屏切换，以及导航栏/标签栏高度变化的场景，完全不需要手动计算frame，布局更稳定且易维护。下面是具体的实现步骤和完整代码：

核心思路 #

我们需要构建一条完全贴合的布局链：

• 顶部标签（Label）紧贴导航栏底部
• CollectionView紧贴Label底部，同时底部紧贴TabBar顶部
• 所有控件的左右边缘都与父视图对齐，无任何间距

完整实现代码 #

import UIKit

private let reUseIdentifierCollectionView = "CollectionViewCell1"

class CVControllerViewController: UIViewController {
    
    // 1. 声明并初始化需要的控件
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.text = "示例标签"
        label.backgroundColor = .lightGray // 方便直观查看布局，可按需删除
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private let collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: UIScreen.main.bounds.width, height: 100) // 示例Cell尺寸
        layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0
        
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.backgroundColor = .white
        cv.register(UICollectionViewCell.self, forCellWithReuseIdentifier: reUseIdentifierCollectionView)
        cv.translatesAutoresizingMaskIntoConstraints = false
        return cv
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        // 2. 关闭系统自动调整滚动视图内边距的功能
        // 避免导航栏/状态栏自动给CollectionView添加额外内边距
        automaticallyAdjustsScrollViewInsets = false
        
        // 3. 将控件添加到父视图
        view.addSubview(titleLabel)
        view.addSubview(collectionView)
        
        // 4. 设置CollectionView的数据源和代理
        collectionView.dataSource = self
        collectionView.delegate = self
        
        // 5. 配置Auto Layout约束
        setupConstraints()
    }
    
    private func setupConstraints() {
        NSLayoutConstraint.activate([
            // Label约束：顶部贴导航栏底部，左右贴父视图，自定义高度
            titleLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            titleLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            titleLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            titleLabel.heightAnchor.constraint(equalToConstant: 44),
            
            // CollectionView约束：顶部贴Label底部，左右贴父视图，底部贴TabBar顶部
            collectionView.topAnchor.constraint(equalTo: titleLabel.bottomAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }
}

// 实现CollectionView数据源协议
extension CVControllerViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10 // 示例Cell数量
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reUseIdentifierCollectionView, for: indexPath)
        cell.backgroundColor = indexPath.item % 2 == 0 ? .systemBlue : .systemGreen
        return cell
    }
}

// 可选：实现CollectionView代理协议（处理选中、布局调整等逻辑）
extension CVControllerViewController: UICollectionViewDelegate {
    
}

关键细节说明 #

• translatesAutoresizingMaskIntoConstraints = false：必须给所有手动添加的控件设置这个属性，否则Auto Layout约束不会生效
• safeAreaLayoutGuide：iOS 11+ 推荐使用，它会自动避开导航栏、状态栏、TabBar等系统控件，无需手动计算它们的高度，适配性更强
• automaticallyAdjustsScrollViewInsets = false：关闭系统默认的滚动视图内边距调整，确保CollectionView的布局完全由我们定义的约束控制
• UICollectionViewFlowLayout配置：如果需要Cell铺满屏幕宽度，记得将itemSize的width设为屏幕宽度，同时把minimumLineSpacing和minimumInteritemSpacing设为0，避免Cell之间出现不必要的间距

这种方式完全不需要手动计算各类系统控件的高度，所有布局都由系统自动处理，是目前最优雅、最稳定的实现方案。

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