如何创建可预览前后单元格且居中对齐的UICollectionView？

要实现当前卡片居中、前后卡片部分可见的效果，同时避免滚动后卡片偏移的问题，核心是通过自定义UICollectionViewFlowLayout精确控制布局和滚动行为，以下是具体实现技巧：

1. 自定义FlowLayout子类（核心解决滚动居中问题） #

直接调整系统FlowLayout的内边距、间距会导致滚动时卡片无法稳定居中，因此需要重写布局的关键方法：

关键实现步骤： #

• 提前计算卡片尺寸与section内边距：让卡片宽度 = 屏幕宽度 - 2*预览宽度，section左右内边距设为预览宽度，确保前后卡片能露出指定部分。
• 重写targetContentOffset(forProposedContentOffset:withScrollingVelocity:)：强制滚动结束后，让最近的卡片居中显示，彻底解决滚动偏移问题。
• 关闭系统分页，由自定义布局控制滚动落点。

代码示例： #

class PeekingCardLayout: UICollectionViewFlowLayout {
    // 前后卡片露出的宽度，可根据需求调整
    private let peekWidth: CGFloat = 40
    
    override func prepare() {
        super.prepare()
        guard let collectionView = collectionView else { return }
        
        // 设置卡片尺寸：屏幕宽度减去左右各peekWidth的宽度
        itemSize = CGSize(width: collectionView.bounds.width - 2 * peekWidth, 
                         height: collectionView.bounds.height)
        // section内边距：左右各留peekWidth，让前后卡片露出
        sectionInset = UIEdgeInsets(top: 0, left: peekWidth, bottom: 0, right: peekWidth)
        minimumLineSpacing = 0 // 取消行间距，避免额外留白
        scrollDirection = .horizontal
    }
    
    // 强制滚动结束后，让最近的卡片居中
    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
        guard let collectionView = collectionView else {
            return super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
        }
        
        // 计算目标区域，找出距离中心最近的卡片
        let targetRect = CGRect(x: proposedContentOffset.x, y: 0, 
                               width: collectionView.bounds.width, height: collectionView.bounds.height)
        guard let closestAttrs = layoutAttributesForElements(in: targetRect)?.sorted(by: {
            abs($0.center.x - (proposedContentOffset.x + collectionView.bounds.width/2)) < 
            abs($1.center.x - (proposedContentOffset.x + collectionView.bounds.width/2))
        }).first else {
            return super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
        }
        
        // 返回让该卡片居中的偏移量
        return CGPoint(x: closestAttrs.center.x - collectionView.bounds.width/2, y: proposedContentOffset.y)
    }
    
    // 滚动时实时更新布局属性（比如缩放效果）
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
}

2. 配置CollectionView基础属性 #

在初始化CollectionView时，需要配合自定义布局设置以下属性：

• 关闭isPagingEnabled：避免系统分页与自定义居中逻辑冲突。
• 隐藏横向滚动指示器：提升视觉体验。

// 初始化CollectionView并应用自定义布局
let layout = PeekingCardLayout()
let collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.showsHorizontalScrollIndicator = false
collectionView.isPagingEnabled = false // 必须关闭，由自定义布局控制居中
view.addSubview(collectionView)

3. 可选优化：添加卡片缩放效果 #

为了增强视觉层次感，可以让非居中的卡片轻微缩小，重写layoutAttributesForElements(in:)实现：

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    guard let attrsArray = super.layoutAttributesForElements(in: rect), let collectionView = collectionView else {
        return attrsArray
    }
    
    let centerX = collectionView.contentOffset.x + collectionView.bounds.width / 2
    
    attrsArray.forEach { attrs in
        // 计算卡片与中心的距离，动态调整缩放比例
        let distance = abs(attrs.center.x - centerX)
        let scale = max(0.85, 1 - distance / collectionView.bounds.width)
        attrs.transform = CGAffineTransform(scaleX: scale, y: scale)
    }
    
    return attrsArray
}

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