Android 自定义圆弧进度条

本贴最后更新于 2659 天前,其中的信息可能已经时过境迁

挺久没写文章了,近段时间被拉过去写 JS 项目了,在做一个项目的时候,遇到一个新的需求就是空气质量,实现空气污染指数的时候,需要到一个圆弧的进度,在网上没找到合适,干脆就自己写了一个,顺便复习一下自定义 View,下面是具体的实现。

先看一下效果

这里的话我只做一个进度条,使用也很简单。圆弧外的文本是一个 textview,不是这个控件里面的,说明一下。

下面先看一下整体的代码:

import android.animation.ValueAnimator;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Rect;

import android.graphics.RectF;

import android.support.annotation.Nullable;

import android.util.AttributeSet;

import android.view.View;



public class ArcProgressBar extends View {

private static final String TAG = "ArcProgressBar";

/**

 * 圆弧的宽度

 */

private int mStrokeWidth = dp2px(8);

/**

 * 圆弧开始的角度

 */

private float mStartAngle = 135;

/**

 * 起点角度和终点角度对应的夹角大小

 */

private float mAngleSize = 270;

/**

 * 圆弧背景颜色

 */

private int mArcBgColor = Color.YELLOW;

/**

 * 最大的进度,用于计算进度与夹角的比例

 */

private float mMaxProgress = 500;

/**

 * 当前进度对应的起点角度到当前进度角度夹角的大小

 */

private float mCurrentAngleSize = 0;

/**

 * 当前进度

 */

private float mCurrentProgress = 0;

/**

 * 动画的执行时长

 */

private long mDuration = 3000;

/**

 * 进度圆弧的颜色

 */

private int mProgressColor = Color.RED;

/**

 * 第一行文本

 */

private String mFirstText = "42";

/**

 * 第一行文本的颜色

 */

private int mFirstTextColor = Color.RED;

/**

 * 第一行文本的字体大小

 */

private float mFirstTextSize = 56f;

/**

 * 第二行文本

 */

private String mSecondText = "优";

/**

 * 第二行文本的颜色

 */

private int mSecondTextColor = Color.RED;

/**

 * 第二行文本的字体大小

 */

private float mSecondTextSize = 56f;

public ArcProgressBar(Context context) {

    super(context, null);

}

public ArcProgressBar(Context context, @Nullable AttributeSet attrs) {

    super(context, attrs, 0);

}

public ArcProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

    super(context, attrs, defStyleAttr);

    initAttr(context, attrs);

}

/**

 * 设置初始化的参数

 *

 * @param context

 * @param attrs

 */

private void initAttr(Context context, AttributeSet attrs) {

    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ArcProgressBar);

    mMaxProgress = array.getFloat(R.styleable.ArcProgressBar_arc_max_progress, 500f);

    mArcBgColor = array.getColor(R.styleable.ArcProgressBar_arc_bg_color, Color.YELLOW);

    mStrokeWidth = dp2px(array.getDimension(R.styleable.ArcProgressBar_arc_stroke_width, 12f));

    mCurrentProgress = array.getFloat(R.styleable.ArcProgressBar_arc_progress, 300f);

    mProgressColor = array.getColor(R.styleable.ArcProgressBar_arc_progress_color, Color.RED);

    mFirstText = array.getString(R.styleable.ArcProgressBar_arc_first_text);

    mFirstTextSize = dp2px(array.getDimension(R.styleable.ArcProgressBar_arc_first_text_size, 20f));

    mFirstTextColor = array.getColor(R.styleable.ArcProgressBar_arc_first_text_color, Color.RED);

    mSecondText = array.getString(R.styleable.ArcProgressBar_arc_second_text);

    mSecondTextSize = dp2px(array.getDimension(R.styleable.ArcProgressBar_arc_second_text_size, 20f));

    mSecondTextColor = array.getColor(R.styleable.ArcProgressBar_arc_second_text_color, Color.RED);

    mAngleSize = array.getFloat(R.styleable.ArcProgressBar_arc_angle_size, 270f);

    mStartAngle = array.getFloat(R.styleable.ArcProgressBar_arc_start_angle, 135f);

    array.recycle();

}

@Override

protected void onDraw(Canvas canvas) {

    super.onDraw(canvas);

    int centerX = getWidth() / 2;

    RectF rectF = new RectF();

    rectF.left = mStrokeWidth;

    rectF.top = mStrokeWidth;

    rectF.right = centerX * 2 - mStrokeWidth;

    rectF.bottom = centerX * 2 - mStrokeWidth;

    //画最外层的圆弧

    drawArcBg(canvas, rectF);

    //画进度

    drawArcProgress(canvas, rectF);

    //绘制第一级文本

    drawFirstText(canvas, centerX);

    //绘制第二级文本

    drawSecondText(canvas, centerX);

}

