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