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

在 MATLAB 的 App Designer 中使用滑块控制波形放大可以通过以下步骤实现: 1. 在 App Designer 中添加一个滑块控件(Slider),并设置其最小值、最大值和初始值。 2. 在 App Designer 中添加一个绘图控件(Axes),用于显示波形。 3. 在 App Designer 中添加一个回调函数,用于响应滑块值的变化。可以使用 MATLAB 的 plot 函数绘制波形,并根据滑块值调整波形的放大倍数。 4. 在回调函数中更新绘图控件中的波形。 下面是一个示例代码,演示如何使用滑块控制波形放大: ```matlab classdef MyApp < matlab.apps.AppBase % Properties that correspond to app components properties (Access = public) UIFigure matlab.ui.Figure Slider matlab.ui.control.Slider Axes matlab.ui.control.UIAxes end methods (Access = private) % Code that executes after component creation function startupFcn(app) % Initialize plot x = linspace(0, 10, 1000); y = sin(x); plot(app.Axes, x, y); end % Value changed function: Slider function SliderValueChanged(app, event) % Get slider value zoomFactor = app.Slider.Value; % Get plot data x = app.Axes.XLim; y = app.Axes.YLim; plotData = app.Axes.Children; % Update plot data plotData.XData = x ./ zoomFactor; plotData.YData = y ./ zoomFactor; % Update plot xlim(app.Axes, x ./ zoomFactor); ylim(app.Axes, y ./ zoomFactor); end end % App initialization and construction methods (Access = private) % Create UIFigure and components function createComponents(app) % Create UIFigure app.UIFigure = uifigure; app.UIFigure.Position = [100 100 640 480]; app.UIFigure.Name = 'My App'; % Create Slider app.Slider = uislider(app.UIFigure); app.Slider.Limits = [1 10]; app.Slider.ValueChangedFcn = createCallbackFcn(app, @SliderValueChanged, true); app.Slider.Position = [54 23 150 3]; % Create Axes app.Axes = uiaxes(app.UIFigure); title(app.Axes, 'Waveform'); xlabel(app.Axes, 'Time'); ylabel(app.Axes, 'Amplitude'); app.Axes.Position = [54 72 536 373]; end end % App creation and deletion methods (Access = public) % Construct app function app = MyApp % Create UIFigure and components createComponents(app) % Register the app with App Designer registerApp(app, app.UIFigure) % Run the startup function runStartupFcn(app, @startupFcn); % Configure app window app.UIFigure.Visible = 'on'; end % Code that executes before app deletion function delete(app) % Delete UIFigure when app is deleted delete(app.UIFigure); end end end ``` 在这个示例中,我们在 `startupFcn` 回调函数中初始化了绘图控件中的波形,使用 `plot` 函数绘制了一个正弦波形。 在 `SliderValueChanged` 回调函数中,我们获取了滑块的值,并使用该值来计算波形的放大倍数。然后,我们更新了绘图控件中波形的数据,通过修改 `plotData.XData` 和 `plotData.YData` 属性,将波形的横轴和纵轴坐标缩小了对应的倍数。最后,我们使用 `xlim` 和 `ylim` 函数更新了绘图控件中波形的坐标轴范围,实现了波形的放大效果。 你可以在 App Designer 中打开这个示例代码,尝试运行并修改代码,以适应你的应用场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值