/**

 * 画最开始的圆弧

 *

 * @param canvas

 * @param rectF

 */

private void drawArcBg(Canvas canvas, RectF rectF) {

    Paint mPaint = new Paint();

    //画笔的填充样式,Paint.Style.FILL 填充内部;Paint.Style.FILL_AND_STROKE 填充内部和描边;Paint.Style.STROKE 描边

    mPaint.setStyle(Paint.Style.STROKE);

    //圆弧的宽度

    mPaint.setStrokeWidth(mStrokeWidth);

    //抗锯齿

    mPaint.setAntiAlias(true);

    //画笔的颜色

    mPaint.setColor(mArcBgColor);

    //画笔的样式 Paint.Cap.Round 圆形,Cap.SQUARE 方形

    mPaint.setStrokeCap(Paint.Cap.ROUND);

    //开始画圆弧

    canvas.drawArc(rectF, mStartAngle, mAngleSize, false, mPaint);

}

/**

 * 画进度的圆弧

 *

 * @param canvas

 * @param rectF

 */

private void drawArcProgress(Canvas canvas, RectF rectF) {

    Paint paint = new Paint();

    paint.setStyle(Paint.Style.STROKE);

    paint.setStrokeWidth(mStrokeWidth);

    paint.setColor(mProgressColor);

    paint.setAntiAlias(true);

    paint.setStrokeCap(Paint.Cap.ROUND);

    canvas.drawArc(rectF, mStartAngle, mCurrentAngleSize, false, paint);

}

/**

 * 绘制第一级文字

 *

 * @param canvas  画笔

 * @param centerX 位置

 */

private void drawFirstText(Canvas canvas, float centerX) {

    Paint paint = new Paint();

    paint.setAntiAlias(true);

    paint.setColor(mFirstTextColor);

    paint.setTextAlign(Paint.Align.CENTER);

    paint.setTextSize(mFirstTextSize);

    Rect firstTextBounds = new Rect();

    paint.getTextBounds(mFirstText, 0, mFirstText.length(), firstTextBounds);

    canvas.drawText(mFirstText, centerX, firstTextBounds.height() / 2 + getHeight() * 2 / 5, paint);

}

/**

 * 绘制第二级文本

 *

 * @param canvas  画笔

 * @param centerX 文本

 */

private void drawSecondText(Canvas canvas, float centerX) {

    Paint paint = new Paint();

    paint.setAntiAlias(true);

    paint.setColor(mSecondTextColor);

    paint.setTextAlign(Paint.Align.CENTER);

    paint.setTextSize(mSecondTextSize);

    Rect bounds = new Rect();

    paint.getTextBounds(mSecondText, 0, mSecondText.length(), bounds);

    canvas.drawText(mSecondText, centerX, getHeight() / 2 + bounds.height() / 2 +

            getFontHeight(mSecondText, mSecondTextSize), paint);

}

/**

 * 设置最大的进度

 *

 * @param progress

 */

public void setMaxProgress(int progress) {

    if (progress < 0) {

        throw new IllegalArgumentException("Progress value can not be less than 0 ");

    }

    mMaxProgress = progress;

}

/**

 * 设置当前进度

 *

 * @param progress

 */

public void setProgress(float progress) {

    if (progress < 0) {

        throw new IllegalArgumentException("Progress value can not be less than 0");

    }

    if (progress > mMaxProgress) {

        progress = mMaxProgress;

    }

    mCurrentProgress = progress;

    float size = mCurrentProgress / mMaxProgress;

    mCurrentAngleSize = (int) (mAngleSize * size);

    setAnimator(0, mCurrentAngleSize);

}

/**

 * 设置进度圆弧的颜色

 *

 * @param color

 */

public void setProgressColor(int color) {

    if (color == 0) {

        throw new IllegalArgumentException("Color can no be 0");

    }

    mProgressColor = color;

}

/**

 * 设置圆弧的颜色

 *

 * @param color

 */

public void setArcBgColor(int color) {

    if (color == 0) {

        throw new IllegalArgumentException("Color can no be 0");

    }

    mArcBgColor = color;

}

/**

 * 设置圆弧的宽度

 *

 * @param strokeWidth

 */

