如何实现Swift&UIKit中Thumb周围带曲线的自定义CustomSlider？

一、修改现有代码实现目标效果 #

你的现有代码已经具备基础绘制逻辑，只需调整参数和路径类型，就能实现Thumb周围的平滑曲线效果。修改后的代码如下：

private func drawCurvedLine() {
    guard let context = UIGraphicsGetCurrentContext() else { return }
    
    let trackRect = self.trackRect(forBounds: bounds)
    let thumbRect = self.thumbRect(forBounds: bounds, trackRect: trackRect, value: value)
    
    // 基于Thumb尺寸动态计算参数，适配不同大小的Thumb
    let thumbRadius = thumbRect.width / 2
    let startX = trackRect.minX
    let endX = trackRect.maxX
    let thumbCenterX = thumbRect.midX
    let thumbCenterY = thumbRect.midY
    // 曲线凸起高度，可根据需求调整
    let curveOffset: CGFloat = thumbRadius + 8
    
    context.setStrokeColor(UIColor.black.cgColor)
    context.setLineWidth(1.5)
    context.setLineCap(.round)
    
    // 绘制Thumb左侧的直线
    context.move(to: CGPoint(x: startX, y: thumbCenterY))
    context.addLine(to: CGPoint(x: thumbCenterX - thumbRadius, y: thumbCenterY))
    
    // 用圆弧替代贝塞尔曲线，让曲线更贴合圆形Thumb轮廓
    let arcCenter = CGPoint(x: thumbCenterX, y: thumbCenterY - curveOffset)
    context.addArc(center: arcCenter,
                   radius: thumbRadius + curveOffset,
                   startAngle: .pi,
                   endAngle: 0,
                   clockwise: false)
    
    // 绘制Thumb右侧的直线
    context.addLine(to: CGPoint(x: endX, y: thumbCenterY))
    context.strokePath()
}

关键修改说明：

• 基于Thumb的实际半径动态计算参数，避免硬编码数值导致的适配问题
• 使用addArc绘制圆弧替代贝塞尔曲线，让曲线与圆形Thumb的轮廓更匹配
• 调整圆弧中心位置，使凸起效果更自然
• 开启setLineCap(.round)让线段端点与曲线衔接更平滑

二、完整自定义滑块实现要点 #

1. 在重绘方法中调用曲线绘制逻辑，并在滑块值变化时触发重绘：

override func draw(_ rect: CGRect) {
    super.draw(rect)
    drawCurvedLine()
}

override func setValue(_ value: Float, animated: Bool) {
    super.setValue(value, animated: animated)
    setNeedsDisplay()
}

2. 若需自定义Thumb样式，可重写thumbRect(forBounds:trackRect:value:)方法调整Thumb的位置和尺寸。

三、推荐的第三方滑块库 #

如果不想手动实现，以下CocoaPods库支持高度自定义的轨道样式：

• RangeSeekSlider：支持单/双滑块，提供灵活的轨道自定义接口，可通过自定义绘制实现曲线环绕效果
• HGCircularSlider：专注于圆形滑块场景，支持自定义轨道路径，适合需要弧形环绕的需求
• CSRangeSlider：轻量级滑块库，简洁的API设计，便于快速定制轨道样式

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