自定义按钮的优雅封装 - 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方法，在里面计算出合适的位置即可，但是调用时机需要考虑全面一点，比如文本改动，文本字体改动，图片改动，布局类型改动等都需要去更新布局。
主要实现代码如下：

Snipaste_2021-11-02_12-34-26.png

Snipaste_2021-11-02_12-35-52.png

3.如何设置渐变色

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

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

  
  
  Snipaste_2021-11-02_14-21-48.png

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

• 如果Button没有阴影那么使用masksToBounds切圆角是完全ok的

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

  
  
  Snipaste_2021-11-03_11-46-33.png

5.点击高亮状态设置

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

Snipaste_2021-11-02_14-40-12.png

3.使用效果

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

  
  
  Snipaste_2021-11-02_14-45-32.png

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

下面是demon的展示效果～

08929ebe-ef8a-40dd-af1d-127fdb32de8c.gif

4.源码和demon地址

github地址