登录 注册

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 回帖 • 2 关注
  • 进度条
    1 引用 • 1 回帖
广州 位置
1 回帖
668 9 79 142 45 112 7 80 185

相关帖子

1 回帖
Android 自定义圆弧进度条

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
Devin
你好，世界！ 广州
回帖
16
 帖子
3
 积分
3387

近期热议

推荐标签 标签

  • 周末

    星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 1 关注
  • GAE

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

    14 引用 • 42 回帖 • 764 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 62 关注
  • ngrok

    ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 624 关注
  • 音乐

    你听到信仰的声音了么？

    60 引用 • 511 回帖 • 1 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • 自由行
    • 10 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 709 关注
  • 服务

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

    41 引用 • 24 回帖 • 2 关注
  • BAE

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

    19 引用 • 75 回帖 • 641 关注
  • Android

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

    334 引用 • 323 回帖 • 2 关注
  • InfluxDB

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

    2 引用 • 72 关注
  • Maven

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

    186 引用 • 318 回帖 • 304 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    55 引用 • 85 回帖 • 1 关注
  • 职场

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

    127 引用 • 1705 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 67 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 21 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖 • 2 关注
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 483 关注
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • GraphQL

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

    4 引用 • 3 回帖 • 9 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖 • 1 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 625 关注

最新标签