最好用的安卓按鈕

背景

按鈕應該是我們的App里面最普遍的組件之一了，特別常用。

通常我們寫一個按鈕的套路很簡單也很固定。大概分為以下幾個步驟：

1. 在xml布局里面按照設計稿的尺寸位置寫一個Textview

2. 按照設計稿規定的顏色和圓角在drawable目錄下創建一個shape文件

3. 將這個shape文件作為Textview的背景

這樣一個很標准的按鈕就誕生了，然后就可以繼續愉快的開發了。這本來沒有什么問題，也比讓UI妹紙切圖高級了很多，但是隨着開發的進行你會發現，UI妹紙的想法很多，不同的界面有各種不同圓角和不同背景顏色的按鈕，這個時候你需要把上面的三個步驟再進行N次。

最后你會發現你的drawable目錄下有各種各樣的按鈕背景資源，難以管理。特別是假如有的按鈕要求有點擊效果時需要使用selector，這個時候可能就會產生三個文件用來滿足需求，所以總得來說很繁瑣。

想法

基於以上原因以及按鈕使用的普遍程度，感覺很有必要寫一個使用簡單且能滿足日常各種需求的按鈕。我們先梳理下按鈕需要達到的效果：

1. 使用簡單(即可以利用屬性對按鈕進行各種設置)

2. 可以支持設置按鈕文字、按鈕文字顏色、按鈕文字大小

3. 可以支持統一設置圓角大小，也可以單獨設置按鈕每個圓角的大小

4. 可以支持設置按鈕背景顏色

5. 可以支持selector

6. 可以支持圓形按鈕

7. 可以支持漸變色按鈕，可以支持各個方向設置漸變色

8. 可以支持設置帶邊框的按鈕，可以設置邊框的顏色和寬度

9. 可以支持設置按鈕是否可以點擊

10. 可以設置帶圖標的按鈕，支持自定義按鈕大小，和自動縮放，圖標支持設置在文字上下左右四個方向，支持自定義文字距離圖標的距離

引入

implementation 'top.androidman:superbutton:1.0.1' 

實現效果

0x1 基本使用代碼解釋

效果

代碼

<top.androidman.SuperButton android:layout_width="match_parent" android:layout_height="60dp" android:layout_margin="20dp" app:color_normal="@color/color_accent" app:corner="10dp" app:text="@string/poetry_1" app:textColor="@color/color_white" app:textSize="22sp" /> 

屬性解釋

• 按鈕文字
  app:text="床前明月光"

• 按鈕文字顏色
  app:textColor="@color/color_white"

• 按鈕文字大小
  app:textSize="22sp"

• 按鈕背景顏色
  app:color_normal="@color/color_accent"

0x2 單獨設置每個圓角

效果

代碼

<top.androidman.SuperButton android:layout_width="match_parent" android:layout_height="60dp" android:layout_margin="20dp" app:color_normal="@color/color_6596ff" app:corner="40dp" app:corner_left_bottom="0dp" app:text="單獨設置左下角為0dp" app:textColor="@color/color_white" app:textSize="22sp" /> 

屬性解釋

• 單獨設置左下角角度
  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

效果

代碼

<top.androidman.SuperButton android:layout_width="match_parent" android:layout_height="60dp" android:layout_margin="20dp" android:onClick="test" app:color_normal="@color/color_accent" app:color_pressed="@color/color_ffB419" app:corner="10dp" app:text="點擊會變色哦" app:textColor="@color/color_white" app:textSize="22sp" /> 

屬性解釋

• 當按鈕點下時會顯示設置的顏色效果
  app:color_normal="@color/color_accent"

0x4 圓形按鈕

效果

代碼

 <top.androidman.SuperButton android:layout_width="160dp" android:layout_height="160dp" android:layout_margin="20dp" android:onClick="test" app:color_normal="@color/color_accent" app:drawable_middle="@mipmap/icon_like" app:drawable_middle_height="50dp" app:drawable_middle_width="50dp" app:shape="CIRCLE" /> 

屬性解釋

• 按鈕上只有圖標沒有文字
  app:drawable_middle="@mipmap/icon_like"

• 按鈕上圖標高度
  app:drawable_middle_height="50dp"

• 按鈕上圖標寬度
  app:drawable_middle_width="50dp"

注意：當設置此屬性時，文字的相關屬性將會失效

0x5 漸變背景的按鈕

效果

代碼

<top.androidman.superbutton.SuperButton android:layout_width="match_parent" android:layout_height="60dp" android:layout_margin="20dp" app:color_direction="RIGHT_LEFT" app:color_end="@color/color_14c7de" app:color_start="@color/color_red" app:corner="20dp" app:text="從右到左漸變" app:textColor="@color/color_white" app:textSize="22sp" /> 

屬性解釋

• 開始顏色
  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 有邊框按鈕

效果

代碼

