如何在Swift中实现类似iOS控制中心的滑块控件？

要实现支持任意位置点击拖动、可拖出控件范围的滑块，直接用UISlider并不合适——它的交互逻辑被固定死，修改成本极高。推荐以下两种更灵活的实现方式：

一、自定义UIView + UIPanGestureRecognizer（最优选择） #

完全自定义控件逻辑，适配控制中心的交互特性，步骤清晰且扩展性强：

• 核心逻辑：自己绘制滑块轨道和指示器（thumb），通过拖动手势响应所有触摸操作，不受系统控件限制。
• 具体实现：
  1. 创建自定义UIView子类，重写draw(_ rect:)方法绘制轨道（比如垂直方向的长条）和thumb（圆形指示器）。
  2. 添加UIPanGestureRecognizer，处理手势的三个关键状态：
     • .began：记录初始触摸位置和当前进度值（0-1区间）。
     • .changed：计算手势移动的偏移量，转换成进度值——允许超出0-1范围，模拟控制中心的"拖出边界"效果。
     • .ended/.cancelled：如果进度超出0或1，添加动画让thumb回弹到合法边界。
  3. 对外暴露progress属性和回调闭包，方便外部监听值变化。

核心代码示例 #

import UIKit

class ControlCenterSlider: UIView {
    // 进度值：0（最底部）~1（最顶部）
    var progress: CGFloat = 0.5 {
        didSet {
            setNeedsDisplay()
            valueChanged?(progress)
        }
    }
    // 进度变化回调
    var valueChanged: ((CGFloat) -> Void)?
    
    private let thumbSize: CGFloat = 20
    private var initialProgress: CGFloat = 0
    private var initialTouchY: CGFloat = 0
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupGesture()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupGesture()
    }
    
    private func setupGesture() {
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan(_:)))
        addGestureRecognizer(panGesture)
    }
    
    @objc private func handlePan(_ gesture: UIPanGestureRecognizer) {
        let touchLocation = gesture.location(in: self)
        
        switch gesture.state {
        case .began:
            initialProgress = progress
            initialTouchY = touchLocation.y
        case .changed:
            let deltaY = touchLocation.y - initialTouchY
            // 垂直滑块：向下拖动进度减小，向上拖动进度增大
            let progressDelta = deltaY / bounds.height
            progress = initialProgress - progressDelta
            // 不限制范围，允许拖出边界
        case .ended, .cancelled:
            // 回弹到0-1的合法区间
            let clampedProgress = max(0, min(1, progress))
            UIView.animate(withDuration: 0.2) {
                self.progress = clampedProgress
            }
        default:
            break
        }
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        // 绘制背景轨道
        let trackRect = CGRect(x: bounds.midX - 2, y: 0, width: 4, height: bounds.height)
        let trackPath = UIBezierPath(rect: trackRect)
        UIColor.systemGray.withAlphaComponent(0.3).setFill()
        trackPath.fill()
        
        // 绘制已填充的进度轨道
        let filledHeight = bounds.height * (1 - progress)
        let filledRect = CGRect(x: bounds.midX - 2, y: bounds.height - filledHeight, width: 4, height: filledHeight)
        let filledPath = UIBezierPath(rect: filledRect)
        UIColor.systemBlue.setFill()
        filledPath.fill()
        
        // 绘制thumb指示器
        let thumbY = bounds.height * (1 - progress) - thumbSize/2
        let thumbRect = CGRect(x: bounds.midX - thumbSize/2, y: thumbY, width: thumbSize, height: thumbSize)
        let thumbPath = UIBezierPath(ovalIn: thumbRect)
        UIColor.white.setFill()
        thumbPath.fill()
        
        // 添加thumb阴影
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 0.2
        layer.shadowOffset = CGSize(width: 0, height: 2)
        layer.shadowRadius = 4
    }
}

二、自定义UIControl子类 #

如果希望复用系统UIControl的事件机制（比如通过addTarget(_:action:for:)监听变化），可以继承UIControl，重写触摸事件方法：

• 重写beginTracking(_ touch: UITouch, with event: UIEvent?)、continueTracking(_ touch: UITouch, with event: UIEvent?)、endTracking(_ touch: UITouch?, with event: UIEvent?)，自己处理触摸点的位置计算，忽略是否点击在thumb上的判断。
• 这种方式的优势是符合系统控件的使用习惯，但自定义绘制的逻辑和第一种方式类似。

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