Swift实现带刻度吸附的UISlider时刻度子视图位置偏移问题

问题根源 #

• 初始化阶段调用setupView时Slider尚未完成布局，获取的frame尺寸不准确
• 坐标计算使用整数除法，存在精度丢失，导致刻度排布不均匀
• 直接使用Slider整体宽度计算坐标，未考虑UISlider左右两侧为滑块预留的边距，滑块实际可滑动的轨道宽度小于Slider本身的frame宽度

修复后完整代码 #

protocol SnappingSliderDelegate {
    func sliderChanged(_ value: Int)
}

class SnappingSlider: UISlider {
    
    let step: CGFloat = 5
    let start: CGFloat = 15
    let end: CGFloat = 70
    
    var delegate: SnappingSliderDelegate?
    // 存储所有刻度视图
    private var tickViews: [UIView] = []
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        setupView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }
    
    func setupView(){
        minimumValue = Float(start)
        maximumValue = Float(end)
        
        // 仅创建刻度视图，不设置frame
        for i in Int(start)...Int(end) where i % Int(step) == 0 {
            let view = UIView()
            view.backgroundColor = .lightGray
            insertSubview(view, at: 0)
            tickViews.append(view)
        }
        
        addTarget(self, action: #selector(valueChanged), for: .valueChanged)
    }
    
    // 重写布局方法，每次布局更新时重新计算刻度位置
    override func layoutSubviews() {
        super.layoutSubviews()
        
        // 获取滑块轨道实际的frame
        let trackRect = self.trackRect(forBounds: bounds)
        let valueRange = end - start
        
        for (index, tickView) in tickViews.enumerated() {
            let currentValue = start + CGFloat(index) * step
            // 计算当前刻度占总范围的比例
            let ratio = (currentValue - start) / valueRange
            // 计算刻度的x坐标，减去宽度一半保证中心对齐吸附点
            let tickX = trackRect.minX + trackRect.width * ratio - 0.5
            tickView.frame = CGRect(x: tickX, y: 0, width: 1, height: 29)
        }
    }
    
    @objc func valueChanged(_ sender: UISlider){
        let step: Float = 5
        let roundedValue = round(sender.value / step) * step
        self.value = roundedValue
        
        delegate?.sliderChanged(Int(roundedValue))
    }

}

核心修改说明 #

• 新增私有数组存储刻度视图，避免重复创建视图
• 将刻度位置计算逻辑移到layoutSubviews方法中，每次Slider尺寸变动时自动更新刻度位置，适配不同布局场景
• 使用系统原生的trackRect(forBounds:)方法获取滑块实际可滑动的轨道区域，排除左右预留边距的干扰
• 采用比例浮点运算计算坐标，避免整数除法的精度丢失，确保所有刻度精准对齐吸附点位

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