用程序码画个1/4圆的按钮

缘由:

相信身为开发者一定对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

<<:  Android学习笔记06

>>:  有线上网:ADSL、Cable Modem 和光纤网路差在哪里?

学习Python纪录Day25 - 批次处理档案

批次处理档案 新增多层目录 os.makedirs("./img/a") os....

认识 .NET

干古 微软开发的一个跨平台开源的开发框架, 以前叫 .NET Core, 也继承 .Net Fram...

Day 27 : 模型解释 Shap

在经过集成式学习(ensemble learning)之後的 tree based (像是 Rand...

【领域展开 22 式】 初次认识 Jetpack 与启用

左看右看上看下看,到处都在说 Jetpack 最近阅读蛮多 WordPress 相关的教学文,大多数...

Day 31 - Redux vs XState (英文原文改作)

本篇主要论述源自於 XState 作者本人在 stackoverflow 的解释,并辅以一点我的补充...