#27 UIBezierPath 實作圓環進度條

App 內圓環進度條設計（上）

實作結果：

程式碼：

解說：

1. 建立基本變數：單位角度、圓圈寬度、起始角度
2. 繪製底層圖形（圓形）> 建立底層中空灰圓框圖層
3. 繪製上層佔比圓弧框 > 建立上層佔比圓弧框圖層
4. 建立標籤並設立格式（建立自動變更變數文字）
5. 依照圖層先後順序添加至 View 上

重要觀念：

1. 圓形空心框

使用「 ovalIn 」來繪製完整的圓形，再將中心填滿改成「 clear 」，特別注意 radius 為半徑，必須乘以二來表示直徑範圍。

2. 比例圓弧框（不完整的圓弧）

let percenragePath = UIBezierPath(arcCenter: CGPoint(x: lineWidth+radius, y: lineWidth+radius), radius: radius , startAngle: aDegree*startDegree, endAngle: aDegree*(startDegree+360*percentage/100), clockwise: true)
//其中起始點為上方，定義為 270 度，順時鐘旋轉

3. 標籤排列方式

label.textAlignment = .center
//置中排列

4. 設定內含變數字串

label.text = "\(percentage)%"
//利用 \ + () 來將變數嵌於字串裡

參考資料：彼得潘密笈

運用 UIBezierPath 繪製各種形狀

利用 UIBezierPath 實現圓環進度條，甜甜圈圖表 & 圓餅圖

Github 連結：

GitHub - yunminghsu/circularProgressRing

大家請期待下集製作「圓餅圖、甜甜圈」專輯喔！下期見！