Swift 4：如何自动选中CollectionView中进入视野的项？

这个需求在图片轮播、预览类场景里特别实用，我来给你拆解实现步骤，确保滑动时自动选中视野内的项并同步更新对应的ImageView：

核心思路 #

通过监听CollectionView的滚动事件，定位当前视野中心的目标项，自动选中它后触发ImageView的更新逻辑，全程无需用户手动点击。

具体实现步骤 #

1. 基础配置检查与初始化 #

首先确保你的CollectionView允许选中（默认是开启的，若手动修改过需确认）：

collectionView.allowsSelection = true

同时在viewDidLoad中默认选中第一项，初始化ImageView的显示内容：

override func viewDidLoad() {
    super.viewDidLoad()
    // 完成CollectionView的数据源、代理、布局等基础配置
    
    // 默认选中第一项
    let firstIndexPath = IndexPath(item: 0, section: 0)
    collectionView.selectItem(at: firstIndexPath, animated: false, scrollPosition: .left)
    // 初始化ImageView显示第一张图
    updateImageView(for: firstIndexPath)
}

2. 监听滚动停止事件 #

实现UIScrollViewDelegate的方法，在滚动停止时触发自动选中逻辑（如果需要实时滚动中也更新，可以用scrollViewDidScroll，但建议滚动停止后处理，避免ImageView频繁刷新）：

// 滚动减速停止时触发
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    autoSelectVisibleCenterItem()
}

// 手动拖拽结束且无减速时触发
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    if !decelerate {
        autoSelectVisibleCenterItem()
    }
}

3. 核心自动选中逻辑 #

编写方法定位视野中心的项，自动选中并避免重复操作：

private func autoSelectVisibleCenterItem() {
    guard let collectionView = self.collectionView else { return }
    
    // 计算CollectionView视野中心的坐标
    let centerX = collectionView.contentOffset.x + collectionView.bounds.width / 2
    let centerPoint = CGPoint(x: centerX, y: collectionView.bounds.midY)
    
    // 根据中心点获取对应的indexPath
    guard let targetIndexPath = collectionView.indexPathForItem(at: centerPoint) else { return }
    
    // 如果当前已经选中该项，直接返回避免重复操作
    if collectionView.indexPathsForSelectedItems?.contains(targetIndexPath) == true {
        return
    }
    
    // 自动选中目标项，添加动画并保持项在视野居中
    collectionView.selectItem(at: targetIndexPath, animated: true, scrollPosition: .centeredHorizontally)
    
    // 更新ImageView显示对应图片
    updateImageView(for: targetIndexPath)
}

4. 实现ImageView更新逻辑 #

编写方法根据选中的indexPath更新ImageView的内容：

private func updateImageView(for indexPath: IndexPath) {
    // 假设你有一个存储图片数据的数组yourImageDataArray
    let targetImage = yourImageDataArray[indexPath.item]
    yourImageView.image = targetImage
}

5. 兼容手动选中（可选） #

如果需要兼容用户手动点击cell的场景，实现CollectionView的选中代理方法即可：

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    updateImageView(for: indexPath)
}

适配纵向布局（可选） #

如果你的CollectionView是纵向布局，只需调整两处：

• 把计算中心点的centerX改成centerY
• 把scrollPosition改成.centeredVertically

内容的提问来源于stack exchange，提问作者Michael Baumgärtner