前言#
在很多場(chǎng)合我們都需要檢測(cè)數(shù)據(jù)的實(shí)時(shí)動(dòng)態(tài)级遭，比如安裝／下載／上傳 等，為了人性化設(shè)計(jì)我們會(huì)讓用戶看到這些實(shí)時(shí)的狀態(tài)，本文就要將這種實(shí)時(shí)狀態(tài)的數(shù)據(jù)顯示給用戶看到，比如下載 昌抠。本文以下載為例患朱，自定義了一個(gè)顯示當(dāng)前下載狀態(tài)的進(jìn)度圓。效果如下：
技術(shù)要點(diǎn)
調(diào)用UIview的setNeedsDisplay方法來(lái)觸發(fā)drawRect方法從而來(lái)實(shí)現(xiàn)繪畫(huà)圖形
設(shè)置屬性的監(jiān)聽(tīng)者willSet監(jiān)聽(tīng)完成進(jìn)度值的變化
利用貝塞爾(UIBezierPath)繪圖方法在drawRect進(jìn)行圖形繪制
主要步驟#
１.定義接收進(jìn)度的屬性炊苫，并添加監(jiān)聽(tīng)者ｗillSet
２.重寫(xiě)drawRect實(shí)現(xiàn)圖形繪制
１.定義接收進(jìn)度的屬性裁厅，并添加監(jiān)聽(tīng)者willSet,當(dāng)progress的值發(fā)生改變時(shí)調(diào)用setNeedsDisplay()方法，調(diào)用此方法會(huì)自動(dòng)觸發(fā)drawRect()方法,然后就可以根據(jù)progress的值實(shí)時(shí)繪制進(jìn)度圓了侨艾。代碼如下：
<pre>
//零時(shí)數(shù)據(jù)存儲(chǔ)
private var currentProgress :CGFloat = 0.0
//設(shè)置繪圖線寬
let lineWith :CGFloat = 10.0
let excircleLineWith :CGFloat = 3.0
var progress :CGFloat = 0.0 {
//willSet觀察屬性值的變化
willSet (newValue){
//獲取當(dāng)前的進(jìn)度值
currentProgress=newValue
self.setNeedsDisplay()
}
}
</pre>
２.重寫(xiě)drawRect方法执虹，并利用UIBezierPath類實(shí)現(xiàn)圖形繪制，代碼如下：
<pre>
override func drawRect(rect: CGRect) {
//設(shè)置進(jìn)度圓顯示數(shù)字樣式
let str = NSString(format: "%.02f%%", currentProgress*100)
setTitle(str as String, forState: UIControlState.Normal)
setTitleColor(UIColor.grayColor(), forState: UIControlState.Normal)
// arcCenter 圓心坐標(biāo)
// radius 半徑
// startAngle 起始角度
// endAngle 結(jié)束角度
// clockwise true:順時(shí)針/false：逆時(shí)針
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
// 外圓設(shè)置
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//設(shè)置線樣式
excircle.stroke()
// 內(nèi)圓設(shè)置
radius -= self.excircleLineWith*2
let path = UIBezierPath(arcCenter: arcCenter, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
path.lineWidth = self.lineWith//設(shè)置線寬
path.lineCapStyle = CGLineCap.Round//設(shè)置線樣式
UIColor.whiteColor().set()
//繪制路徑
//鏤空型
// path.stroke()
//填充型
path.addLineToPoint(arcCenter)
path.fill()
}
</pre>
３.寫(xiě)到這里自定義進(jìn)度圓已經(jīng)設(shè)置好了唠梨，我們可以直接進(jìn)行調(diào)用了袋励，關(guān)于圓的樣式我們可以自己設(shè)定顏色 UIColor.whiteColor().set()，還有大小radius等...
以下是調(diào)用時(shí)在ViewController簡(jiǎn)單寫(xiě)的代碼：
<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>
這里的寫(xiě)到的CGRectMake()設(shè)置的大小坐標(biāo)就是對(duì)應(yīng)傳遞到drawRect方法里的rect。
最后感謝你耐心的看完了筆者的第一篇文章...
附上源碼： demo.
