背景
按鈕應該是我們的App裡面最普遍的組件之一了，特別常用。
通常我們寫一個按鈕的套路很簡單也很固定。大概分為以下幾個步驟：
- 在xml佈局裡面按照設計稿的尺寸位置寫一個Textview
- 按照設計稿規定的顏色和圓角在drawable目錄下創建一個shape文件
- 將這個shape文件作為Textview的背景
這樣一個很標準的按鈕就誕生了，然後就可以繼續愉快的開發了。這本來沒有什麼問題，也比讓UI妹紙切圖高級了很多，但是隨著開發的進行你會發現，UI妹紙的想法很多，不同的界面有各種不同圓角和不同背景顏色的按鈕，這個時候你需要把上面的三個步驟再進行N次。
最後你會發現你的drawable目錄下有各種各樣的按鈕背景資源，難以管理。特別是假如有的按鈕要求有點擊效果時需要使用selector，這個時候可能就會產生三個文件用來滿足需求，所以總得來說很繁瑣。
想法
基於以上原因以及按鈕使用的普遍程度，感覺很有必要寫一個使用簡單且能滿足日常各種需求的按鈕。我們先梳理下按鈕需要達到的效果：
- 使用簡單(即可以利用屬性對按鈕進行各種設置)
- 可以支持設置按鈕文字、按鈕文字顏色、按鈕文字大小
- 可以支持統一設置圓角大小，也可以單獨設置按鈕每個圓角的大小
- 可以支持設置按鈕背景顏色
- 可以支持selector
- 可以支持圓形按鈕
- 可以支持漸變色按鈕，可以支持各個方向設置漸變色
- 可以支持設置帶邊框的按鈕，可以設置邊框的顏色和寬度
- 可以支持設置按鈕是否可以點擊
- 可以設置帶圖標的按鈕，支持自定義按鈕大小，和自動縮放，圖標支持設置在文字上下左右四個方向，支持自定義文字距離圖標的距離
引入
implementation 'top.androidman:superbutton:1.0.1'
實現效果
0x1 基本使用代碼解釋
效果
代碼
屬性解釋
- 按鈕文字
- app:text="床前明月光"
- 按鈕文字顏色
- app:textColor="@color/color_white"
- 按鈕文字大小
- app:textSize="22sp"
- 按鈕背景顏色
- app:color_normal="@color/color_accent"
0x2 單獨設置每個圓角
效果
代碼
屬性解釋
- 單獨設置左下角角度
- app:corner_left_bottom="0dp"
- 單獨設置左上角角度
- app:corner_left_top="5dp"
- 單獨設置右上角角度
- app:corner_right_top="22dp"
- 單獨設置右下角角度
- app:corner_right_bottom="0dp"
- 按鈕四個角的圓角角度
- app:corner="10dp"
注意：單獨設置角度會覆蓋corner屬性
0x3 Selector
效果
代碼
屬性解釋
- 當按鈕點下時會顯示設置的顏色效果
- app:color_normal="@color/color_accent"
0x4 圓形按鈕
效果
代碼
屬性解釋
- 按鈕上只有圖標沒有文字
- app:drawable_middle="@mipmap/icon_like"
- 按鈕上圖標高度
- app:drawable_middle_height="50" style="height:50px"
- 按鈕上圖標寬度
- app:drawable_middle_width="50dp"
注意：當設置此屬性時，文字的相關屬性將會失效
0x5 漸變背景的按鈕
效果
代碼
屬性解釋
- 開始顏色
- app:color_start="@color/color_14c7de"
- 結束顏色
- app:color_end="@color/color_red"
- 顏色漸變方向
- app:color_direction="RIGHT_LEFT"
- TOP_BOTTOM 從上到下
- BOTTOM_TOP 從下到上
- LEFT_RIGHT 從左到右
- RIGHT_LEFT 從右到左
- TR_BL 從右上到左下
- BL_TR 從左下到右上
- BR_TL 從右下到左上
- TL_BR 從左上到右下
注意：當設置顏色漸變時，color_normal，color_pressed設置將失效
0x6 有邊框按鈕
效果
代碼
屬性解釋
- 邊框寬度
- app:border_width="2dp"
- 邊框顏色
- app:border_color="@color/color_red"
0x7 按鈕不可點擊
效果
代碼
屬性解釋
- 按鈕是否可以點擊，默認為true可以點擊
- app:button_click_able="false"
- 按鈕文字是否單行，默認為true單行
- app:singleLine="false"
注意：按鈕提供有方法對點擊事件進行控制，請參考高級使用裡面相關方法
0x8 帶圖標按鈕
效果
代碼
屬性解釋
- 圖標在文字右邊
- app:drawable_right="@mipmap/icon_like"
- 圖標在文字左邊
- app:drawable_left="@mipmap/icon_like"
- 圖標在文字上邊
- app:drawable_top="@mipmap/icon_like"
- 圖標在文字下邊
- app:drawable_bottom="@mipmap/icon_like"
- 圖標距文字距離
- app:drawable_padding="20dp"
- 根據文字大小縮放圖標，默認為true,當為false時顯示原圖標大小
- app:drawable_auto="true"
按鈕支持的所有屬性
高級應用
1.想修改按鈕相關調用如下方法：
/** * 修改文字 */ superButton.setText(CharSequence text); /** * 修改文字顏色 */ superButton.setTextColor(@ColorInt int textColor); /** * 修改按鈕背景顏色 */ superButton.setColorNormal(@ColorInt int colorNormal);
當某些狀態下需要代碼控制，將按鈕置灰然後不可點擊，可以直接調用如下方法：
/** * 調用此方法後按鈕顏色被改變，按鈕無法點擊 */ superButton.setUnableColor(@ColorInt int color);
如果只是想設置按鈕不可點擊，不需要改變按鈕顏色，可以使用如下方法
/** * 設置按鈕是否可以點擊 */ superButton.setButtonClickable(boolean buttonClickable);
最後
更多BATJ字節跳動面試資料，整理了一下資料，需要的可以加群免費領取
資料免費領取方式：轉發後關注我後臺私信關鍵詞【資料】獲取！
