如何用Swift代码实现目标UICollectionView布局？求技术指导

我希望通过Swift代码实现目标布局效果，但自行尝试后仅达成了另一种不符合预期的布局，以下是我编写的代码，恳请提供帮助：

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
layout.sectionInset = UIEdgeInsets(top: 30, left: 30, bottom: 10, right: 30)
layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
layout.minimumLineSpacing = 10
layout.minimumInteritemSpacing = 15
collectionViews = UICollectionView(frame: .zero, collectionViewLayout: layout)
        
guard let collectionView = collectionViews else { return }
scrollView.addSubview(collectionView)
collectionView.dataSource = self
collectionView.delegate = self
collectionView.delaysContentTouches = true
collectionView.isScrollEnabled = false
collectionView.showsHorizontalScrollIndicator = false
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.register(MenusCell.self, forCellWithReuseIdentifier: MenusCell.identifier)
collectionView.backgroundColor = .red
collectionView.top(collectionViewTop?.bottomAnchor ?? scrollView.topAnchor, 2)
collectionView.left(view.leftAnchor, 0)
collectionView.right(view.rightAnchor, 0)
collectionView.bottom(view.bottomAnchor, -50)

问题分析与解决方案 #

从代码来看，布局不符合预期主要出在三个核心点：自动尺寸的可靠性、嵌套ScrollView时的约束逻辑、布局参数的适配逻辑。以下是针对性的修复方案：

方案1：固定列数布局（更稳定）

如果目标布局是固定列数（比如2列），放弃自动尺寸，手动计算item宽度能避免系统估算误差：

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
layout.sectionInset = UIEdgeInsets(top: 30, left: 30, bottom: 10, right: 30)
layout.minimumLineSpacing = 10
layout.minimumInteritemSpacing = 15

// 手动计算2列布局的item宽度
let availableWidth = view.bounds.width - layout.sectionInset.left - layout.sectionInset.right - layout.minimumInteritemSpacing
let itemWidth = availableWidth / 2
// 假设cell是正方形，可根据需求自定义高度
layout.itemSize = CGSize(width: itemWidth, height: itemWidth)

collectionViews = UICollectionView(frame: .zero, collectionViewLayout: layout)
        
guard let collectionView = collectionViews else { return }
scrollView.addSubview(collectionView)
collectionView.dataSource = self
collectionView.delegate = self
collectionView.delaysContentTouches = true
collectionView.isScrollEnabled = false
collectionView.showsHorizontalScrollIndicator = false
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.register(MenusCell.self, forCellWithReuseIdentifier: MenusCell.identifier)
collectionView.backgroundColor = .red

// 修正嵌套ScrollView的约束：必须明确宽度，让系统能计算内容高度
NSLayoutConstraint.activate([
    collectionView.topAnchor.constraint(equalTo: collectionViewTop?.bottomAnchor ?? scrollView.topAnchor, constant: 2),
    collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -50),
    collectionView.widthAnchor.constraint(equalTo: view.widthAnchor)
])

方案2：保留自动尺寸（需完善Cell约束）

如果必须使用自动尺寸，务必确保MenusCell内部约束完整：

1. Cell内所有元素（如Label、Image）都要有明确的上下左右约束，不能有歧义
2. 给Label设置行数限制（比如numberOfLines = 0），并调整内容压缩/拉伸优先级
3. 保持上述修正后的CollectionView约束逻辑（添加宽度锚点）

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