背景
按鈕應該是我們的App里面最普遍的組件之一了，特別常用火架。
通常我們寫一個按鈕的套路很簡單也很固定允耿。大概分為以下幾個步驟：
在xml布局里面按照設(shè)計稿的尺寸位置寫一個Textview
按照設(shè)計稿規(guī)定的顏色和圓角在drawable目錄下創(chuàng)建一個shape文件
將這個shape文件作為Textview的背景
這樣一個很標準的按鈕就誕生了揪惦，然后就可以繼續(xù)愉快的開發(fā)了。這本來沒有什么問題祥款，也比讓UI妹紙切圖高級了很多清笨，但是隨著開發(fā)的進行你會發(fā)現(xiàn)，UI妹紙的想法很多刃跛，不同的界面有各種不同圓角和不同背景顏色的按鈕抠艾，這個時候你需要把上面的三個步驟再進行N次。
最后你會發(fā)現(xiàn)你的drawable目錄下有各種各樣的按鈕背景資源桨昙，難以管理检号。特別是假如有的按鈕要求有點擊效果時需要使用selector，這個時候可能就會產(chǎn)生三個文件用來滿足需求蛙酪，所以總得來說很繁瑣齐苛。
想法
基于以上原因以及按鈕使用的普遍程度，感覺很有必要寫一個使用簡單且能滿足日常各種需求的按鈕桂塞。我們先梳理下按鈕需要達到的效果：
使用簡單(即可以利用屬性對按鈕進行各種設(shè)置)
可以支持設(shè)置按鈕文字凹蜂、按鈕文字顏色、按鈕文字大小
可以支持統(tǒng)一設(shè)置圓角大小，也可以單獨設(shè)置按鈕每個圓角的大小
可以支持設(shè)置按鈕背景顏色
可以支持selector
可以支持圓形按鈕
可以支持漸變色按鈕玛痊，可以支持各個方向設(shè)置漸變色
可以支持設(shè)置帶邊框的按鈕汰瘫，可以設(shè)置邊框的顏色和寬度
可以支持設(shè)置按鈕是否可以點擊
可以設(shè)置帶圖標的按鈕，支持自定義按鈕大小擂煞，和自動縮放混弥，圖標支持設(shè)置在文字上下左右四個方向，支持自定義文字距離圖標的距離
引入
implementation 'top.androidman:superbutton:1.0.1'
實現(xiàn)效果
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 單獨設(shè)置每個圓角
效果
代碼
<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="單獨設(shè)置左下角為0dp"
app:textColor="@color/color_white"
app:textSize="22sp" />
屬性解釋
單獨設(shè)置左下角角度
app:corner_left_bottom="0dp"單獨設(shè)置左上角角度
app:corner_left_top="5dp"單獨設(shè)置右上角角度
app:corner_right_top="22dp"單獨設(shè)置右下角角度
app:corner_right_bottom="0dp"按鈕四個角的圓角角度
app:corner="10dp"
注意：單獨設(shè)置角度會覆蓋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" />
屬性解釋
- 當按鈕點下時會顯示設(shè)置的顏色效果
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"
注意：當設(shè)置此屬性時对省，文字的相關(guān)屬性將會失效
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"結(jié)束顏色
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 從左上到右下
注意：當設(shè)置顏色漸變時蝗拿，color_normal，color_pressed設(shè)置將失效
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" />
屬性解釋
邊框?qū)挾?br> 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也可以代碼設(shè)置"
app:textColor="@color/color_white"
app:textSize="22sp" />
屬性解釋
按鈕是否可以點擊蒿涎，默認為true可以點擊
app:button_click_able="false"按鈕文字是否單行哀托，默認為true單行
app:singleLine="false"
注意：按鈕提供有方法對點擊事件進行控制，請參考高級使用里面相關(guān)方法
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"根據(jù)文字大小縮放圖標同仆，默認為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" />
<!--圖標根據(jù)文字大小自動縮放圖標-->
<attr name="drawable_auto" format="boolean" />
<!--只有圖片的情況,此時會忽略文字裙品，即便設(shè)置-->
<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>
<!--按鈕背景是漸變色時設(shè)置-->
<!--開始顏色-->
<attr name="color_start" format="color" />
<!--結(jié)束顏色-->
<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>
<!--按鈕圓角俗批，如果單獨設(shè)置會覆蓋此設(shè)置-->
<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" />
<!--邊框?qū)挾?->
<attr name="border_width" format="dimension" />
<!--邊框顏色-->
<attr name="border_color" format="color" />
<!--按鈕是否可以點擊-->
<attr name="button_click_able" format="boolean" />
</declare-styleable>
</resources>
高級應用
1.想修改按鈕相關(guān)調(diào)用如下方法：
/**
* 修改文字
*/
superButton.setText(CharSequence text);
/**
* 修改文字顏色
*/
superButton.setTextColor(@ColorInt int textColor);
/**
* 修改按鈕背景顏色
*/
superButton.setColorNormal(@ColorInt int colorNormal);
當某些狀態(tài)下需要代碼控制，將按鈕置灰然后不可點擊市怎，可以直接調(diào)用如下方法：
/**
* 調(diào)用此方法后按鈕顏色被改變岁忘，按鈕無法點擊
*/
superButton.setUnableColor(@ColorInt int color);
如果只是想設(shè)置按鈕不可點擊，不需要改變按鈕顏色区匠，可以使用如下方法
/**
* 設(shè)置按鈕是否可以點擊
*/
superButton.setButtonClickable(boolean buttonClickable);
最后
給大家分享一份移動架構(gòu)大綱干像，包含了移動架構(gòu)師需要掌握的所有的技術(shù)體系，大家可以對比一下自己不足或者欠缺的地方有方向的去學習提升驰弄；
需要高清架構(gòu)圖以及圖中視頻資料和文章項目源碼的可以加入我的技術(shù)交流群：825106898私聊群主小姐姐免費獲取
