如何在UICollectionView中实现类似App Store的自定义分页效果

要实现App Store应用专区的分页效果（前后单元格边缘可见），需要调整CollectionView的布局约束、Cell尺寸、内边距，并替换默认分页逻辑，具体修改如下：

1. 修正CollectionView约束 #

移除原约束中超出屏幕的偏移，让CollectionView贴合安全区域：

//Set constraints
imagesColletionView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    imagesColletionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
    imagesColletionView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
    imagesColletionView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
    imagesColletionView.heightAnchor.constraint(equalToConstant: UIScreen.main.bounds.height/4)
])

2. 调整FlowLayout配置 #

修改滚动方向、行间距，关闭默认分页（默认分页基于CollectionView宽度，不符合需求）：

// Set up horizontal scrolling
if let layout = imagesColletionView.collectionViewLayout as? UICollectionViewFlowLayout {
    layout.scrollDirection = .horizontal
    layout.minimumLineSpacing = 16 // 相邻Cell之间的间距，可按需调整
    imagesColletionView.setCollectionViewLayout(layout, animated: false)
}

3. 自定义Cell尺寸与Section内边距 #

让Cell宽度小于CollectionView宽度，同时设置Section内边距实现首尾Cell边缘露出：

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        let cellWidth = collectionView.bounds.width - 40 // 左右各露出20pt的相邻Cell区域
        let cellHeight = collectionView.bounds.height
        return CGSize(width: cellWidth, height: cellHeight)
    }
    
    // 设置Section内边距，让首尾Cell在边缘露出部分区域
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
    }
}

4. 自定义分页逻辑 #

在滚动停止后自动将当前居中的Cell对齐到屏幕中间，模拟分页体验：

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    // 计算当前居中位置对应的Cell索引
    let centerX = scrollView.contentOffset.x + scrollView.bounds.width / 2
    let cellWidth = imagesColletionView.bounds.width - 40
    let spacing = (imagesColletionView.collectionViewLayout as! UICollectionViewFlowLayout).minimumLineSpacing
    let itemTotalWidth = cellWidth + spacing
    
    let index = Int(round(centerX / itemTotalWidth))
    guard index >= 0 && index < colors.count else { return }
    
    let indexPath = IndexPath(item: index, section: 0)
    // 滚动到居中位置
    imagesColletionView.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
    
    // 同步TableView选中状态
    let selectedRowIndexPath = IndexPath(row: index, section: 0)
    namesTableView.selectRow(at: selectedRowIndexPath, animated: true, scrollPosition: .top)
}

5. 保留滚动到指定Item的逻辑 #

确保手动滚动时Cell能正确居中：

func scrollToCollectionViewItem(at indexPath: IndexPath) {
    let collectionViewIndexPath = IndexPath(item: indexPath.row, section: 0)
    imagesColletionView.scrollToItem(at: collectionViewIndexPath, at: .centeredHorizontally, animated: true)
}

关键说明 #

• 通过insetForSectionAt设置左右内边距，让首尾Cell在CollectionView边缘露出部分区域；
• 缩小Cell宽度，配合内边距实现相邻Cell的可见效果；
• 关闭默认分页，改用自定义计算实现滚动停止后自动居中到当前Cell，模拟分页体验；
• 行间距minimumLineSpacing和Cell宽度的偏移值可根据视觉需求灵活调整。

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