自定义UISlider

先上图，效果图如下：

image.png

如图，我们要做的就是在slider的滑块上面显示出Value。我的做法是在滑块上面放一个UILable,而UILable的坐标就成了实现功能的关键了。

1、创建自定义的UISlider,方便可视化布局和代码时的使用

class FrankSlider: UISlider {
    
    weak var valueLab:UILabel!
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setup()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.setup()
    }
    
    func setup() {
        let valueLab = UILabel(frame: CGRect.zero)
        valueLab.textColor = UIColor.white
        valueLab.textAlignment = .center
        valueLab.font = UIFont.systemFont(ofSize: 15)
        self.valueLab = valueLab
        self.addSubview(valueLab)
    }
    
    //该方法可修改滑块的触摸范围
    override func thumbRect(forBounds bounds: CGRect, trackRect rect: CGRect, value: Float) -> CGRect {
        let rect = super.thumbRect(forBounds: bounds, trackRect: rect, value: value)
        if let valueLab = self.valueLab {
            valueLab.frame = rect
            valueLab.text = "\(Int(self.value))"
            //默认滑块是在最上层的 
            //把valueLab放在slider的上面
            self.bringSubview(toFront: self.valueLab)
        }
        return rect
    }
}

2、关键的代码已经写完了，剩下的就是创建一个继承自FrankSlider的对象和设置相关的颜色了。

  func createSlider() {
        let slider:FrankSlider = FrankSlider(frame: CGRect(x: 15, y: 100, width:DEVICE_WIDTH-30 , height:30))
        slider.minimumValue = 1
        slider.maximumValue = 31
        slider.value = 1
        slider.minimumTrackTintColor = UIColor.themeBlue
        slider.maximumTrackTintColor = UIColor.seperateLine
        slider.thumbTintColor = UIColor.themeBlue
        self.view.addSubview(slider)
  }