<top.androidman.SuperButton android:layout_width="match_parent" android:layout_height="60dp" android:layout_margin="20dp" app:border_color="@color/color_red" app:border_width="2dp" app:color_normal="@color/color_accent" app:corner="10dp" app:text="@string/poetry_1" app:textColor="@color/color_white" app:textSize="22sp" /> 

屬性解釋

• 邊框寬度
  app:border_width="2dp"

• 邊框顏色
  app:border_color="@color/color_red"

0x7 按鈕不可點擊

效果

代碼

<top.androidman.SuperButton android:layout_width="match_parent" android:layout_height="60dp" android:layout_margin="20dp" android:onClick="test" app:button_click_able="false" app:color_normal="@color/color_accent" app:corner="10dp" app:singleLine="false" app:text="app:button_click_able=false\n也可以代碼設置" app:textColor="@color/color_white" app:textSize="22sp" /> 

屬性解釋

• 按鈕是否可以點擊，默認為true可以點擊
  app:button_click_able="false"

• 按鈕文字是否單行，默認為true單行
  app:singleLine="false"

注意：按鈕提供有方法對點擊事件進行控制，請參考高級使用里面相關方法

0x8 帶圖標按鈕

效果

代碼

<top.androidman.superbutton.SuperButton android:layout_width="match_parent" android:layout_height="60dp" android:layout_margin="20dp" app:color_normal="@color/color_red" app:corner="20dp" app:drawable_padding="20dp" app:drawable_right="@mipmap/icon_like" app:text="圖標在右邊" app:textColor="@color/color_white" app:textSize="22sp" /> 

屬性解釋

• 圖標在文字右邊
  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"

按鈕支持的所有屬性

<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="SuperButton"> <!--默認配置--> <attr name="text" format="reference|string" /> <!--按鈕文字顏色--> <attr name="textColor" format="reference|color" /> <!--按鈕文字大小--> <attr name="textSize" format="dimension" /> <!--文字是否單行，默認單行--> <attr name="singleLine" format="boolean" /> <!--默認背景顏色--> <attr name="color_normal" format="reference|color" /> <!--按壓時的背景顏色--> <attr name="color_pressed" format="reference|color" /> <!--圖片在文字左邊--> <attr name="drawable_left" format="reference|color" /> <!--圖片在文字右邊--> <attr name="drawable_right" format="reference|color" /> <!--圖片在文字上邊--> <attr name="drawable_top" format="reference|color" /> <!--圖片在文字下邊--> <attr name="drawable_bottom" format="reference|color" /> <!--圖片距文字的距離--> <attr name="drawable_padding" format="dimension" /> <!--圖標根據文字大小自動縮放圖標--> <attr name="drawable_auto" format="boolean" /> <!--只有圖片的情況,此時會忽略文字，即便設置--> <attr name="drawable_middle" format="reference|color" /> <!--圖片在中間時寬--> <attr name="drawable_middle_width" format="dimension" /> <!--圖片在中間時高--> <attr name="drawable_middle_height" format="dimension" /> <!--形狀--> <attr name="shape" format="enum"> <!--圓形--> <enum name="CIRCLE" value="1" /> <!--矩形--> <enum name="RECT" value="2" /> </attr> <!--按鈕背景是漸變色時設置--> <!--開始顏色--> <attr name="color_start" format="color" /> <!--結束顏色--> <attr name="color_end" format="color" /> <!--顏色方向--> <attr name="color_direction" format="enum"> <!--從上到下--> <enum name="TOP_BOTTOM" value="0x1" /> <!--從右上到左下--> <enum name="TR_BL" value="0x2" /> <!--從右到左--> <enum name="RIGHT_LEFT" value="0x3" /> <!--從右下到左上--> <enum name="BR_TL" value="0x4" /> <!--從下到上--> <enum name="BOTTOM_TOP" value="0x5" /> <!--從左下到右上--> <enum name="BL_TR" value="0x6" /> <!--從左到右--> <enum name="LEFT_RIGHT" value="0x7" /> <!--從左上到右下--> <enum name="TL_BR" value="0x8" /> </attr> <!--按鈕圓角，如果單獨設置會覆蓋此設置--> <attr name="corner" format="dimension" /> <!--左上角圓角半徑--> <attr name="corner_left_top" format="dimension" /> <!--左下角圓角半徑--> <attr name="corner_left_bottom" format="dimension" /> <!--右上角圓角半徑--> <attr name="corner_right_top" format="dimension" /> <!--右下角圓角半徑--> <attr name="corner_right_bottom" format="dimension" /> <!--邊框寬度--> <attr name="border_width" format="dimension" /> <!--邊框顏色--> <attr name="border_color" format="color" /> <!--按鈕是否可以點擊--> <attr name="button_click_able" format="boolean" /> </declare-styleable> </resources> 

高級應用

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字節跳動面試資料，整理了一下資料，需要的可以查看我主頁