文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-06-06 07:42

关注

最近看到一些应用在下载文件的时候,并没有额外弹出进度条,而是很炫的使用启动下载任务的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 Button按钮的四种点击事件Android自定义FloatingActionButton滑动行为只隐藏不出现的问题小结Android RadioButton 图片位置与大小实例详解Android 自定义Button控件实现按钮点击变色Android中button点击后字体的变色效果Android自定义button点击效果的两种方式Android手机开发 使用线性布局和相对布局实现Button垂直水平居中Android开发之创建可点击的Button实现方法Android中EditText+Button组合导致输入板无法收起的原因分析及解决办法Android实现点击Button产生水波纹效果Android编程实现长按Button按钮连续响应功能示例


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