如何用UICollectionViewFlowLayout实现左右对齐的横向UICollectionView

完全可以通过自定义UICollectionViewFlowLayout实现这个需求，你当前的代码逻辑是基于单元格与屏幕中心的距离做偏移，属于“中心吸附”类动效，和左/右对齐的需求不匹配，所以需要调整布局计算逻辑。

下面提供两种可行的实现方案：

方案1：按Section区分对齐方式 #

把左对齐单元格放在单独Section，右对齐单元格放在另一个Section，通过Layout直接控制每个Section内单元格的位置：

class LeftRightAlignedFlowLayout: UICollectionViewFlowLayout {
    // 定义哪些Section是右对齐，其余默认左对齐
    var rightAlignedSections: Set<Int> = [1]
    
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        guard let attributes = super.layoutAttributesForItem(at: indexPath)?.copy() as? UICollectionViewLayoutAttributes,
              let collectionView = collectionView else {
            return nil
        }
        
        let collectionWidth = collectionView.bounds.width
        let cellWidth = attributes.size.width
        let sectionInsets = self.sectionInset
        
        if rightAlignedSections.contains(indexPath.section) {
            // 右对齐：计算右侧起始位置
            attributes.frame.origin.x = collectionWidth - sectionInsets.right - cellWidth
        } else {
            // 左对齐：使用左侧内边距作为起始位置
            attributes.frame.origin.x = sectionInsets.left
        }
        // 纵向位置（单行布局）
        attributes.frame.origin.y = sectionInsets.top
        
        return attributes
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return super.layoutAttributesForElements(in: rect)?.compactMap {
            layoutAttributesForItem(at: $0.indexPath)
        }
    }
    
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
}

使用方式 #

1. 设置CollectionView的滚动方向为横向：

let layout = LeftRightAlignedFlowLayout()
layout.scrollDirection = .horizontal
layout.sectionInset = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
collectionView.collectionViewLayout = layout

2. 在数据源中，将左对齐单元格放在Section 0，右对齐放在Section 1，中间的空白区域由CollectionView宽度、单元格宽度和内边距自动形成。

方案2：同一Section内混合对齐 #

如果需要在同一个Section内同时存在左/右对齐的单元格，可以通过闭包传递每个单元格的对齐类型：

首先定义对齐类型枚举：

enum CellAlignment {
    case left, right
}

然后修改自定义Layout：

class LeftRightAlignedFlowLayout: UICollectionViewFlowLayout {
    // 闭包用于获取每个单元格的对齐方式
    var getCellAlignment: ((IndexPath) -> CellAlignment)?
    
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        guard let attributes = super.layoutAttributesForItem(at: indexPath)?.copy() as? UICollectionViewLayoutAttributes,
              let collectionView = collectionView,
              let alignment = getCellAlignment?(indexPath) else {
            return nil
        }
        
        let collectionWidth = collectionView.bounds.width
        let cellWidth = attributes.size.width
        let sectionInsets = self.sectionInset
        
        switch alignment {
        case .left:
            attributes.frame.origin.x = sectionInsets.left
        case .right:
            attributes.frame.origin.x = collectionWidth - sectionInsets.right - cellWidth
        }
        attributes.frame.origin.y = sectionInsets.top
        
        return attributes
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return super.layoutAttributesForElements(in: rect)?.compactMap {
            layoutAttributesForItem(at: $0.indexPath)
        }
    }
    
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
}

使用方式 #

1. 准备数据源标记每个单元格的对齐方式：

private let cellAlignments: [CellAlignment] = [.left, .left, .right, .right]

2. 配置Layout并绑定对齐方式：

let layout = LeftRightAlignedFlowLayout()
layout.scrollDirection = .horizontal
layout.sectionInset = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
layout.getCellAlignment = { indexPath in
    return self.cellAlignments[indexPath.item]
}
collectionView.collectionViewLayout = layout

补充说明 #

• 如果你需要中间的空白区域更可控，可以在左/右对齐单元格之间插入一个固定宽度的空白单元格，或者调整minimumInteritemSpacing和sectionInset参数。
• 若需要多行布局，只需修改frame.origin.y的计算逻辑，根据行号计算纵向位置即可。

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