button 单行 android,这真的可能是最好用的按钮了

原标题:这真的可能是最好用的按钮了

背景

按钮应该是我们的App里面最普遍的组件之一了,特别常用。

通常我们写一个按钮的套路很简单也很固定。大概分为以下几个步骤:

在xml布局里面按照设计稿的尺寸位置写一个Textview

按照设计稿规定的颜色和圆角在drawable目录下创建一个shape文件

将这个shape文件作为Textview的背景

这样一个很标准的按钮就诞生了,然后就可以继续愉快的开发了。这本来没有什么问题,也比让UI妹纸切图高级了很多,但是随着开发的进行你会发现,UI妹纸的想法很多,不同的界面有各种不同圆角和不同背景颜色的按钮,这个时候你需要把上面的三个步骤再进行N次。

最后你会发现你的drawable目录下有各种各样的按钮背景资源,难以管理。特别是假如有的按钮要求有点击效果时需要使用selector,这个时候可能就会产生三个文件用来满足需求,所以总得来说很繁琐。

想法

基于以上原因以及按钮使用的普遍程度,感觉很有必要写一个使用简单且能满足日常各种需求的按钮。我们先梳理下按钮需要达到的效果:

使用简单(即可以利用属性对按钮进行各种设置)

可以支持设置按钮文字、按钮文字颜色、按钮文字大小

可以支持统一设置圆角大小,也可以单独设置按钮每个圆角的大小

可以支持设置按钮背景颜色

可以支持selector

可以支持圆形按钮

可以支持渐变色按钮,可以支持各个方向设置渐变色

可以支持设置带边框的按钮,可以设置边框的颜色和宽度

可以支持设置按钮是否可以点击

可以设置带图标的按钮,支持自定义按钮大小,和自动缩放,图标支持设置在文字上下左右四个方向,支持自定义文字距离图标的距离

引入

implementation'top.androidman:superbutton:1.0.1'

Github传送门

实现效果

基本使用

单独设置每个圆角

Selector

圆形按钮

a232e7a9d1b804b28c4cf8189b1acea4.png

606c8d47ab64fe59536a0b6de0cb8f5f.png

875b9a94980da3b30206b13a9fbb0d9a.gif

1f99d00b092fb0848d0547e7599aa66e.png

渐变背景的按钮

有边框按钮

按钮不可点击

带图标按钮

7b6f032b4763fbe5b7bbdc047a18828a.png

81c202fda704f68e503c0e6749d6b22d.png

f5f51e0798400a43e6ce810debca254f.png

f1f1faa469fd5898ef042c61efa06252.png

代码解释

0x1 基本使用效果

5e9fd88827ac333766b077fa999f7bec.png

代码

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 单独设置每个圆角

效果

6e4459205277c67a8da491b7e3a55cec.png

代码

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效果

346dc4b05c0c3ba5f41a747b2bbdc466.gif

代码

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 圆形按钮

效果

99f1f21417277366e22e329c80f0e613.png

代码

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 渐变背景的按钮效果

83b6a02bec9b33a3350334c79f017346.png

代码

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 有边框按钮效果

9906ef5c365186c68703ac40c0da09a0.png

代码

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 按钮不可点击

效果

0f0689c9bf7cba5b3fb227cb05255920.png

代码

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=falsen也可以代码设置"

app:textColor="@color/color_white"

app:textSize="22sp"/>

属性解释

按钮是否可以点击,默认为true可以点击 app:button_click_able="false"

按钮文字是否单行,默认为true单行 app:singleLine="false"

注意:按钮提供有方法对点击事件进行控制,请参考高级使用里面相关方法

0x8 带图标按钮效果

5cd7f438e440808979ac293236a576ae.png

代码

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"

按钮支持的所有属性

高级应用

1.想修改按钮相关调用如下方法:

/**

* 修改文字

*/

superButton.setText(CharSequencetext);

/**

* 修改文字颜色

*/

superButton.setTextColor(@ColorIntint textColor);

/**

* 修改按钮背景颜色

*/

superButton.setColorNormal(@ColorIntint colorNormal);

当某些状态下需要代码控制,将按钮置灰然后不可点击,可以直接调用如下方法:

/**

* 调用此方法后按钮颜色被改变,按钮无法点击

*/

superButton.setUnableColor(@ColorIntint color);

如果只是想设置按钮不可点击,不需要改变按钮颜色,可以使用如下方法

/**

* 设置按钮是否可以点击

*/

superButton.setButtonClickable(booleanbuttonClickable);

未来展望

未来准备把按钮阴影加入进来,这样这个按钮的使用就更加方便啦!

所以如果大家有好的想法和需求,欢迎大家提issue。

作者:bigerman

链接:https://juejin.im/post/5d287095e51d45554877a670返回搜狐,查看更多

责任编辑: