当前位置: 开发笔记 > Android > 正文

Android自定义圆形带刻度渐变色的进度条样式实例代码

作者：金花婆婆2502921867 | 来源：互联网 | 2021-08-27 03:48

这篇文章主要介绍了Android自定义圆形带刻度渐变色的进度条的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下

效果图

一、绘制圆环

圆环故名思意，第一个首先绘制是圆环

1：圆环绘制函数

圆环API

public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

参数说明

oval：圆弧所在的椭圆对象。

startAngle：圆弧的起始角度。

sweepAngle：圆弧的角度。

useCenter：是否显示半径连线，true表示显示圆弧与圆心的半径连线，false表示不显示。

paint：绘制时所使用的画笔。

 //circleCenter 整个圆半径 radius圆环的半径
RectF oval = new RectF(circleCenter - radius, circleCenter - radius, circleCenter + radius, circleCenter + radius);
//因为-90°才是从12点钟方向开始 所以从-90开始 progress 为进度
canvas.drawArc(oval, -90, (float) (progress * 3.6), false, paint);

2：对圆环上色

因为要的是渐变效果API也有提供

函数名是：SweepGradient

构造函数

public SweepGradient (float cx, float cy, int[] colors, float[] positions)

cx 渲染中心点x 坐标

cy 渲染中心y 点坐标

colors 围绕中心渲染的颜色数组，至少要有两种颜色值

positions 相对位置的颜色数组 ,可为null, 若为null,可为null, 颜色沿渐变线均匀分布

public SweepGradient (float cx, float cy, int color0, int color1)

cx 渲染中心点x 坐标

cy 渲染中心点y 坐标

color0 起始渲染颜色

color1 结束渲染颜色

实现样式

//渐变颜色 你可以添加很多种但是至少要保持在2种颜色以上
int[] colors = {0xffff4639, 0xffCDD513, 0xff3CDF5F};
 //circleWidth 圆的直径 取中心点 
 SweepGradient sweepGradient = new SweepGradient(this.circleWidth / 2, this.circleWidth / 2, colors, null);

但是最后实现出来的效果是渐变开始角度是从0°开始的但是我们想要的要求是从-90°开始因此需要对绘制的圆环进行旋转

 //旋转 不然是从0度开始渐变
 Matrix matrix = new Matrix();
 matrix.setRotate(-90, this.circleWidth / 2, this.circleWidth / 2);
 sweepGradient.setLocalMatrix(matrix);

最后将渐变添加到圆环

paint.setShader(sweepGradient);

因为是需要保持第一个圆环的采用渐变，所以在绘制时候在利用完之后将设置

paint.setShader(null);

3：绘制剩余的进度

一样的是绘制圆环开始角度

//同样的因为是反向绘制的 也可以根据当前的有颜色的角度结束角度开始绘制到-90°
 canvas.drawArc(oval, -90, (float) (-(100 - progress) * 3.6), false, paint);

最终实现效果如图1所示

二、刻度

1：圆环刻度

是对整个圆环根据刻度大小进行平分，计算出每个所占的角度然后根据当前的进度计算该显示几个圆环之后再绘制上去，刻度使用是也是圆环，只是角度很小而已

