目錄
1.自定義按鈕解決了什么問題
2.封裝思路與踩的坑
3.使用效果
4.源碼和demon地址
1.自定義按鈕解決了什么問題
- 一行代碼設(shè)置圖片與文本位置（文本在圖片左邊/右邊/上面/下面）
- 一行代碼設(shè)置圖片與文本間距
- 一行代碼添加漸變色背景阻课，設(shè)置點(diǎn)擊高亮漸變色效果
- 陰影意系、圓角、漸變色同時(shí)存在
解決以上問題我們僅僅使用系統(tǒng)按鈕去開發(fā)于微，需要寫很多代碼而且容易出bug，所以需要封裝一個(gè)按鈕達(dá)到一勞永逸的效果户辞。
2.封裝思路與踩的坑
1.封裝的按鈕是繼承UIButton還是繼承UIControl
剛開始寫是繼承UIButton狼钮，然而在insert漸變色layer時(shí)，需要處理UIbutton的titleLabel和imageView的layer和漸變色layer的層級(jí)問題围橡，保證漸變色layer在最上面才能顯示漸變色，稍顯麻煩缕贡，高亮效果也不好翁授，而且感覺UIButton有點(diǎn)重，所以選擇繼承UIControl晾咪，寫一個(gè)全新的按鈕收擦。
2.圖片與文本位置樣式和間距
這個(gè)重寫layoutSubviews方法，在里面計(jì)算出合適的位置即可禀酱，但是調(diào)用時(shí)機(jī)需要考慮全面一點(diǎn)炬守，比如文本改動(dòng)，文本字體改動(dòng)剂跟，圖片改動(dòng)减途，布局類型改動(dòng)等都需要去更新布局。
主要實(shí)現(xiàn)代碼如下：
Snipaste_2021-11-02_12-34-26.png
Snipaste_2021-11-02_12-35-52.png
3.如何設(shè)置漸變色
- plan A： 最開始是重寫系統(tǒng)繪制方法draw(_ rect: CGRect)曹洽，繪制一個(gè)漸變色鳍置，剛開始也沒發(fā)現(xiàn)問題，然而在實(shí)際開發(fā)的項(xiàng)目中發(fā)現(xiàn)送淆，cllectionview的cell里面放Button税产，cell很多的情況下按鈕沒法正常顯示了,只要重寫draw(_ rect: CGRect)就會(huì)有問題 ?? ??
plan B：使用CAGradientLayer創(chuàng)建一個(gè)圖層，插入到按鈕的圖層中偷崩，傳參做相應(yīng)處理辟拷，各種場(chǎng)景測(cè)試沒發(fā)現(xiàn)bug。 主要代碼如下：
Snipaste_2021-11-02_14-21-48.png
4.如何優(yōu)雅設(shè)置漸變色圓角
- 如果Button沒有陰影那么使用masksToBounds切圓角是完全ok的
然鵝有時(shí)候阐斜，UI設(shè)計(jì)陰影衫冻、圓角、漸變色同時(shí)存在谒出，那么我們除了要給Button設(shè)置圓角隅俘，還要給漸變色layer設(shè)置圓角,我這里直接利用了KVC獲取Button圓角給漸變色layer設(shè)置邻奠，省去了傳參賦值的麻煩。主要代碼如下：
Snipaste_2021-11-03_11-46-33.png
5.點(diǎn)擊高亮狀態(tài)設(shè)置
這個(gè)不是很復(fù)雜为居，主要是重寫點(diǎn)擊響應(yīng)三個(gè)方法
touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?)
touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?)
touchesEnded(_ >touches: Set<UITouch>, > with event: UIEvent?)
touchesBegan 保存原有顏色碌宴，賦值高亮色，touchesCancelled蒙畴、touchesEnded還原原有顏色即可
Snipaste_2021-11-02_14-40-12.png
3.使用效果
-
上面的問題解決后贰镣，現(xiàn)在看看實(shí)現(xiàn)一個(gè)布局樣式+陰影+圓角+漸變色按鈕的代碼：
Snipaste_2021-11-02_14-45-32.png
常用方法系統(tǒng)Button基本保持一致，其他需求基本一行代碼搞定膳凝，是不是覺得非常方便呢～
下面是demon的展示效果～
