自定义UISlider实现

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()
    }

最后效果图如下：

image.png

原谅左边设了一个图片，有点小变形，哈哈~~
细节问题再处理~~~