這真的多是最好用的按鈕了

背景

按鈕應該是咱們的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'
複製代碼

Github傳送門

實現效果

基本使用	單獨設置每一個圓角	Selector	圓形按鈕
漸變背景的按鈕	有邊框按鈕	按鈕不可點擊	帶圖標按鈕

代碼解釋

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);
複製代碼

將來展望

將來準備把按鈕陰影加入進來，這樣這個按鈕的使用就更加方便啦！ 因此若是你們有好的想法和需求，歡迎你們提issue。