自定义按钮的优雅封装 – Swift

目录

1.自定义按钮解决了什么问题
2.封装思路与踩的坑
3.使用效果
4.源码和demon地址

1.自定义按钮解决了什么问题

• 一行代码设置图片与文本位置（文本在图片左边/右边/上面/下面）
• 一行代码设置图片与文本间距
• 一行代码添加渐变色背景，设置点击高亮渐变色效果
• 阴影、圆角、渐变色同时存在

解决以上问题我们仅仅使用系统按钮去开发，需要写很多代码而且容易出bug，所以需要封装一个按钮达到一劳永逸的效果。

2.封装思路与踩的坑

1.封装的按钮是继承UIButton还是继承UIControl

刚开始写是继承UIButton，然而在insert渐变色layer时，需要处理UIbutton的titleLabel和imageView的layer和渐变色layer的层级问题，保证渐变色layer在最上面才能显示渐变色，稍显麻烦，高亮效果也不好，而且感觉UIButton有点重，所以选择继承UIControl，写一个全新的按钮。

2.图片与文本位置样式和间距

这个重写layoutSubviews方法，在里面计算出合适的位置即可，但是调用时机需要考虑全面一点，比如文本改动，文本字体改动，图片改动，布局类型改动等都需要去更新布局。 主要实现代码如下：

3.如何设置渐变色

• plan A： 最开始是重写系统绘制方法draw(_ rect: CGRect)，绘制一个渐变色，刚开始也没发现问题，然而在实际开发的项目中发现，cllectionview的cell里面放Button，cell很多的情况下按钮没法正常显示了,只要重写draw(_ rect: CGRect)就会有问题 😭 😭

• plan B：使用CAGradientLayer创建一个图层，插入到按钮的图层中，传参做相应处理，各种场景测试没发现bug。 主要代码如下：

4.如何优雅设置渐变色圆角

• 如果Button没有阴影那么使用masksToBounds切圆角是完全ok的
• 然鹅有时候，UI设计阴影、圆角、渐变色同时存在，那么我们除了要给Button设置圆角，还要给渐变色layer设置圆角,我这里直接利用了KVC获取Button圆角给渐变色layer设置，省去了传参赋值的麻烦。主要代码如下：

5.点击高亮状态设置(旧的实现，实际效果不太好，快速点击/轻触不会有高亮色，UI直接过不了😭😭)

主要是重写点击响应三个方法
touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?)
touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?)
touchesEnded(_ >touches: Set<UITouch>, > with event: UIEvent?)
touchesBegan 保存原有颜色，赋值高亮色，touchesCancelled、touchesEnded还原原有颜色即可

5.1 改良版的点击态效果：

主要是重写点击响应四个方法
hitTest(_ point: CGPoint, with event: UIEvent?)
touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?)
touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?)
touchesEnded(_ >touches: Set<UITouch>, > with event: UIEvent?)
主要在hitTest方法里面处理，实时响应，添加一个高亮layer，结合延时共同处理，点击响应高亮效果非常nice👌👌。

3.使用效果

• 上面的问题解决后，现在看看实现一个布局样式+阴影+圆角+渐变色按钮的代码：

常用方法系统Button基本保持一致，其他需求基本一行代码搞定，是不是觉得非常方便呢～

下面是demon的展示效果～

4.源码和demon地址

github地址