iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Mobile Development

轉職App開發打怪雜記系列 第 15

用程式碼畫個1/4圓的按鈕

  • 分享至 

  • xImage
  •  

緣由:

相信身為開發者一定對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#>)

接著照著這個路徑要把圖層匡出來,剛剛有說了要轉型別成CGPath
circleShape.path = circlePath.cgPath

接著要來設定按鈕的遮罩層
(只有遮罩層覆蓋的地方才會顯示出來,遮罩用在launch頁的動畫應該也會很酷炫?)
這裡我們要顯示的就是這個1/4圓的形狀,於是把遮罩設定成這個形狀
CircleBtn.layer.mask = circleShape
因為被遮罩層(元件最底層)無設定顏色也沒有設定圖片
目前為止還是會看不出按鈕在哪
所以我們設定按鈕的背景色 就可以看到顯示的形狀是否正確
CircleBtn.backgroundColor = UIColor.black

實作成功是不是超有成就感的!!
示意圖如下
https://ithelp.ithome.com.tw/upload/images/20210915/201307577utAYGxs8p.png

下方為範例程式碼

    //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

上一篇
客製化帶背景音樂與畫面淡出的launchScreen
下一篇
隱藏&顯示畫面中間的某區塊
系列文
轉職App開發打怪雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言