先上图，效果图如下：
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)
}
