Swift 定义一个渐变进度条,在项目中的实际应用

米米狗 2019-03-05 16:56:46 637
本文来自 有趣程序猿 ,作者 米米狗

当然这是自定义弹框ZHFToolBox的很小一部分:渐变进度条。

将项目链接demo里,进度条代码拖 PopProgressBar.swift 这个文件按照在ViewController里的使用即可

先放上链接地址:

[https://github.com/FighterLightning/ZHFToolBox.git]

再来看效果图:

2.gif

这是为自定义弹框添加的一个渐变进度条。

自定义这个进度条的思路:

一、结构分析

从gif图可以看出该控件由1.半透明的黑底PopProgressBar,2.进度条progressView。3.移动的提示hintBtn

 //自定义一个继承UIView 的PopProgressBar视图
  class PopProgressBar: UIView
   //背景区域的颜色和透明度
    var backgroundColor1:UIColor  = UIColor.init(red: 0, green: 0, blue: 0, alpha: 0.4)
    //进度条view
    var progressView: UIView =  UIView()
    //提示按钮
    var hintBtn: UIButton!
   var beforeValue :CGFloat = 0 //前一个值
    var displayLink: CADisplayLink//定时器 承接控制器里的定时器,删除view时保证定时器关闭
    var path: UIBezierPath!
    var progressLayer :CAShapeLayer!

二、构建PopProgressBar视图初始化代码及相关代码

//初始化视图
    func initPopBackGroundView() -> PopProgressBar{
}
//弹出View
    func addAnimate(view:PopProgressBar) {
}
//添加进度条
    func addProgressView() {
}
 //为进度条添加遮罩,及layer
    @objc func gradentWith(frame:CGRect) {
}
//当前进度
    func passValue(currentValue: CGFloat,allValue: CGFloat) {
}
//移除或者中断进度
    @objc func tapBtnAndcancelBtnClick() {
}

三、在ViewController里的使用

//1定义一下
    var progressBar: PopProgressBar! //进度条
    var displayLink: CADisplayLink! //定时器
    var currentValue: CGFloat = 0;
//2.在需要加载进度条的方法里实现
//弹出一个模拟渐变进度条
            currentValue = 0
            progressBar = PopProgressBar()
            progressBar.addAnimate(view: progressBar.initPopBackGroundView())
  //定时器模拟实时数据更新
            displayLink = CADisplayLink.init(target: self, selector: #selector(displayLinkRun))
            displayLink.add(to: RunLoop.current, forMode: RunLoop.Mode.defaultRunLoopMode)
            progressBar.displayLink = displayLink
//3.模拟实时数据更新调用
@objc func displayLinkRun(){
        if currentValue > 1 {
            //加载完成 关闭定时器,隐藏进度条
            displayLink.invalidate()
            displayLink = nil
            progressBar.removeFromSuperview()
        }
        else{
           currentValue = currentValue + 0.005;
           progressBar.passValue(currentValue: currentValue, allValue: 1.0)
        }
    }