利用 UIBezierPath 實現圓環進度條，甜甜圈圖表 & 圓餅圖
這次一樣要透過貝茲曲線來畫圓餅圖，但是因為很多教學都已經給了原始碼，只要研讀一下再使用Playground就可以畫出來，但感覺上沒有什麼太大的效果，所以這次想要找一個畫面來做看看。
成品圖
使用Playground
先使用Playground來跑可以先測試，也不用花太多時間在拉畫面或調整整個storyboard，playground有個好處就是可以邊寫邊執行，就可以看到成果。
（一）定義常數
將可能常用的值定義成常數，這樣之後要改變就比較容易。
let aDegree = CGFloat.pi / 180 // 每度，也就是1度多少
let lineWidth: CGFloat = 20 // 線條（內徑）寬度
let radius: CGFloat = 150 // 圓心的距離
let startDegree: CGFloat = 270 // 起點
（二）繪製一個圓形當底
let circlePath = UIBezierPath(ovalIn: CGRect(x: lineWidth, y: lineWidth, width: radius*2, height: radius*2))
let circleLayer = CAShapeLayer()
circleLayer.path = circlePath.cgPath
circleLayer.strokeColor = UIColor.gray.cgColor //邊框顏色
circleLayer.lineWidth = lineWidth //邊框粗細
circleLayer.fillColor = UIColor.clear.cgColor //背景顏色
（三）將繪製一個進度條的部分宣告為func
func createTask(startDegree:CGFloat , percentage:CGFloat , color:UIColor) -> CAShapeLayer{
let percentagePath = UIBezierPath(arcCenter: CGPoint(x: lineWidth + radius, y: lineWidth + radius), radius: radius, startAngle: aDegree * startDegree, endAngle: aDegree * (startDegree + 360 * percentage / 100), clockwise: true)
let percentageLayer = CAShapeLayer()
percentageLayer.path = percentagePath.cgPath
percentageLayer.strokeColor = color.cgColor
percentageLayer.lineWidth = lineWidth
percentageLayer.fillColor = UIColor.clear.cgColor
return percentageLayer
}
(四) 證券百分比，26%
//第一個證券
let start1:CGFloat = 270 //起始點
let stock1: CGFloat = 26 //百分比
let color1: UIColor = UIColor(red: 64/255, green: 113/255, blue: 189/255 , alpha: 1)
let percentageLayer = createTask(startDegree:start1,percentage: stock1 , color:color1)
//第二個證券
let start2:CGFloat = (270 + 360 * stock1 / 100)
let stock2: CGFloat = 26
let color2: UIColor = UIColor(red: 128/255, green: 208/255, blue: 218/255 , alpha: 1)
let percentageLayer2 = createTask(startDegree:start2,percentage: stock2 , color:color2)
…
(五)將這些Layer加入到View
view.layer.addSublayer(circleLayer)
view.layer.addSublayer(percentageLayer)
view.layer.addSublayer(percentageLayer2)
view.layer.addSublayer(percentageLayer3)
view.layer.addSublayer(percentageLayer4)
view.layer.addSublayer(percentageLayer5)
使用Xcode Project來製作App畫面
(一)建立一個ImageView當作背景圖。
(二)建立一個View，放置於畫面，並將其底設定為白色，並增加參數layer.cornerRadius來增加此View的圓角。
(三)使用Label建立相關文字顯示部分，如：證券資產、我的資產、各大證券分佈文字與百分比。
(四)新增一個UIButton來放置於下方，以用來顯示詳細資料。
(五)最後空白區域擺放集保e存摺的廣告。
(六)搭配TabController就可以出現Tab Item。
(七)圖表部分則在上方新增一個ImageView先不預設任何圖樣。
加入Playground的程式
點選ViewController.swift檔案，並於viewDidLoad中加入剛剛所在Playground寫的程式。並將ImageView透過Outlet的方式加入至ViewController.swift變成物件並命名為imageChart。
將之前所做的View取消掉，改使用imageChart
增加totalMoneyLabel，並將做出來的Layer都加入到這個imageView，剛放入執行時可能會發生位置與大小不太對導致顯示不正常，這時只需要修改我們一開始所規劃的常數，這樣顯示就會正常。
成果分享
Github
