如何实现带刻度点的5等分滑块及拇指吸附刻度功能？

嘿，我来帮你解决这个滑块的问题！你之前遇到的StackView覆盖导致滑块无法操作、拇指不能精准停在刻度上的问题，其实有两个靠谱的方案，我给你详细拆解下：

方案一：自定义UISlider（推荐，更优雅） #

这个方法不用额外的StackView，直接在滑块本身绘制刻度点，同时处理拇指的吸附逻辑，完美避免层级交互问题。

步骤1：创建自定义Slider子类 #

创建一个继承自UISlider的类（比如SteppedSlider），核心做两件事：绘制刻度点、处理值的吸附。

1.1 绘制5个等距刻度点

重写draw(_ rect: CGRect)方法，在滑块轨道上绘制小圆点，代码里还做了可配置的优化，方便你调整样式：

import UIKit

class SteppedSlider: UISlider {
    // 可在Storyboard直接调整的属性
    @IBInspectable var stepCount: Int = 5
    @IBInspectable var dotRadius: CGFloat = 4
    @IBInspectable var dotColor: UIColor = .darkGray
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        // 获取滑块轨道的实际区域
        let trackRect = self.trackRect(forBounds: bounds)
        // 轨道有效宽度（去掉左右边距）
        let trackWidth = trackRect.width
        // 5个刻度对应4个间隔，计算每个间隔的宽度
        let stepInterval = trackWidth / CGFloat(stepCount - 1)
        
        // 循环绘制5个刻度点
        for i in 0..<stepCount {
            let dotX = trackRect.minX + stepInterval * CGFloat(i)
            let dotY = trackRect.midY // 垂直居中于轨道
            
            let dotPath = UIBezierPath(ovalIn: CGRect(
                x: dotX - dotRadius,
                y: dotY - dotRadius,
                width: dotRadius * 2,
                height: dotRadius * 2
            ))
            dotColor.setFill()
            dotPath.fill()
        }
    }

1.2 实现拇指吸附刻度逻辑

让滑块的拇指只能停在刻度对应的位置，我们可以重写滑块的赋值方法，同时处理拖动过程中的实时吸附：

// 重写setValue，确保值始终吸附到最近的刻度
    override func setValue(_ value: Float, animated: Bool) {
        let steppedValue = nearestSteppedValue(for: value)
        super.setValue(steppedValue, animated: animated)
    }
    
    // 计算最近的刻度对应值
    private func nearestSteppedValue(for value: Float) -> Float {
        let step = (maximumValue - minimumValue) / Float(stepCount - 1)
        let roundedSteps = round((value - minimumValue) / step)
        return minimumValue + roundedSteps * step
    }
    
    // 拖动过程中实时吸附（可选，若只需要结束时吸附可删除此方法）
    override func continueTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
        let shouldContinue = super.continueTracking(touch, with: event)
        self.value = nearestSteppedValue(for: self.value)
        return shouldContinue
    }
}

步骤2：使用自定义Slider #

在Storyboard或代码中创建这个滑块，设置好minimumValue和maximumValue（比如0到4，或0到1），就能直接用了！它会自动显示5个刻度点，拇指拖动时会精准停在每个刻度上。

方案二：修复StackView的交互问题 #

如果你还是想用之前的StackView方案，只需要解决一个核心问题：关闭StackView的交互，让触摸事件穿透到下面的滑块。

具体操作： #

• 在Storyboard中选中StackView，取消勾选User Interaction Enabled选项；
• 或在代码中设置：stackView.isUserInteractionEnabled = false

之后再配合方案一里的nearestSteppedValue方法（监听滑块的valueChanged事件，在事件回调中把值替换为吸附后的刻度值），就能实现拇指停在刻度点的效果。

不过这个方案不如自定义Slider优雅，需要手动对齐刻度点和滑块轨道，后期维护容易出问题。

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