Android 自定义圆弧进度条

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

挺久没写文章了,近段时间被拉过去写 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 回帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 52 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 383 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 754 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 596 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 2 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖
  • Bug

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

    75 引用 • 1737 回帖
  • Maven

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

    186 引用 • 318 回帖 • 306 关注
  • Pipe

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

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

    131 引用 • 1114 回帖 • 131 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 30 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 8 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 5 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Python

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

    541 引用 • 672 回帖 • 1 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 615 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 637 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 1 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 63 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • 创造

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

    176 引用 • 995 回帖 • 1 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 3 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 613 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