如何重写UICollectionView滚动指示器？实现自定义气泡样式

要把系统默认的矩形滚动指示器改成圆形气泡（或其他自定义外观），核心思路是替换系统指示器——先隐藏系统自带的，然后自己实现一个自定义视图，绑定到CollectionView的滚动事件上同步位置。下面是具体的实现步骤和代码示例：

步骤1：隐藏系统默认指示器 #

首先在初始化UICollectionView时，关闭系统的水平滚动指示器：

collectionView.showsHorizontalScrollIndicator = false

步骤2：创建自定义气泡指示器 #

我们可以用一个UIView来做圆形气泡，设置圆角、背景色等样式，也可以换成UIImageView用图片当指示器：

private func setupCustomIndicator() {
    customIndicator = UIView()
    customIndicator.backgroundColor = .systemBlue // 气泡颜色
    customIndicator.layer.cornerRadius = 8 // 圆形效果，取宽高的一半
    customIndicator.layer.shadowColor = UIColor.black.cgColor
    customIndicator.layer.shadowOpacity = 0.2
    customIndicator.layer.shadowOffset = CGSize(width: 0, height: 2)
    // 初始隐藏，和系统指示器的默认行为一致
    customIndicator.alpha = 0
    
    // 添加到视图，用自动布局固定大小和位置
    view.addSubview(customIndicator)
    customIndicator.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        customIndicator.widthAnchor.constraint(equalToConstant: 16),
        customIndicator.heightAnchor.constraint(equalToConstant: 16),
        customIndicator.bottomAnchor.constraint(equalTo: collectionView.bottomAnchor, constant: -8),
        // 初始位置居中，后续滚动时动态更新
        customIndicator.centerXAnchor.constraint(equalTo: view.centerXAnchor)
    ])
}

步骤3：绑定滚动事件，同步指示器位置 #

通过UIScrollViewDelegate的方法监听滚动，计算指示器的位置并实时更新：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    // 计算滚动比例：提前处理内容不足滚动的情况，避免除以0
    let maxOffset = max(scrollView.contentSize.width - scrollView.bounds.width, 0)
    guard maxOffset > 0 else {
        // 内容不够滚动时，隐藏指示器
        customIndicator.alpha = 0
        return
    }
    let scrollRatio = scrollView.contentOffset.x / maxOffset
    
    // 计算指示器的水平偏移：可视区域宽度减去指示器宽度，再乘以滚动比例
    let indicatorOffsetX = scrollRatio * (scrollView.bounds.width - customIndicator.bounds.width)
    
    // 平滑更新位置
    customIndicator.transform = CGAffineTransform(translationX: indicatorOffsetX, y: 0)
    
    // 显示指示器
    UIView.animate(withDuration: 0.2) {
        self.customIndicator.alpha = 1
    }
}

步骤4：模拟系统指示器的显示/隐藏行为 #

系统指示器会在滚动停止后自动隐藏，我们也需要实现这个逻辑：

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    hideIndicator()
}

func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    if !decelerate {
        hideIndicator()
    }
}

private func hideIndicator() {
    UIView.animate(withDuration: 0.3) {
        self.customIndicator.alpha = 0
    }
}

额外优化点 #

• 如果需要复用这个功能，可以把自定义指示器封装成UICollectionView的子类，或者写一个扩展，避免重复写代码。
• 要是想做更复杂的交互（比如点击指示器跳转位置），可以给自定义指示器添加点击手势，计算对应的偏移量后调用collectionView.setContentOffset(_:animated:)实现跳转。

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