脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android显示进度的Button按钮

Android自定义控件制作显示进度的Button

 更新时间：2016年08月31日 14:23:50   作者：ly513782705  
这篇文章主要为大家详细介绍了Android自定义控件制作显示进度的Button，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近看到一些应用在下载文件的时候，并没有额外弹出进度条，而是很炫的使用启动下载任务的Button直接显示文件的下载进度，通过改变其背景色，从左向右推进，直到填满整个Button时，意味着下载任务的完成。

除了这种效果，还看到某酷的视频客户端，在观看过的视频对应的按钮上，会给该按钮添加一个描边效果，4条边，每条边代表25%的进度，由上沿开始，顺时针最终到左边沿，则代表100%的进度，这种效果也很不错。

自己也研究了一下，写了个自定义的button，下面是效果， 

普通的填充效果： 

描边的效果： 

自定义Button的主要实现就是继承Button，并重写onDraw()方法，填充的效果实现起来相对简单一点：

 if(currentType == TYPE_FILL) {
      mPaint.setColor(getContext().getResources().getColor(R.color.green_yellow));
      mPaint.setAntiAlias(true);
      mPaint.setAlpha(128);
      mPaint.setStrokeWidth(1.0f);
      Rect rect = new Rect();
      //先获取Button的边框
      canvas.getClipBounds(rect);
      rect.left += getPaddingLeft();
      //填充条的右边界根据当前进度来计算
      rect.top += getPaddingTop();
      rect.right = (rect.left - getPaddingLeft()) + (mProgress * getWidth() / 100) - getPaddingRight();
      rect.bottom -= getPaddingBottom();
      //绘制一个圆角的长条，这样相对好看一点
      canvas.drawRoundRect(new RectF(rect), 8.0f, 8.0f, mPaint);
    }
       

描边效果实现起来相对复杂一点，确切说是繁琐：

     else if(currentType == TYPE_STROKE) {
      //初始化画笔
      mPaint.setAntiAlias(true);
      mPaint.setColor(getContext().getResources().getColor(R.color.green_yellow));
      mPaint.setAlpha(255);
      //获取Button的边框
      Rect rect = new Rect();
      canvas.getClipBounds(rect);
      Paint paint1, paint2, paint3, paint4;
      //根据当前进度，确定是绘制哪条边，其实也是绘制一个矩形，只不过这个矩形比较扁或是比较窄而已，类似一条边
      if(mProgress >= 0 && mProgress < 25) {
        paint1 = new Paint(mPaint);
        Rect temp = new Rect(rect.left + getPaddingLeft(),
            rect.top + getPaddingTop(),
            rect.left + mProgress * (getWidth() - getPaddingLeft() - getPaddingRight())
                / 25 - getPaddingRight(),
            rect.top + getPaddingTop() + 2);
        canvas.drawRect(temp, paint1);
      } else if(mProgress < 50) {
        paint1 = new Paint(mPaint);
        Rect rect1 = new Rect(rect.left + getPaddingLeft(),
            rect.top + getPaddingTop(), rect.right - getPaddingRight(),
            rect.top + getPaddingTop() + 2);
        canvas.drawRect(rect1, paint1);

        paint2 = new Paint(mPaint);
        Rect rect2 = new Rect(rect.right - getPaddingRight() - 2,
            rect.top + getPaddingTop(), rect.right - getPaddingRight(),
            rect.top + getPaddingTop() + (mProgress - 25) *
                (getHeight() - getPaddingTop() - getPaddingBottom()) / 25);
        canvas.drawRect(rect2, paint2);
      } else if(mProgress < 75) {
        paint1 = new Paint(mPaint);
        Rect rect1 = new Rect(rect.left + getPaddingLeft(),
            rect.top + getPaddingTop(), rect.right - getPaddingRight(),
            rect.top + getPaddingTop() + 2);
        canvas.drawRect(rect1, paint1);

        paint2 = new Paint(mPaint);
        Rect rect2 = new Rect(rect.right - getPaddingRight() - 2,
            rect.top + getPaddingTop(), rect.right - getPaddingRight(),
            rect.bottom - getPaddingBottom());
        canvas.drawRect(rect2, paint2);

        paint3 = new Paint(mPaint);
        Rect rect3 = new Rect(
            rect.right - getPaddingRight() - (mProgress - 50) *
                (getWidth() - getPaddingLeft() - getPaddingRight()) / 25,
            rect.bottom - getPaddingBottom() - 2,
            rect.right - getPaddingRight(),
            rect.bottom - getPaddingBottom());
        canvas.drawRect(rect3, paint3);
      } else if(mProgress <= 100) {
        paint1 = new Paint(mPaint);
        Rect rect1 = new Rect(
            rect.left + getPaddingLeft(),
            rect.top + getPaddingTop(), rect.right - getPaddingRight(),
            rect.top + getPaddingTop() + 2);
        canvas.drawRect(rect1, paint1);

        paint2 = new Paint(mPaint);
        Rect rect2 = new Rect(
            rect.right - getPaddingRight() - 2,
            rect.top + getPaddingTop(), rect.right - getPaddingRight(),
            rect.bottom - getPaddingBottom());
        canvas.drawRect(rect2, paint2);

        paint3 = new Paint(mPaint);
        Rect rect3 = new Rect(
            rect.left + getCompoundPaddingLeft(),
            rect.bottom - getPaddingBottom() - 2, rect.right - getPaddingRight(),
            rect.bottom - getPaddingRight());
        canvas.drawRect(rect3, paint3);

        paint4 = new Paint(mPaint);
        Rect rect4 = new Rect(
            rect.left + getCompoundPaddingLeft(),
            rect.bottom - getPaddingBottom() - (mProgress - 75) *
                (getHeight() - getPaddingTop() - getPaddingBottom()) / 25,
            rect.left + getPaddingLeft() + 2,
            rect.bottom - getPaddingBottom());
        canvas.drawRect(rect4, paint4);
      }
    }

