启用分页的水平滚动UICollectionView：实现居中单元格及左右部分可见

我来帮你搞定这个需求～要实现非首尾项时单元格居中、左右部分可见的效果，需要调整布局参数+自定义滚动分页逻辑，具体步骤如下：

1. 调整布局参数（item size + sectionInsets） #

首先要让单元格的宽度和内边距配合，确保中间单元格居中时左右能露出相邻单元格的部分。

修改你的布局代码： #

// 定义左右每个单元格要露出的宽度，可根据需求调整
private let sideExposureWidth: CGFloat = 25

private var sectionInsets: UIEdgeInsets {
    return UIEdgeInsets(top: 8, left: sideExposureWidth, bottom: 8, right: sideExposureWidth)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // 单元格宽度 = 集合视图宽度 - 左右露出宽度的两倍
    let itemWidth = collectionView.frame.width - 2 * sideExposureWidth
    return CGSize(width: itemWidth, height: collectionView.frame.height - 16)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 10 // 保持你原来的间距即可
}

这里的核心逻辑是：左右内边距等于我们要露出的相邻单元格宽度，单元格宽度则减去这部分，确保滚动到中间项时，左右刚好能看到相邻单元格的边缘。

2. 自定义滚动分页逻辑（替代默认分页） #

默认的isPagingEnabled是按集合视图的边界来分页的，无法实现居中对齐。所以我们需要关闭默认分页，手动计算滚动结束后的目标偏移量：

第一步：关闭默认分页 #

在初始化UICollectionView的地方，设置：

collectionView.isPagingEnabled = false

第二步：实现UIScrollViewDelegate方法 #

确保你的ViewController遵循UIScrollViewDelegate，然后添加以下方法：

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    guard let collectionView = scrollView as? UICollectionView,
          let layout = collectionViewLayout as? UICollectionViewFlowLayout else {
        return
    }
    
    let itemWidth = layout.itemSize.width
    let spacing = layout.minimumLineSpacing
    let totalItemWidth = itemWidth + spacing // 单个单元格+间距的总宽度
    
    // 计算系统预估的目标索引
    var targetIndex = Int((targetContentOffset.pointee.x + collectionView.contentInset.left) / totalItemWidth)
    
    // 根据滚动速度调整索引（快速滑动时直接跳到下/上一个）
    if velocity.x > 0.1 {
        targetIndex += 1
    } else if velocity.x < -0.1 {
        targetIndex -= 1
    }
    
    // 确保索引在合法范围内（不越界）
    targetIndex = max(0, min(targetIndex, collectionView.numberOfItems(inSection: 0) - 1))
    
    // 计算让单元格居中的目标偏移量
    let targetOffsetX = CGFloat(targetIndex) * totalItemWidth - collectionView.contentInset.left
    targetContentOffset.pointee = CGPoint(x: targetOffsetX, y: 0)
}

3. 效果验证 #

• 非首尾项：滚动结束后，当前单元格会居中显示，左右两侧的相邻单元格各露出sideExposureWidth宽度的部分
• 首尾项：第一个单元格左侧无内容，右侧露出部分；最后一个单元格右侧无内容，左侧露出部分，符合需求

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