如下

 float start = -90f;
   float p = ((float) maxColorNumber / (float) 100);
   p = (int) (progress * p);
   for (int i = 0; i

2：文字刻度

也就是绘制文字是对文字绘制之后进行相应的旋转

 //绘制文字刻度
  for (int i = 1; i <= 10; i++) {
   canvas.save();// 保存当前画布
   canvas.rotate(360 / 10 * i, circleCenter, circleCenter);
   canvas.drawText(i * 10 + "", circleCenter, circleCenter - radius + roundWidth / 2 + getDpValue(4) + textSize, mPaintText);
   canvas.restore();//
  }

最后上整个View代码

package com.example.shall.myapplication;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
public class CircularRingPercentageView extends View {
 private Paint paint;
 private int circleWidth;
 private int roundBackgroundColor;
 private int textColor;
 private float textSize;
 private float roundWidth;
 private float progress = 0;
 private int[] colors = {0xffff4639, 0xffCDD513, 0xff3CDF5F};
 private int radius;
 private RectF oval;
 private Paint mPaintText;
 private int maxColorNumber = 100;
 private float singlPoint = 9;
 private float lineWidth = 0.3f;
 private int circleCenter;
 private SweepGradient sweepGradient;
 private boolean isLine;
 /**
  * 分割的数量
  *
  * @param maxColorNumber 数量
  */
 public void setMaxColorNumber(int maxColorNumber) {
  this.maxColorNumber = maxColorNumber;
  singlPoint = (float) 360 / (float) maxColorNumber;
  invalidate();
 }
 /**
  * 是否是线条
  *
  * @param line true 是 false否
  */
 public void setLine(boolean line) {
  isLine = line;
  invalidate();
 }
 public int getCircleWidth() {
  return circleWidth;
 }
 public CircularRingPercentageView(Context context) {
  this(context, null);
 }
 public CircularRingPercentageView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }
 public CircularRingPercentageView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.CircularRing);
  maxColorNumber = mTypedArray.getInt(R.styleable.CircularRing_circleNumber, 40);
  circleWidth = mTypedArray.getDimensionPixelOffset(R.styleable.CircularRing_circleWidth, getDpValue(180));
  roundBackgroundColor = mTypedArray.getColor(R.styleable.CircularRing_roundColor, 0xffdddddd);
  textColor = mTypedArray.getColor(R.styleable.CircularRing_circleTextColor, 0xff999999);
  roundWidth = mTypedArray.getDimension(R.styleable.CircularRing_circleRoundWidth, 40);
  textSize = mTypedArray.getDimension(R.styleable.CircularRing_circleTextSize, getDpValue(8));
  colors[0] = mTypedArray.getColor(R.styleable.CircularRing_circleColor1, 0xffff4639);
  colors[1] = mTypedArray.getColor(R.styleable.CircularRing_circleColor2, 0xffcdd513);
  colors[2] = mTypedArray.getColor(R.styleable.CircularRing_circleColor3, 0xff3cdf5f);
  initView();
  mTypedArray.recycle();
 }
 /**
  * 空白出颜色背景
  *
  * @param roundBackgroundColor
  */
 public void setRoundBackgroundColor(int roundBackgroundColor) {
  this.roundBackgroundColor = roundBackgroundColor;
  paint.setColor(roundBackgroundColor);
  invalidate();
 }
 /**
  * 刻度字体颜色
  *
  * @param textColor
  */
 public void setTextColor(int textColor) {
  this.textColor = textColor;
  mPaintText.setColor(textColor);
  invalidate();
 }
 /**
  * 刻度字体大小
  *
  * @param textSize
  */
 public void setTextSize(float textSize) {
  this.textSize = textSize;
  mPaintText.setTextSize(textSize);
  invalidate();
 }
 /**
  * 渐变颜色
  *
  * @param colors
  */
 public void setColors(int[] colors) {
  if (colors.length <2) {
   throw new IllegalArgumentException("colors length <2");
  }
  this.colors = colors;
  sweepGradientInit();
  invalidate();
 }
 /**
  * 间隔角度大小
  *
  * @param lineWidth
  */
 public void setLineWidth(float lineWidth) {
  this.lineWidth = lineWidth;
  invalidate();
 }
 private int getDpValue(int w) {
  return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, w, getContext().getResources().getDisplayMetrics());
 }
 /**
  * 圆环宽度
  *
  * @param roundWidth 宽度
  */
 public void setRoundWidth(float roundWidth) {
  this.roundWidth = roundWidth;
  if (roundWidth > circleCenter) {
   this.roundWidth = circleCenter;
  }
  radius = (int) (circleCenter - this.roundWidth / 2); // 圆环的半径
  oval.left = circleCenter - radius;
  oval.right = circleCenter + radius;
  oval.bottom = circleCenter + radius;
  oval.top = circleCenter - radius;
  paint.setStrokeWidth(this.roundWidth);
  invalidate();
 }
 /**
  * 圆环的直径
  *
  * @param circleWidth 直径
  */
 public void setCircleWidth(int circleWidth) {
  this.circleWidth = circleWidth;
  circleCenter = circleWidth / 2;
  if (roundWidth > circleCenter) {
   roundWidth = circleCenter;
  }
  setRoundWidth(roundWidth);
  sweepGradient = new SweepGradient(this.circleWidth / 2, this.circleWidth / 2, colors, null);
  //旋转 不然是从0度开始渐变
  Matrix matrix = new Matrix();
  matrix.setRotate(-90, this.circleWidth / 2, this.circleWidth / 2);
  sweepGradient.setLocalMatrix(matrix);
 }
 /**
  * 渐变初始化
  */
 public void sweepGradientInit() {
  //渐变颜色
  sweepGradient = new SweepGradient(this.circleWidth / 2, this.circleWidth / 2, colors, null);
  //旋转 不然是从0度开始渐变
  Matrix matrix = new Matrix();
  matrix.setRotate(-90, this.circleWidth / 2, this.circleWidth / 2);
  sweepGradient.setLocalMatrix(matrix);
 }
 public void initView() {
  circleCenter = circleWidth / 2;//半径
  singlPoint = (float) 360 / (float) maxColorNumber;
  radius = (int) (circleCenter - roundWidth / 2); // 圆环的半径
  sweepGradientInit();
  mPaintText = new Paint();
  mPaintText.setColor(textColor);
  mPaintText.setTextAlign(Paint.Align.CENTER);
  mPaintText.setTextSize(textSize);
  mPaintText.setAntiAlias(true);
  paint = new Paint();
  paint.setColor(roundBackgroundColor);
  paint.setStyle(Paint.Style.STROKE);
  paint.setStrokeWidth(roundWidth);
  paint.setAntiAlias(true);
  // 用于定义的圆弧的形状和大小的界限
  oval = new RectF(circleCenter - radius, circleCenter - radius, circleCenter + radius, circleCenter + radius);
 }
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //背景渐变颜色
  paint.setShader(sweepGradient);
  canvas.drawArc(oval, -90, (float) (progress * 3.6), false, paint);
  paint.setShader(null);
  //是否是线条模式
  if (!isLine) {
   float start = -90f;
   float p = ((float) maxColorNumber / (float) 100);
   p = (int) (progress * p);
   for (int i = 0; i

以上所述是小编给大家介绍的Android 自定义圆形带刻度渐变色的进度条，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

android

推荐阅读

java
2023年京东Android面试真题解析与经验分享

本文由一位拥有6年Android开发经验的工程师撰写，详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]

蜡笔小新 2024-12-26 17:45:48
android
Python学习笔记：使用pydoc工具查询文档

本文介绍了在Windows环境下使用pydoc工具的方法，并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外，还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]

