如何实现UICollectionViewCompositionalLayout组内元素居中对齐？

嘿，这个问题很常见！你遇到的组内元素顶部对齐的情况，是因为NSCollectionLayoutGroup默认的垂直对齐方式是.top，只需要调整一下group的对齐属性就能搞定。

问题根源 #

你的布局里，group的高度是.estimated(60)，但组内的item默认会贴紧组的顶部排列，即使item的高度小于组的预估高度，也不会自动居中。

解决方案 #

只需要给你的水平group设置alignment = .center，让组内的子元素在垂直方向上对齐到组的中心位置。

修改后的布局代码如下：

private lazy var layout: UICollectionViewCompositionalLayout = {
    let spacing: CGFloat = 10
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(60))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(60))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 2)
    group.interItemSpacing = .fixed(spacing)
    // 添加这一行，设置组内元素垂直居中
    group.alignment = .center
    
    let section = NSCollectionLayoutSection(group: group)
    section.interGroupSpacing = spacing
    return UICollectionViewCompositionalLayout(section: section)
}()

额外说明 #

• 这个设置会让同组内的两个单元格，不管各自的实际高度是多少，都会在垂直方向上对齐到组的中心，完美解决你说的右上角单元格顶部对齐的问题。
• 你的单元格约束已经做了内部元素的居中（imageView和label的centerY绑定），这部分是没问题的，不需要修改。

这样调整后，视觉效果就会变得协调啦！

内容的提问来源于stack exchange，提问作者Clément Cardonnel