Android中快速便捷的实现圆角按钮方法详解

Android中快速便捷的实现圆角按钮方法详解,第1张

概述前言大家应该都知道,圆角按钮是我们在做界面时常常遇到的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

<@[email protected] 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,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

这就可以啦,我们看看效果:

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程小技巧的支持。

总结

以上是内存溢出为你收集整理的Android中快速便捷的实现圆角按钮方法详解全部内容,希望文章能够帮你解决Android中快速便捷的实现圆角按钮方法详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1146211.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存