Android中快速便捷的实现圆角按钮方法详解
程序员文章站
2023-11-26 22:29:58
前言
大家应该都知道，圆角按钮是我们在做界面时常常遇到的ui样式。通常的办法，是做一个drawable，比如这样：
前言
大家应该都知道，圆角按钮是我们在做界面时常常遇到的ui样式。通常的办法，是做一个drawable，比如这样：
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- 填充的颜色 --> <solid android:color="#ffae00" /> <!-- 圆角的半径 --> <corners android:radius="10dp" /> </shape>
在layout文件里button的background属性设上这个drawable.xml，就可以了。
然而这样做的话，每次弄个按钮都得新做一个drawable文件，各种drawable多了看着就乱。
是不是可以把color和radius放到button的属性里去，这样就不用每次再拖一个drawable.xml了是吧？
自定义roundcornerbutton
<widget.roundcornerbutton android:id="@+id/btn_commit" android:layout_width="100dp" android:layout_height="40dp" android:gravity="center" android:text="我的按钮" app:rcb_backgroundcolor="@color/yellow" app:rcb_backgroundcolordisabled="@color/light_grey" app:rcb_cornerradius="20dp" />
如果可以这样在layout文件里直接设置背景色和圆角半径，是不是很方便！虽然不如drawable灵活，但是已经足以应付设计同学给出的圆角按钮的需求了。
我们就以定义自己的styleable属性开始吧
<declare-styleable name="roundcornerbutton"> <attr name="rcb_backgroundcolor" format="color" /> <attr name="rcb_backgroundcolordisabled" format="color" /> <attr name="rcb_cornerradius" format="dimension" /> </declare-styleable>
从drawable扩展一个自己的drawable，很简单
- 从构造方法传入color和radius，并创建一个实习的画笔；
- 覆写draw方法，有现成的画圆角矩形的方法可以调用；
- 暴露一个setrect方法给外边，用于设置绘制区域的宽高。
class roundcornerdrawable extends drawable {
final int color;
final float radius;
final paint paint;
final rectf rectf;
roundcornerdrawable(int color, float radius) {
this.color = color;
this.radius = radius;
// 实心的画笔
this.paint = new paint();
paint.setstyle(paint.style.fill);
paint.setantialias(true);
paint.setcolor(color);
this.rectf = new rectf();
}
// 用于设置drawable宽高
public void setrect(int width, int height) {
this.rectf.left = 0;
this.rectf.top = 0;
this.rectf.right = width;
this.rectf.bottom = height;
}
@override
public void draw(@nonnull canvas canvas) {
canvas.drawroundrect(rectf, radius, radius, paint); // 画圆角矩形，现成的方法
}
// 其余方法略
}
定义自己的button类，有这么几个要点：
- 与通常的自定义view一样，覆写三个构造方法；
- 从attributeset里读取自定义的属性backgroundcolor和cornerradius，这里暂时忽略backgroundcolordisabled；
- 每一种状态（例如普通、禁用、按下）是一个roundcornerdrawable，组合成一个statelistdrawable；
- onlayout的时候，记得改变每一个roundcornerdrawable的尺寸。
public class roundcornerbutton extends appcompatbutton {
private int colornormal;
private float cornerradius;
private roundcornerdrawable bgdrawablenormal = null;
// 省略三个构造方法
// 构造方法最后一定要调用initcornerbackground完成初始化
private void initcornerbackground(attributeset attrs, int defstyleattr) {
typedarray a = getcontext().obtainstyledattributes(attrs, r.styleable.roundcornerbutton, defstyleattr, 0);
this.cornerradius = a.getdimension(r.styleable.roundcornerbutton_rcb_cornerradius, 0);
this.colornormal = a.getcolor(r.styleable.roundcornerbutton_rcb_backgroundcolor, 0);
makebackgrounddrawable();
a.recycle();
}
private void makebackgrounddrawable() {
bgdrawablenormal = new roundcornerdrawable(this.colornormal, this.cornerradius);
bgdrawablenormal.setrect(getwidth(), getheight());
// 设计通常会给出禁用时的样式以及按下时的样式
// 所以这里用使用statelistdrawable
statelistdrawable bgdrawable = new statelistdrawable();
bgdrawable.addstate(new int[]{android.r.attr.state_enabled, -android.r.attr.state_pressed}, bgdrawablenormal);
// 每多一种状态，在这里多加一项
setbackgrounddrawable(bgdrawable);
}
@override
protected void onlayout(boolean changed, int left, int top, int right, int bottom) {
super.onlayout(changed, left, top, right, bottom);
// layout之后必然会draw，所以在这里设置drawable的尺寸
if (bgdrawablenormal != null) {
bgdrawablenormal.setrect(right - left, bottom - top);
}
// 每多一种状态，在这里多加一项
}
}
附上demo源代码：https://github.com/realxu/codesamples/tree/master/android/roundcornerbuttondemo
这就可以啦，我们看看效果：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。
上一篇： QQ营销技巧与方法