UISlider实现
这个控件之前还真是用的少,现在项目有需要就用上了,昨天看到产品在讨论的一个页面的设计图,然后昨天没事就想着看能不能实现,哈哈,要是太麻烦就原谅我要拒绝了哈,哈哈哈~~~
效果图如下:

image.png
之前项目是有这个功能的,只是没有UISlider上的文字,现在的实现需求就是在UISlider添加文字就OK了。
实现思路:
1、肯定是不能使用系统原生的UISlider了,需要自己自定义View实现;
2、直接在UISlider上添加UILabel,调整frame居中显示就好;
一开始就往自定义UISlider上想了,觉得实在是麻烦了,第二个思路是后面想到的,反正就两个Label。
好像还真是能实现的哈。
代码如下:
oilLabel = UILabel(frame: CGRect.zero)
oilLabel.textColor = UIColor.white
oilLabel.textAlignment = .center
oilLabel.text = "哈哈"
oilLabel.font = UIFont.systemFont(ofSize: 15) self.addSubview(oilLabel)
oilLabel.snp.makeConstraints { (make) in
make.top.equalTo(20)
make.left.equalTo(slider)
make.width.equalTo(100)
make.height.equalTo(15)
}
这里添加到self上是因为我这里的cell里面的控件,依据自己项目来设置哈。
还学会了滑块添加文字的实现,这个只需要自定义UISlider,实现系统的方法即可。
//
// CustomSlider.swift
// testbar
//
// Created by 彭思 on 2019/11/20.
// Copyright © 2019 wulei. All rights reserved.
//
import UIKit
class CustomSlider: UISlider {
weak var valueLab:UILabel!
weak var oilLabel:UILabel!
weak var waterLabel:UILabel!
// 滑块的rect
var thumbRect: CGRect!
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)
let oilLabel = UILabel(frame: CGRect.zero)
oilLabel.textColor = UIColor.white
oilLabel.textAlignment = .center
oilLabel.font = UIFont.systemFont(ofSize: 15)
self.oilLabel = oilLabel
self.addSubview(oilLabel)
let waterLabel = UILabel(frame: CGRect.zero)
waterLabel.textColor = UIColor.white
waterLabel.textAlignment = .center
waterLabel.font = UIFont.systemFont(ofSize: 15)
self.waterLabel = waterLabel
self.addSubview(waterLabel)
}
//该方法可修改滑块的触摸范围
override func thumbRect(forBounds bounds: CGRect, trackRect rect: CGRect, value: Float) -> CGRect {
let rect = super.thumbRect(forBounds: bounds, trackRect: rect, value: value)
self.thumbRect = rect
if let valueLab = self.valueLab {
valueLab.frame = rect
valueLab.text = "\(Int(self.value))"
//默认滑块是在最上层的
//把valueLab放在slider的上面
self.bringSubviewToFront(self.valueLab)
}
// if let valueLab = self.oilLabel {
// valueLab.frame = CGRect(x: 0, y: 0, width: Int(Float(value / 100) * 300), height: 30)
// valueLab.text = "油"
// //默认滑块是在最上层的
// //把valueLab放在slider的上面
// self.bringSubviewToFront(self.oilLabel)
// }
// if let valueLab = self.waterLabel {
// valueLab.frame = CGRect(x: 150, y: 0, width: 150, height: 30)
// valueLab.text = "水"
// //默认滑块是在最上层的
// //把valueLab放在slider的上面
// self.bringSubviewToFront(self.waterLabel)
// }
return rect
}
override func trackRect(forBounds bounds: CGRect) -> CGRect {
return CGRect(x: 0, y: 0, width: bounds.width, height: 30)
}
}
实现:
func createSlider() {
let slider:CustomSlider = CustomSlider(frame: CGRect(x: 15, y: 100, width:300 , height:30))
slider.minimumValue = 1
slider.maximumValue = 31
slider.value = 1
slider.minimumTrackTintColor = UIColor.red
slider.maximumTrackTintColor = UIColor.blue
slider.thumbTintColor = UIColor.green
slider.setMinimumTrackImage(UIImage(named: "red")?.resizableImage(withCapInsets: UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)), for: .normal)
self.view.addSubview(slider)
oilLabel = UILabel(frame: CGRect.zero)
oilLabel.textColor = UIColor.white
oilLabel.textAlignment = .center
oilLabel.text = "油"
oilLabel.font = UIFont.systemFont(ofSize: 15)
self.view.addSubview(oilLabel)
oilLabel.frame = CGRect(x: 15, y: 100, width: 100, height: 30)
slider.addTarget(self, action: #selector(valueChange(sender:)), for: .valueChanged)
waterLabel = UILabel(frame: CGRect.zero)
waterLabel.textColor = UIColor.white
waterLabel.textAlignment = .center
waterLabel.text = "水"
waterLabel.font = UIFont.systemFont(ofSize: 15)
self.view.addSubview(waterLabel)
waterLabel.frame = CGRect(x: 15, y: 100, width: 100, height: 30)
slider.addTarget(self, action: #selector(valueChange(sender:)), for: .valueChanged)
}
@objc func valueChange(sender: CustomSlider) {
let x = sender.thumbRect.origin.x
oilLabel.frame = CGRect(x: 15, y: 100, width: x + 15, height: 30)
waterLabel.frame = CGRect(x: oilLabel.frame.width + 15 , y: 100, width: sender.frame.width - x - 15, height: 30)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
最后效果图如下:
原谅左边设了一个图片,有点小变形,哈哈~~
细节问题再处理~~~