Swift5学习之旅之UISlider(滑块控制)、UIStepper(步进控制)

Swift5学习之旅----UISlider(滑块控制)、UIStepper(步进控制)

• UISlider

相关功能代码

import UIKit


class MySlider: UISlider {
    override init(frame: CGRect) {
        super.init(frame: frame)
        
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func slider(){
        self.minimumValue = 0.0
        self.maximumValue = 100.0
        self.setValue(20, animated: true)
        //两端的图标、滑动条的颜色
        self.minimumValueImage = UIImage(systemName: "slider.horizontal.3")
        self.maximumValueImage = UIImage(systemName: "slider.horizontal.below.rectangle")
        self.minimumTrackTintColor = UIColor.black
        self.maximumTrackTintColor = UIColor.gray
//        self.minimumTrackImage(for: .highlighted)
        // 滑块滑动停止后才触发ValueChanged事件
        self.isContinuous = false
        //滑块的设计
        self.thumbTintColor = UIColor.green
        self.setThumbImage(UIImage(systemName: "heart"), for: .normal)
        self.setThumbImage(UIImage(systemName: "heart"), for: .highlighted)
    }
    
}

• 根据Slider、Stepper自定义贝塞斯达曲线

import UIKit

class CircleProgressView: UIView {
    let circleLayer = CAShapeLayer()
    let progressLayer = CAShapeLayer()
//    var progress: CGFloat = 0.0
    override init(frame: CGRect){
        super.init(frame: frame)
        draw(frame)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        //画出一个环形的layer
        circleLayer.frame = self.bounds
        self.layer.addSublayer(circleLayer)
        circleLayer.fillColor = UIColor.clear.cgColor
        circleLayer.strokeColor = UIColor.gray.cgColor
        circleLayer.opacity = 0.2
        circleLayer.lineWidth = 5
        
        //勾勒layer的轨迹，贝塞斯达曲线
        let path: UIBezierPath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0), radius: 90, startAngle: CGFloat(Double.pi * -210) / 180.0, endAngle: CGFloat(Double.pi * 30) / 180.0, clockwise: true)
        circleLayer.path = path.cgPath
        //设置进度layer
        progressLayer.frame = bounds
        progressLayer.fillColor = UIColor.clear.cgColor
        progressLayer.strokeColor = UIColor.red.cgColor
        progressLayer.lineCap = .round
        progressLayer.lineWidth = 9
        progressLayer.path = path.cgPath
        progressLayer.strokeEnd = 0.2
        self.layer.addSublayer(progressLayer)
    }
    
}

• UIStepper
  相关代码

import UIKit

class MyStepper: UIStepper {
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.maximumValue = 100
        self.minimumValue = 0
        self.value = 20
        self.stepValue = 1
        //设置stepper可以按住不放连续更改值
        self.isContinuous = true
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

• 三者之间的联系实现

class ViewController: UIViewController {
//    let frame:CGRect = CGRect(x: 100, y: 400, width: 300, height: 300)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let slider = MySlider(frame: CGRect(x: 40, y: 100, width: self.view.bounds.width - 100, height: 40))
        slider.tag = 997
        slider.slider()
        self.view.addSubview(slider)
        let label = Mylabel(frame: CGRect(x: 80, y: 200, width: 200, height: 40))
        label.tag = 1000
        self.view.addSubview(label)
        
        // 响应事件
        slider.addTarget(self, action: #selector(sliderValueChange(slider:)), for: UIControl.Event.valueChanged)
        let activityIndicator = MyActivity(frame: CGRect(x: 50, y: 300, width: 50, height: 50))
        self.view.addSubview(activityIndicator)
        let circle = CircleProgressView(frame: CGRect(x: 100, y: 400, width: 300, height: 300))
        circle.tag = 999
        self.view.addSubview(circle)
        let stepper = MyStepper(frame: CGRect(x: 100, y: 700, width: 100, height: 100))
        stepper.addTarget(self, action: #selector(stepperValueChange(stepper:)), for: .valueChanged)
        stepper.tag = 998
        self.view.addSubview(stepper)
        
    }

    @objc func sliderValueChange(slider: UISlider){
        let value = slider.value
        let stepper = self.view.viewWithTag(998) as! UIStepper
        stepper.value = Double(value)
        let lab: UILabel = self.view.viewWithTag(1000) as! UILabel
        lab.text = String(format: "slider当前值为：%.2f", arguments: [value])
        let circleView: CircleProgressView = self.view.viewWithTag(999) as! CircleProgressView
        circleView.progressLayer.strokeEnd = CGFloat(value/100)
        print("slider当前值是\(value)")
    }
    
    
    @objc func stepperValueChange(stepper: UIStepper){
        let value = stepper.value
        let slider = self.view.viewWithTag(997) as! UISlider
        slider.value = Float(value)
        stepper.value = Double(value)
        let lab: UILabel = self.view.viewWithTag(1000) as! UILabel
        lab.text = String(format: "slider当前值为：%.2f", arguments: [value])
        let circleView: CircleProgressView = self.view.viewWithTag(999) as! CircleProgressView
        circleView.progressLayer.strokeEnd = CGFloat(value/100)
        print("slider当前值是\(value)")
    }
}

• 整体代码

Github还没上传，先用着Dropbox吧，看完有收获的感谢点个赞👍

Dropbox连接
https://www.dropbox.com/sh/g1l8cqg5jp5j5a9/AAAli9UDDtDls00DfZWISc-Ha?dl=0
Dropbox Slider