自定义UICollectionViewLayout能否实现拖拽球员对齐预设阵型网格？

我之前做过类似的体育类布局需求，自定义布局完全能帮你把拖拽进来的替补球员自动“卡”到预设的3-2-1阵型位置上。核心逻辑是：你可以通过自定义布局完全掌控每个场上球员cell的坐标，当新球员被拖拽进来时，直接把它分配到阵型里的下一个空位即可。

下面给你拆解具体的实现思路和关键步骤：

1. 先定义你的阵型坐标数据 #

首先把3-2-1阵型的每个位置转换成CGPoint数组，这些坐标可以基于collectionView的尺寸动态计算（避免固定数值适配不同屏幕），比如：

// 示例：按collectionView的宽高比例计算阵型位置，确保适配不同设备
func calculateFormationPositions(for collectionView: UICollectionView) -> [CGPoint] {
    let cvWidth = collectionView.bounds.width
    let cvHeight = collectionView.bounds.height
    
    return [
        CGPoint(x: cvWidth * 0.5, y: cvHeight * 0.1),   // 前锋（单箭头）
        CGPoint(x: cvWidth * 0.3, y: cvHeight * 0.35),  // 中场左
        CGPoint(x: cvWidth * 0.7, y: cvHeight * 0.35),  // 中场右
        CGPoint(x: cvWidth * 0.2, y: cvHeight * 0.65),  // 后卫左
        CGPoint(x: cvWidth * 0.5, y: cvHeight * 0.65),  // 后卫中
        CGPoint(x: cvWidth * 0.8, y: cvHeight * 0.65)   // 后卫右
    ]
}

2. 实现自定义UICollectionViewLayout #

自定义布局的核心是重写几个关键方法，让每个cell严格对应阵型里的坐标：

• prepare()：在这里为每个已有的场上球员cell生成布局属性，直接把cell的frame设置为对应的阵型位置（注意cell尺寸的居中对齐）。
• layoutAttributesForElements(in:)：返回所有cell的布局属性集合，确保collectionView能正确渲染每个cell的位置。
• layoutAttributesForItem(at:)：针对单个item返回对应的布局属性，处理拖拽过程中实时位置的更新。

给你一个简化的代码示例：

class FormationLayout: UICollectionViewLayout {
    private var cachedAttributes: [UICollectionViewLayoutAttributes] = []
    private var formationPositions: [CGPoint] = []
    let cellSize = CGSize(width: 60, height: 60)
    
    override func prepare() {
        super.prepare()
        cachedAttributes.removeAll()
        guard let collectionView = collectionView else { return }
        
        // 动态计算当前collectionView对应的阵型坐标
        formationPositions = calculateFormationPositions(for: collectionView)
        let itemCount = collectionView.numberOfItems(inSection: 0)
        
        for index in 0..<itemCount {
            let indexPath = IndexPath(item: index, section: 0)
            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            
            // 确保不超出阵型最大人数（比如3-2-1最多6人）
            guard index < formationPositions.count else {
                // 超出的话可以放到临时位置或者隐藏，根据需求处理
                attributes.frame = CGRect(x: -100, y: -100, width: cellSize.width, height: cellSize.height)
                cachedAttributes.append(attributes)
                continue
            }
            
            // 把cell居中对齐到阵型坐标点
            let position = formationPositions[index]
            attributes.frame = CGRect(
                x: position.x - cellSize.width/2,
                y: position.y - cellSize.height/2,
                width: cellSize.width,
                height: cellSize.height
            )
            cachedAttributes.append(attributes)
        }
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return cachedAttributes.filter { $0.frame.intersects(rect) }
    }
    
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        return cachedAttributes.first { $0.indexPath == indexPath }
    }
    
    override var collectionViewContentSize: CGSize {
        guard let maxX = formationPositions.map({ $0.x }).max(),
              let maxY = formationPositions.map({ $0.y }).max() else {
            return .zero
        }
        return CGSize(width: maxX + cellSize.width/2, height: maxY + cellSize.height/2)
    }
    
    // 这里复用之前的阵型坐标计算方法
    private func calculateFormationPositions(for collectionView: UICollectionView) -> [CGPoint] {
        let cvWidth = collectionView.bounds.width
        let cvHeight = collectionView.bounds.height
        
        return [
            CGPoint(x: cvWidth * 0.5, y: cvHeight * 0.1),
            CGPoint(x: cvWidth * 0.3, y: cvHeight * 0.35),
            CGPoint(x: cvWidth * 0.7, y: cvHeight * 0.35),
            CGPoint(x: cvWidth * 0.2, y: cvHeight * 0.65),
            CGPoint(x: cvWidth * 0.5, y: cvHeight * 0.65),
            CGPoint(x: cvWidth * 0.8, y: cvHeight * 0.65)
        ]
    }
}

3. 结合拖拽逻辑完成自动对齐 #

你已经实现了两个collectionView的拖拽，现在只需要在UICollectionViewDropDelegate的performDropWithCoordinator方法里，把新插入的球员放到阵型的第一个空位即可：

func collectionView(_ collectionView: UICollectionView, performDropWithCoordinator coordinator: UICollectionViewDropCoordinator) {
    guard let destinationIndexPath = coordinator.destinationIndexPath else { return }
    // 确保插入的位置不超过阵型最大人数
    guard destinationIndexPath.item < (collectionView.collectionViewLayout as! FormationLayout).formationPositions.count else {
        // 提示用户阵型已满
        return
    }
    
    // 处理数据插入（比如把替补球员数据移到场上数组）
    // ...
    
    // 插入cell后，自定义布局会自动把它放到对应的阵型位置
    collectionView.insertItems(at: [destinationIndexPath])
}

额外优化建议 #

• 拖拽占位符提示：在拖拽过程中显示一个占位符cell，提前展示球员会落到哪个阵型位置，提升用户体验；
• 阵型切换支持：如果后续要支持不同阵型（比如4-3-3），只需要修改calculateFormationPositions方法返回的坐标数组，布局会自动更新所有球员的位置；
• 位置冲突处理：如果用户拖拽到已有人的位置，可以自动交换两个球员的位置，这部分可以通过自定义布局的targetContentOffset方法或者拖拽代理来实现。

内容的提问来源于stack exchange，提问作者Danny Pająk