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

 更新时间:2017年05月18日 11:26:56   作者:贼寇  
圆角按钮在我们现在的界面中常常会用到,最近在开发中就又遇到了,所以想着有没有更快速更便捷的实现方法呢,所以就有了这篇文章,本文主要给大家介绍了关于Android中如何快速便捷的实现圆角按钮的相关资料,需要的朋友可以参考下。

前言

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

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

总结

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

相关文章

  • Android编程判断横屏、竖屏及设置横竖屏的方法

    Android编程判断横屏、竖屏及设置横竖屏的方法

    这篇文章主要介绍了Android编程判断横屏、竖屏及设置横竖屏的方法,结合实例形式分析了Android针对横竖屏的判断、计算、设置等相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • Room Kotlin API的使用入门教程

    Room Kotlin API的使用入门教程

    这篇文章主要介绍了Room Kotlin API使用入门教程,帮助大家更好的理解和学习使用并且测试 Room Kotlin API,感兴趣的朋友可以了解下
    2021-04-04
  • Android ViewFlipper的简单使用

    Android ViewFlipper的简单使用

    这篇文章主要为大家详细介绍了Android ViewFlipper的简单使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • CoordinatorLayout的使用如此简单(Android)

    CoordinatorLayout的使用如此简单(Android)

    这篇文章主要为大家详细介绍了Android CoordinatorLayout的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • Flutter Widget移动UI框架使用Material和密匙Key实战

    Flutter Widget移动UI框架使用Material和密匙Key实战

    这篇文章主要为大家介绍了Flutter Widget移动UI框架使用Material和密匙Key实战,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • android app判断是否有系统签名步骤详解

    android app判断是否有系统签名步骤详解

    这篇文章主要为大家介绍了android app判断是否有系统签名步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • Android 数据结构全面总结分析

    Android 数据结构全面总结分析

    这篇文章主要为大家介绍了Android 数据结构全面总结分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • Android自定义view实现侧滑栏详解

    Android自定义view实现侧滑栏详解

    之前一直没有写侧滑菜单的实现方法,今天计划补上。手机开发中,往往存在很多功能没处放的问题。我们可能会把功能放入一个菜单列表,但现在一种流行的做法是侧滑菜单
    2022-11-11
  • 浅析Android手机卫士接收短信指令执行相应操作

    浅析Android手机卫士接收短信指令执行相应操作

    通过广播接收者,接收到短信,对短信内容进行判断,如果为我们指定的值就执行相应的操作。本文给大家介绍Android手机卫士接收短信指令执行相应操作,感兴趣的朋友参考下吧
    2016-04-04
  • Android自定义弹出窗口PopupWindow使用技巧

    Android自定义弹出窗口PopupWindow使用技巧

    这篇文章主要介绍了Android自定义弹出窗口PopupWindow使用技巧,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11

最新评论