自定义形状按钮的实现

自定义形状按钮的实现

对于大多数iOS开发来说,这个是很少遇到的,毕竟一个不规则的按钮再移动端不常见,但是免不了会遇到某些特殊的需求,比如一个饼状图,比如一个扇形图,比如中国地图中的每个省…..
我们很可能在某一次开发中需要实现不规则形状的按钮,那么我们怎么去实现呢?
其实这只是一个很小很小的知识点,却有很多人不会去考虑,所以就遇到了这样的情况

偶然有一天,朋友给了我一套产品原型,他说叫我帮他写几个按钮,很简单的按钮,我当时感觉有坑,但是也没有想太多,想着本来这段时间有点闲,就帮下忙,
于是他发来原型图

哟,就是很简单的4+1个按钮蛮
先写4个正方形的九宫格式的按钮,再在中心加一个圆形按钮就好了呀.
于是接下来他又发来产品设计图

果然,有了设计之后,瞬间好看了好多,
但是想象中也不复杂呀.
先用一个view当底图,然后5个按钮加在这个view上,然后view来个半径,不就结束了吗?
但是事实真的是这么简单吗?

显然不是,一个很明显的结果就是,你会发现你使用了圆形半径的不显示的部分仍然能够响应按钮的点击.
这个是什么鬼,其实很简单的原理,就是虽然我们设置了半径,让圆形外的图层不显示,但是并不是代表其不存在,其仍然是可以点击的,这样在某些情况下就不符合按钮的设计标准了,因为我们想要的是所见即所得

那么所见即所得便成了我要实现的目标.
还得从按钮上下手,不要想得这么简单,虽然这个案例是一个很简单的比较偏正常形状的一个按钮,但是我需要将其想象成一个很复杂的不规则的图形来处理

1.因为是自定义形状的按钮,那么说白了,它还是一个按钮,我们没有必要自定义复杂的控件,继承UIButton即可

2.构思如何实现特殊形状
其实这块很容易想到,实现一个圆形按钮,就是对layer进行修改形状而已

如果你有阅读过iOS核心动画高级技巧的话,你很容易发现我们想要的东西

是的,这里我们能看到几个关键点,一个原来的背景+一个mask遮罩 = 一个自定义形状的图形

引用到我们想要的按钮上,我们就会发现同样适用,
那么我们必须要在适用图片来制作mask吗?
很显然,我们在开发中不可能这么去做,那么我们如何自定义一个形状呢?

于是我们能够很方便的使用UIBezierPath来绘制成我们想要的形状,然后使用CAShapeLayer来根据形状创建图层的路径
创建完成之后,我们使用这样的图层来当做按钮的mask即可

所以对于我们来说比较有用的就是一个贝塞尔曲线的定