public void setStrokeWidth(int strokeWidth) {

    if (strokeWidth < 0) {

        throw new IllegalArgumentException("strokeWidth value can not be less than 0");

    }

    mStrokeWidth = dp2px(strokeWidth);

}

/**

 * 设置动画的执行时长

 *

 * @param duration

 */

public void setAnimatorDuration(long duration) {

    if (duration < 0) {

        throw new IllegalArgumentException("Duration value can not be less than 0");

    }

    mDuration = duration;

}

/**

 * 设置第一行文本

 *

 * @param text

 */

public void setFirstText(String text) {

    mFirstText = text;

}

/**

 * 设置第一行文本的颜色

 *

 * @param color

 */

public void setFirstTextColor(int color) {

    if (color <= 0) {

        throw new IllegalArgumentException("Color value can not be less than 0");

    }

    mFirstTextColor = color;

}

/**

 * 设置第一行文本的大小

 *

 * @param textSize

 */

public void setFirstTextSize(float textSize) {

    if (textSize <= 0) {

        throw new IllegalArgumentException("textSize can not be less than 0");

    }

    mFirstTextSize = textSize;

}

/**

 * 设置第二行文本

 *

 * @param text

 */

public void setSecondText(String text) {

    mSecondText = text;

}

/**

 * 设置第二行文本的颜色

 *

 * @param color

 */

public void setSecondTextColor(int color) {

    if (color == 0) {

        throw new IllegalArgumentException("Color value can not be less than 0");

    }

    mSecondTextColor = color;

}

/**

 * 设置第二行文本的大小

 *

 * @param textSize

 */

public void setSecondTextSize(float textSize) {

    if (textSize <= 0) {

        throw new IllegalArgumentException("textSize can not be less than 0");

    }

    mSecondTextSize = textSize;

}

/**

 * 设置圆弧开始的角度

 *

 * @param startAngle

 */

public void setStartAngle(int startAngle) {

    mStartAngle = startAngle;

}

/**

 * 设置圆弧的起始角度到终点角度的大小

 *

 * @param angleSize

 */

public void setAngleSize(int angleSize) {

    mAngleSize = angleSize;

}

/**

 * dp转成px

 *

 * @param dp

 * @return

 */

private int dp2px(float dp) {

    float density = getResources().getDisplayMetrics().density;

    return (int) (dp * density + 0.5f * (dp >= 0 ? 1 : -1));

}

/**

 * 设置动画

 *

 * @param start  开始位置

 * @param target 结束位置

 */

private void setAnimator(float start, float target) {

    ValueAnimator valueAnimator = ValueAnimator.ofFloat(start, target);

    valueAnimator.setDuration(mDuration);

    valueAnimator.setTarget(mCurrentAngleSize);

    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @Override

        public void onAnimationUpdate(ValueAnimator valueAnimator) {

            mCurrentAngleSize = (float) valueAnimator.getAnimatedValue();

            invalidate();

        }

    });

    valueAnimator.start();

}

/**

 * 测量字体的高度

 *

 * @param textStr

 * @param fontSize

 * @return

 */

private float getFontHeight(String textStr, float fontSize) {

    Paint paint = new Paint();

    paint.setTextSize(fontSize);

    Rect bounds = new Rect();

    paint.getTextBounds(textStr, 0, textStr.length(), bounds);

    return bounds.height();

}

}

然后是具体使用控件里面的代码:

    android:id="@+id/arc"

    android:layout_width="100dp"

    android:layout_height="100dp"

    android:layout_gravity="center"/>

这里使用非常简单,跟其它控件的使用没什么区别。

里面还定义了很多直接在 xml 文件里面就可以直接设置的属性

这个自定义 View 非常简单,代码里面注释也写的很清楚了,就不做过多的介绍了,有兴趣的可以去做更多的扩展,比如,直接做成圆形或者扇形,还有这里必须要两行文本,如果项目需要,也可以直接去删除掉文本,不过需要计算一下文本的绘制位置。

有兴趣的可以去 GitHub 上面给个 Start,地址是:传送门

  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖
  • 进度条
    1 引用 • 1 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 1 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 5 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
  • OnlyOffice
    4 引用 • 3 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖 • 1 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 31 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 1 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 58 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 537 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 2 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    75 引用 • 1737 回帖 • 5 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖 • 1 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 642 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    179 引用 • 995 回帖
  • CodeMirror
    1 引用 • 2 回帖 • 129 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 387 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    543 引用 • 672 回帖 • 1 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 463 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    47 引用 • 25 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 114 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 1 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    132 引用 • 1114 回帖 • 124 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 302 关注