前言#

在很多场合我们都需要检测数据的实时动态，比如安装／下载／上传　等，为了人性化设计我们会让用户看到这些实时的状态，本文就要将这种实时状态的数据显示给用户看到，比如下载 。本文以下载为例，自定义了一个显示当前下载状态的进度圆。效果如下：

测试.gif

技术要点

调用UIview的setNeedsDisplay方法来触发drawRect方法从而来实现绘画图形

设置属性的监听者willSet监听完成进度值的变化

利用贝塞尔(UIBezierPath)绘图方法在drawRect进行图形绘制

---

主要步骤#

１.定义接收进度的属性，并添加监听者ｗillSet
２.重写drawRect实现图形绘制

---

１.定义接收进度的属性，并添加监听者willSet,当progress的值发生改变时调用setNeedsDisplay()方法，调用此方法会自动触发drawRect()方法,然后就可以根据progress的值实时绘制进度圆了。代码如下：
<pre>

  //零时数据存储
  private var currentProgress :CGFloat = 0.0
  //设置绘图线宽
  let lineWith :CGFloat = 10.0
  let excircleLineWith :CGFloat = 3.0

  var progress :CGFloat = 0.0 {
        //willSet观察属性值的变化
        willSet (newValue){
          //获取当前的进度值
            currentProgress=newValue
            self.setNeedsDisplay()
        }
    }

</pre>

２.重写drawRect方法，并利用UIBezierPath类实现图形绘制，代码如下：
<pre>

    override func drawRect(rect: CGRect) {
        
        //设置进度圆显示数字样式
        let str = NSString(format: "%.02f%%", currentProgress*100)
        setTitle(str as String, forState: UIControlState.Normal)
        setTitleColor(UIColor.grayColor(), forState: UIControlState.Normal)

        
//        arcCenter 圆心坐标
//         radius　　　半径
//         startAngle　起始角度
//         endAngle　　　结束角度
//         clockwise　　　true:顺时针/false：逆时针 
        let size = rect.size
        
        let arcCenter = CGPoint(x: size.width*0.5, y: size.height*0.5)
        var radius = min(size.width, size.height)*0.5
        let startAngle = CGFloat(-M_PI_2)
        let endAngle = currentProgress*2*CGFloat(M_PI) + startAngle
// 外圆设置
       radius -= self.excircleLineWith      
        let excircle = UIBezierPath(arcCenter: arcCenter, radius: radius, startAngle: CGFloat(0), endAngle:CGFloat( 2*M_PI), clockwise: true)
        
        excircle.lineWidth = excircleLineWith
        UIColor.whiteColor().set()
        excircle.lineCapStyle = CGLineCap.Round//设置线样式
        excircle.stroke()
// 内圆设置
        radius -= self.excircleLineWith*2
        let path = UIBezierPath(arcCenter: arcCenter, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
    
        path.lineWidth = self.lineWith//设置线宽
        path.lineCapStyle = CGLineCap.Round//设置线样式
      
        UIColor.whiteColor().set()
//绘制路径
　　  //镂空型
　　　//  path.stroke()
        
       //填充型
        path.addLineToPoint(arcCenter)
        path.fill()
    }

</pre>

３.写到这里自定义进度圆已经设置好了，我们可以直接进行调用了，关于圆的样式我们可以自己设定颜色 UIColor.whiteColor().set()，还有大小radius等...
以下是调用时在ViewController简单写的代码：
<pre>

@IBOutlet weak var progressSlider: UISlider!
    
    let progressBtn = JETProgressBar.init(frame: CGRectMake(80, 120,200, 160))
    
    override func viewDidLoad() {
        super.viewDidLoad()
   
        progressBtn.backgroundColor = UIColor.orangeColor()
        self.view .addSubview(progressBtn)
        // Do any additional setup after loading the view, typically from a nib.
    }
    @IBAction func sliderValueChange(sender: UISlider) {
        
       self.progressBtn.progress = CGFloat(sender.value)
    }

</pre>

这里的写到的CGRectMake()设置的大小坐标就是对应传递到drawRect方法里的rect。

最后感谢你耐心的看完了笔者的第一篇文章...
附上源码： demo.