蜡笔小新 2024-12-26 17:05:56
android
BIF locals() 会以字典类型返回当前位置的全部局部变量。

以下实例展示了locals( ... [详细]

蜡笔小新 2024-12-26 13:47:54
android
深入理解Android中的ADB Shell Input命令：模拟滑动、按键和点击事件

在维护公司项目时，发现按下手机的某个物理按键后会激活相应的服务，并在屏幕上模拟点击特定坐标点。本文详细介绍了如何使用ADB Shell Input命令来模拟各种输入事件，包括滑动、按键和点击等。 ... [详细]

蜡笔小新 2024-12-26 13:43:24
java
android知识杂记（三）

andr ... [详细]

蜡笔小新 2024-12-26 13:29:32
android
Android 8.x GMS认证中的CTS与VTS测试（针对GSI版本）

本文详细介绍了在Android 8.x中，GMS认证新增的CTS和VTS测试，特别是如何在VTS环境下测试GSI版本。文章涵盖了详细的测试环境配置和具体操作步骤。 ... [详细]

蜡笔小新 2024-12-26 12:51:10
android
基于双Xilinx Kintex-7 FPGA的高性能6U VPX存储板

VPX611是北京青翼科技推出的一款采用6U VPX架构的高性能数据存储板。该板卡搭载两片Xilinx Kintex-7系列FPGA作为主控单元，内置RAID控制器，支持多达8个mSATA盘，最大存储容量可达8TB，持续写入带宽高达3.2GB/s。 ... [详细]

蜡笔小新 2024-12-26 11:41:58
android
检测 Android 应用中开发者模式是否开启

本文介绍了两种方法，用于检测 Android 设备是否开启了开发者模式。第一种方法通过检查 USB 调试模式的状态，第二种方法则直接判断开发者选项是否启用。这两种方法均提供了代码示例和详细解释。 ... [详细]

蜡笔小新 2024-12-26 11:02:52
java
解析与应用：validateThenCloseCursor() 方法详解

本文深入探讨了 com.example.android.sunshine.data.TestUtilities 中 validateThenCloseCursor() 方法的使用方法及其代码示例，旨在帮助开发者更好地理解和应用该方法。 ... [详细]

蜡笔小新 2024-12-26 10:09:31
java
解决 Android NDK 中 Native 方法未找到的错误

当在 Android 应用中使用 NDK 时，可能会遇到 java.lang.UnsatisfiedLinkError: Native method not found 的错误。本文将详细探讨该错误的原因及解决方案。 ... [详细]

蜡笔小新 2024-12-26 09:33:25
android
Python文本处理与可视化：分词及词云生成

本文介绍如何使用Python进行文本处理，包括分词和生成词云图。通过整合多个文本文件、去除停用词并生成词云图，展示文本数据的可视化分析方法。 ... [详细]

蜡笔小新 2024-12-26 08:37:18
android
Linux服务器间文件传输：使用SCP命令

本文介绍如何在Linux服务器之间使用SCP命令进行文件传输。SCP（Secure Copy Protocol）是一种基于SSH的安全文件传输协议，支持从远程机器复制文件到本地服务器或反之。示例包括从192.168.45.147复制tomcat目录到本地/home路径。 ... [详细]

蜡笔小新 2024-12-26 07:43:09
java
并发编程：深入理解设计原理与优化

本文探讨了并发编程中的关键设计原则，特别是Java内存模型（JMM）的happens-before规则及其对多线程编程的影响。文章详细介绍了DCL双重检查锁定模式的问题及解决方案，并总结了不同处理器和内存模型之间的关系，旨在为程序员提供更深入的理解和最佳实践。 ... [详细]

蜡笔小新 2024-12-26 01:14:06
android
在CentOS 7上部署Grafana

本文详细介绍了如何在CentOS 7操作系统上安装和配置Grafana，包括必要的依赖项安装、插件管理以及服务启动等步骤。 ... [详细]

蜡笔小新 2024-12-25 20:15:57
java
解决JAX-WS动态客户端工厂弃用问题并迁移到XFire

在处理Java项目中的JAR包冲突时，我们遇到了JaxWsDynamicClientFactory被弃用的问题，并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]

蜡笔小新 2024-12-25 18:48:34

金花婆婆2502921867

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章