背景按钮应该是我们的App里面最普遍的组件之一了，特别常用。通常我们写一个按钮的套路很
简单也很固定。大概分为以下几个步骤：在xml布局里面按照设计稿的尺寸位置写一个Textview按照设计稿规定的颜色和圆角在drawable目录下创建一个shape文件将这个shape文件作为Textview的背景这样一个很标准的按钮就诞生了，然后就可以继续愉快的开发了。这本来没有什么问题，也比让UI妹纸切图高级了很多，但是随着开发的进行你会发现，UI妹纸的想法很多，不同的界面有各种不同圆角和不同背景颜色的按钮，这个时候你需要把上面的三个步骤再进行N次。最后你会发现你的drawable目录下有各种各样的按钮背景资源，难以管理。特别是假如有的按钮要求有点击效果时需要
使用selector，这个时候可能就会产生三个文件用来满足需求，所以总得来说很繁琐。想法基于以上原因以及按钮
使用的普遍程度，感觉很有必要写一个
使用简单且能满足日常各种需求的按钮。我们先梳理下按钮需要达到的效果：
使用简单(即可以利用属性对按钮进行各种设置)可以支持设置按钮文字、按钮文字颜色、按钮文字大小可以支持统一设置圆角大小，也可以单独设置按钮每个圆角的大小可以支持设置按钮背景颜色可以支持selector可以支持圆形按钮可以支持渐变色按钮，可以支持各个方向设置渐变色可以支持设置带边框的按钮，可以设置边框的颜色和宽度可以支持设置按钮是否可以点击可以设置带图标的按钮，支持自定义按钮大小，和自动缩放，图标支持设置在文字上下左右四个方向，支持自定义文字距离图标的距离引入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: 圆形按钮效果代码<top
.androidman.SuperButton
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_margin="20dp"
android: 渐变背景的按钮效果代码<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: 带图标按钮效果代码<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);
墨衍会员
·
AI 创作全网分发
墨衍智能分发
本文由作者通过墨衍一键同步至各平台
1分发平台
700+累计阅读
776平均单平台
已同步平台
优快云
微信公众号
微博
知乎
掘金
百家号
博客园
抖音
小红书
你的文章也可以这样分发
墨衍会员 ¥399起/年，写一次发全网
我也要
304
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
