先上圖，效果圖如下：
image.png
如圖杂曲，我們要做的就是在slider的滑塊上面顯示出Value庶艾。我的做法是在滑塊上面放一個UILable,而UILable的坐標(biāo)就成了實現(xiàn)功能的關(guān)鍵了。
1擎勘、創(chuàng)建自定義的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))"
//默認(rèn)滑塊是在最上層的
//把valueLab放在slider的上面
self.bringSubview(toFront: self.valueLab)
}
return rect
}
}
2咱揍、關(guān)鍵的代碼已經(jīng)寫完了，剩下的就是創(chuàng)建一個繼承自FrankSlider的對象和設(shè)置相關(guān)的顏色了棚饵。
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)
}
