通过Storyboard+自动布局调整UICollectionView以适配所有单元格

针对你的需求，我提供两种方案，分别对应你提到的两个目标：

方案一：让UICollectionView自动调整大小以容纳所有单元格 #

这个方案适合你希望CollectionView的尺寸刚好包裹所有40个单元格、不需要滚动的场景。

步骤： #

1. 调整CollectionView约束：在Storyboard中给CollectionView只设置上下左右的相对约束（不要固定宽高），让它能根据内容动态调整尺寸。
2. 动态更新CollectionView尺寸：通过代码计算内容大小，然后更新CollectionView的高度约束，确保它刚好容纳所有单元格。

代码修改：

首先在Storyboard中给CollectionView添加高度约束，并关联到代码：

@IBOutlet weak var collectionViewHeightConstraint: NSLayoutConstraint!

然后重写viewDidLayoutSubviews方法，动态更新高度：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    // 获取CollectionView的内容总尺寸
    let contentSize = collection_View.collectionViewLayout.collectionViewContentSize
    // 更新高度约束，让CollectionView刚好包裹所有内容
    collectionViewHeightConstraint.constant = contentSize.height
    // 强制触发布局更新
    view.layoutIfNeeded()
}

同时保留你原有的单元格大小和间距设置：

func setupGridView() {
    guard let flow = collection_View.collectionViewLayout as? UICollectionViewFlowLayout else { return }
    flow.minimumInteritemSpacing = CGFloat(cellMarginSize)
    flow.minimumLineSpacing = CGFloat(cellMarginSize)
    collection_View.isScrollEnabled = false
}

方案二：让单元格在父视图内均等分布（类似Android GridView） #

这个方案会让单元格自动调整大小，填满CollectionView的父视图，保持均等的水平/垂直间距，适配任意父视图尺寸。

步骤： #

1. 动态计算单元格大小：根据父视图宽度、间距和每行单元格数量，自动算出每个单元格的宽度。
2. 确保CollectionView填满父视图：在Storyboard中给CollectionView设置上下左右与父视图对齐的约束。

代码修改：

首先定义每行的单元格数量（可根据需求调整）：

let itemsPerRow: CGFloat = 8 // 比如每行放8个单元格

然后修改sizeForItemAt方法，动态计算单元格尺寸：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // 计算可用宽度：CollectionView宽度 - 单元格之间的总间距
    let totalSpacing = (itemsPerRow - 1) * CGFloat(cellMarginSize)
    let availableWidth = collectionView.bounds.width - totalSpacing
    // 每个单元格的宽度（均等分配）
    let cellWidth = availableWidth / itemsPerRow
    // 高度可以固定或按比例设置，这里保持你原有的20
    let cellHeight: CGFloat = 20
    return CGSize(width: cellWidth, height: cellHeight)
}

添加屏幕旋转时的布局刷新逻辑：

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    // 屏幕旋转时刷新布局，确保单元格尺寸重新计算
    collection_View.collectionViewLayout.invalidateLayout()
}

最后完善setupGridView：

func setupGridView() {
    guard let flow = collection_View.collectionViewLayout as? UICollectionViewFlowLayout else { return }
    flow.minimumInteritemSpacing = CGFloat(cellMarginSize)
    flow.minimumLineSpacing = CGFloat(cellMarginSize)
    collection_View.isScrollEnabled = false
    collection_View.contentInset = .zero
}

注意事项： #

• 方案一要确保CollectionView的父视图有足够空间容纳所有内容，避免超出屏幕范围。
• 方案二中的itemsPerRow可根据设备类型调整（比如iPad设置为12，iPhone设置为8）。
• 两种方案都需要确保Storyboard中的约束设置正确，这是布局生效的核心前提。

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