相信身為開發者一定對UIButton不陌生,原本制式化的按鈕為方形,可以用程式碼產生,甚至在storyboard上拉一拉調整一下,設定約束,也可以達成一些切版指定的畫面,求新求變的現代人對於方形的按鈕已經不滿足了,當然對於各種奇形怪狀的特殊按鈕可以用圖片按鈕來解決,但基於各種理由,美術沒空出圖時,還要完成1/4圓的按鈕,簡單來說就是要用程式碼來畫了?,用程式碼來生成元件真的要很有想像力,不然真的會不知道自己現在在畫什麼?
假如我們要做一個左下角1/4圓的按鈕,
首先我們要先實體化CAShapeLayer (用來繪製形狀的圖層)let circleShape = CAShapeLayer()
然後透過path來設定形狀,這裡型別是CGPath
用UIBezierPath先繪製路徑完要給CAShapeLayer的path使用時需轉型別
所以接下來我們來繪製路徑,把圓心放在(0,100),
使用UIBezierPath來畫路徑,除了圓心外,設定半徑,開始的角度,結束的角度,圓弧是否為順時針畫線let circlePath = UIBezierPath.init(arcCenter: <#T##CGPoint#>, radius: <#T##CGFloat#>, startAngle: <#T##CGFloat#>, endAngle: <#T##CGFloat#>, clockwise: <#T##Bool#>)
接著照著這個路徑要把圖層匡出來,剛剛有說了要轉型別成CGPathcircleShape.path = circlePath.cgPath
接著要來設定按鈕的遮罩層
(只有遮罩層覆蓋的地方才會顯示出來,遮罩用在launch頁的動畫應該也會很酷炫?)
這裡我們要顯示的就是這個1/4圓的形狀,於是把遮罩設定成這個形狀CircleBtn.layer.mask = circleShape
因為被遮罩層(元件最底層)無設定顏色也沒有設定圖片
目前為止還是會看不出按鈕在哪
所以我們設定按鈕的背景色 就可以看到顯示的形狀是否正確CircleBtn.backgroundColor = UIColor.black
實作成功是不是超有成就感的!!
示意圖如下
下方為範例程式碼
//1/4圓按鈕
let circleShape = CAShapeLayer()
let arcCenter:CGPoint = CGPoint(x: 0, y: 100)
let circlePath = UIBezierPath.init(arcCenter: arcCenter, radius: 100, startAngle: 90.0, endAngle: .pi/2, clockwise: true)
circleShape.path = circlePath.cgPath
CircleBtn.layer.mask = circleShape
CircleBtn.backgroundColor = UIColor.blue