记得最后执行 super.onDraw(canvas);

这样会让填充或是描边绘制在最底层，不会挡住Button原有的内容。

然后添加一个API，用于更新进度： 

  public void updateProgress(int progress) {
    if(progress >= 0 && progress <= 100) {
      mProgress = progress;
      invalidate();
    } else if(progress < 0) {
      mProgress = 0;
      invalidate();
    } else if(progress > 100) {
      mProgress = 100;
      invalidate();
    }
  }

Demo的代码上传到了github上：https://github.com/YoungLeeForeverBoy/ProgressButton

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Android TextView Marquee的应用实例详解

    Android TextView Marquee的应用实例详解

    这篇文章主要介绍了Android TextView Marquee的应用实例详解的相关资料,这里说明使用方法及简单实例和注意实现，需要的朋友可以参考下
    2017-08-08
  • android顶部(toolbar)搜索框实现代码

    android顶部(toolbar)搜索框实现代码

    这篇文章主要介绍了android顶部(toolbar)搜索框实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Android Activity与Fragment之间的跳转实例详解

    Android Activity与Fragment之间的跳转实例详解

    这篇文章主要介绍了Android Activity与Fragment之间的跳转实例详解的相关资料,需要的朋友可以参考下
    2017-02-02
  • Android NDK开发(C语言字符串)

    Android NDK开发(C语言字符串)

    这篇文章主要介绍了Android NDK开发 C语言字符串 ，主要以字符数组、字符指针及一些字符串常用的方法的方法未来全文展开内容,需要的朋友可以参考一下
    2021-12-12
  • Eclipse安装ADT插件速度慢的解决方法

    Eclipse安装ADT插件速度慢的解决方法

    这篇文章主要介绍了Eclipse安装ADT插件速度慢的解决方法,涉及基于Apache的反向代理与hosts文件的设置方法,需要的朋友可以参考下
    2015-12-12
  • android canvas使用line画半圆

    android canvas使用line画半圆

    这篇文章主要为大家详细介绍了android canvas使用line画半园，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Android 中图片和按钮按下状态变化实例代码解析

    Android 中图片和按钮按下状态变化实例代码解析

    这篇文章通过实例代码给大家总结了android 中图片和按钮按下状态变化问题，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-06-06
  • Android自定义弹框Dialog效果

    Android自定义弹框Dialog效果

    这篇文章主要为大家详细介绍了Android自定义弹框Dialog效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Flutter状态管理Provider示例解析

    Flutter状态管理Provider示例解析

    这篇文章主要为大家介绍了Flutter状态管理Provider示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • android post请求接口demo

    android post请求接口demo

    这篇文章主要为大家详细介绍了android post请求接口测试代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论