Android环形颜色渐变进度条

最新推荐文章于 2024-07-12 04:09:38 发布
最新推荐文章于 2024-07-12 04:09:38 发布
阅读量6.6k 收藏 8
点赞数 2
分类专栏： 实用功能 文章标签： android 渐变圆环 进度条 自定义View
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ywl5320/article/details/50507196
版权


我的视频课程：《FFmpeg打造Android万能音频播放器》


        距离上次写博客又过了许久的了，懒起来还真是莫法，废话就不说多了，哈哈。今天要讲的就是一种常见的“环形颜色渐变的圆环进度条”，先看看效果就知道是怎样的了，后面也有免积分Demo下载地址。



录制得不是很好，所以看着有点卡顿，不过没事，效果已经看得出来了。

首先说说实现的思路吧：

刚开始想做这个的时候还真没什么思路，后来通过分析可以看出，这个其实就是一个大的圆环，只是中间有空隙而已。android绘制圆环很简单，用canvas.drawArc（...）函数就可以；然后就是中间的间隙，其实也简单，绘制的时候控制相应的度数不绘制就可以了（比如：奇数度数不绘制偶数度数就绘制就可以的），这样基本雏形就成功了；然后再是渐变的颜色，使用ArgbEvaluator这个类就可以实现颜色的渐变（最低level 11，现在大多数手机都是4.0以上的了），本列中颜色只分了两段，实际项目中可以根据需求，把颜色多分几段，然后看着就会很平滑的。通过以上的思路就可以实现图中的效果了。当然这个效果也是一个自定义控件。

思路有了 我们就来实现它：

我们还是分步骤把代码贴出来：

一：继承View类，并重写构造方法：

public class CircleView extends View {
public CircleView(Context context) {
		this(context, null, 0);
	}

	public CircleView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		
	}
}
二：添加画笔变量并初始化： 

private Paint paint;//画笔
	private RectF oval; // RectF对象（圆环）
	private int currentDegree = 0;//当前度数（除360可求百分比）
	@SuppressLint("NewApi")
	private ArgbEvaluator argbEvaluator = new ArgbEvaluator();//颜色渐变插值器
	private int height;//控件高
	private int width;//控件宽
	private int circleWidth;//圆环宽
	
	private final static int strokeWidth = 40;//画笔大小

	private boolean isGradual = true;//是否显示渐变色

public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		// TODO Auto-generated constructor stub
		//初始化画笔
		paint = new Paint();
		paint.setAntiAlias(true);
		paint.setColor(Color.RED);
		oval = new RectF();
		paint.setStrokeWidth(strokeWidth); // 线宽
		paint.setStyle(Paint.Style.STROKE);
		
	}


三：计算大小，通过效果图，我们知道这个veiw是一个正方形的： 

//重写onMeasure方法</span>
@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		//计算最小宽度
		height = View.MeasureSpec.getSize(heightMeasureSpec);    
	    width = View.MeasureSpec.getSize(widthMeasureSpec);    
	    
	    if(width >= height)
	    {
	    	circleWidth = height;
	    }
	    else
	    {
	    	circleWidth = width;
	    }
	    
	    setMeasuredDimension(circleWidth,circleWidth);  
	    oval.left = strokeWidth / 2; // 左边
		oval.top = strokeWidth / 2; // 上边
		oval.right = circleWidth - strokeWidth / 2; // 右边
		oval.bottom = circleWidth - strokeWidth / 2; // 下边
		// 自动旋转
		handler.postDelayed(runnable, 500);
	}
四：绘制圆环 

@SuppressLint("NewApi")
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		// canvas.drawArc(oval,-90 + currentDegree, 1.3f , false, paint); //绘制圆弧
			for (int i = 0; i < currentDegree; i++) {
				if (!isGradual) {
					if (i < 180) {
						paint.setColor(Color.BLUE);//右半边颜色
					} else {
						paint.setColor(Color.GREEN);//所半边颜色
					}
				} else {
					Integer color = (Integer) argbEvaluator.evaluate(i / 360f, Color.BLUE, Color.GREEN);//颜色插值器（level 11以上才可以用）
					paint.setColor(color);
				}
				if (i % 2 == 0) {
					canvas.drawArc(oval, -90 + i, 1.35f, false, paint); // 绘制圆弧 1.35f是每个色块宽度
				}
			}
			//绘制白色的底部背景
//			if(currentDegree < 360)
//			{
//				paint.setColor(Color.WHITE);//右半边颜色
//				for(int j = currentDegree; j < 360; j++)
//				{
//					if (j % 2 == 0)
//					{
//					canvas.drawArc(oval, -90 + j, 1.35f, false, paint); // 绘制圆弧 1.35f是每个色块宽度
//					}
//				}
//			}
	}


五：设置当前进度（百分比）和是否渐变开关

<span style="white-space:pre">	</span>/**
	 * 根据百分比设置颜色范围
	 * @param pDegree
	 */
	public void setCurrentDegree(float pDegree)
	{
		this.currentDegree = (int)(360f * pDegree);
	}
<span style="white-space:pre">	</span>/**
	 * 颜色是否渐变
	 * @param gradual
	 */
	public void setGradual(boolean gradual)
	{
		this.isGradual = gradual;
	}
六：为了能模仿进度的效果，这里多添加了一个handler来自动更新进度： 

<span style="white-space:pre">	</span>Handler handler = new Handler();
	Runnable runnable = new Runnable() {

		@Override
		public void run() {
			// TODO Auto-generated method stub
			if (currentDegree > 360)
				currentDegree = 0;
			invalidate();
			handler.postDelayed(runnable, 6);//6毫秒绘制一次（可以根据需要更改）
			currentDegree++;
		}
	};
这样就完成了所以的功能，根据需求还可以添加其它功能，这里就先这样吧。

这是全部代码（CircleVIew.java）:

package com.ywl5320.circledemo;

import android.animation.ArgbEvaluator;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;

public class CircleView extends View {

	private Paint paint;//画笔
	private RectF oval; // RectF对象（圆环）
	private int currentDegree = 0;//当前度数（除360可求百分比）
	@SuppressLint("NewApi")
	private ArgbEvaluator argbEvaluator = new ArgbEvaluator();//颜色渐变插值器
	private int height;//控件高
	private int width;//控件宽
	private int circleWidth;//圆环宽
	
	private final static int strokeWidth = 40;//画笔大小

	private boolean isGradual = true;//是否显示渐变色

	public CircleView(Context context) {
		this(context, null, 0);
	}

	public CircleView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		// TODO Auto-generated constructor stub
		//初始化画笔
		paint = new Paint();
		paint.setAntiAlias(true);
		paint.setColor(Color.RED);
		oval = new RectF();
		paint.setStrokeWidth(strokeWidth); // 线宽
		paint.setStyle(Paint.Style.STROKE);
		
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		//计算最小宽度
		height = View.MeasureSpec.getSize(heightMeasureSpec);    
	    width = View.MeasureSpec.getSize(widthMeasureSpec);    
	    
	    if(width >= height)
	    {
	    	circleWidth = height;
	    }
	    else
	    {
	    	circleWidth = width;
	    }
	    
	    setMeasuredDimension(circleWidth,circleWidth);  
	    oval.left = strokeWidth / 2; // 左边
		oval.top = strokeWidth / 2; // 上边
		oval.right = circleWidth - strokeWidth / 2; // 右边
		oval.bottom = circleWidth - strokeWidth / 2; // 下边
//自动旋转
//		handler.postDelayed(runnable, 500);
	}

	@SuppressLint("NewApi")
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		// canvas.drawArc(oval,-90 + currentDegree, 1.3f , false, paint); //绘制圆弧
			for (int i = 0; i < currentDegree; i++) {
				if (!isGradual) {
					if (i < 180) {
						paint.setColor(Color.BLUE);//右半边颜色
					} else {
						paint.setColor(Color.GREEN);//所半边颜色
					}
				} else {
					Integer color = (Integer) argbEvaluator.evaluate(i / 360f, Color.BLUE, Color.GREEN);//颜色插值器（level 11以上才可以用）
					paint.setColor(color);
				}
				if (i % 2 == 0) {
					canvas.drawArc(oval, -90 + i, 1.35f, false, paint); // 绘制圆弧 1.35f是每个色块宽度
				}
			}
			//绘制白色的底部背景
//			if(currentDegree < 360)
//			{
//				paint.setColor(Color.WHITE);//右半边颜色
//				for(int j = currentDegree; j < 360; j++)
//				{
//					if (j % 2 == 0)
//					{
//					canvas.drawArc(oval, -90 + j, 1.35f, false, paint); // 绘制圆弧 1.35f是每个色块宽度
//					}
//				}
//			}
	}
	
	/**
	 * 根据百分比设置颜色范围
	 * @param pDegree
	 */
	public void setCurrentDegree(float pDegree)
	{
		this.currentDegree = (int)(360f * pDegree);
	}
	
	/**
	 * 颜色是否渐变
	 * @param gradual
	 */
	public void setGradual(boolean gradual)
	{
		this.isGradual = gradual;
	}

	Handler handler = new Handler();
	Runnable runnable = new Runnable() {

		@Override
		public void run() {
			// TODO Auto-generated method stub
			if (currentDegree > 360)
				currentDegree = 0;
			invalidate();
			handler.postDelayed(runnable, 6);//6毫秒绘制一次（可以根据需要更改）
			currentDegree++;
		}
	};

}



最后是在activity中调用：

布局文件（activity_main.xml）:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     >

    <com.ywl5320.circleviewdemo.CircleView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Activity代码什么都没变：

package com.ywl5320.circleviewdemo;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;

public class MainActivity extends ActionBarActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}
也可以在activity中获取CircleView，然后设置相应的属性，达到相应的效果。OK，效果及实现了，也挺简单的，Demo免积分下载地址：实例下载










ywl5320
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Android 渐变圆环，圆形进度条效果实现，androidjni开发视频百度网盘
m0_64382868的博客
12-10 330
public CircleProgressBar(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(attrs, defStyle); } private void init(AttributeSet attrs, int defStyle) { mFinishWheelPaint = 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》 【d
Android实现圆弧形渐变色进度条
热门推荐
ForrestL的博客
08-23 1万+
效果图：我写的这篇博客个人感觉非常的不详细，这也是根据UI设计的，不过大家掌握下文所点出来的重点方法也可以将其绘制出来，这里就不详细介绍绘制流程了 UI分析：这个UI细分为表盘刻度、进度条底色、进度条渐变色、最外层那个实心圆球和文字描述。接下来就逐个实现一、绘制表盘刻度1、绘制表盘的刻度主要是用了画布的旋转来进行绘制 利用canvas.rotate()方法来旋转画布。利用canva.drawTe
android自定义圆环进度条（带渐变效果）
qq_34252970的博客
05-13 545
/** * @description 圆环进度条： */ public class UmeRingProgressView extends View { private Paint innerPaint; private Paint outerPaint; private Paint smallCirclePaint; private Paint leftProgressSmallCirclePaint;//左边进度小圆 private Paint right.
android ProgressBar 进度条圆环
最新发布
weixin_32112607的博客
07-12 111
Android ProgressBar 进度条圆环 在Android应用程序中，进度条是一种非常常见的UI元素，它用于显示任务的进度。ProgressBar是Android中的一个内置类，可以用来显示水平或者垂直的进度条。但是有时候我们可能需要自定义进度条的样式，比如将进度条显示为一个圆环。本文将介绍如何在Android应...
Android可控渐变圆环进度条
01-12
防小米安全中心圆环进度条，自定义View实现的渐变圆环进度条，可设置百分比，设置颜色。
Android实现渐变圆环、圆形进度条效果
01-04
最近做了一个功能，里面涉及到了渐变圆形的需求。就是一个颜色可以渐变的圆环，最后实现的效果如下图： 左图是带渐变效果，右图是不带渐变效果。原理还是绘图，Canvas可以绘制的对象有：弧线(arcs)、填充颜色(argb和color)、 Bitmap、圆(circle和oval)、点(point)、线(line)、矩形(Rect)、图片(Picture)、圆角矩形 (RoundRect)、文本(text)、顶点(Vertices)、路径(path)。通过组合这些对象我们可以画出一些简单有趣的界面出来，但是光有这些功能还是不够的，如果我要画一个仪表盘(数字围绕显示在一个圆圈中)呢？ 幸好And
Android 圆形颜色渐变进度条 自定义控件
01-23
至此，一个完整的圆形颜色渐变进度条自定义控件就完成了。通过这个控件，开发者可以在Android应用中实现独特的、视觉效果出色的进度指示器，为用户提供更丰富的交互体验。当然，实际开发中可能还需要根据具体需求...
又一简单颜色渐变进度条
07-09
本文将深入探讨一种名为"又一简单颜色渐变进度条"的设计实现，该设计旨在为用户提供更美观、动态的视觉反馈。 首先，"又一简单颜色渐变进度条"是一种创新的进度条设计，它不仅显示任务的进度，还通过颜色渐变来增强...
Android Shape属性创建环形进度条
08-25
`android:angle="0"`设置渐变方向，`android:startColor`、`android:centerColor`和`android:endColor`分别定义了颜色的起始、中心和结束值，`android:type="sweep"`表示渐变类型为扫过整个环形。 - **progress_...
Android实现环形进度条的实例
08-31
总结一下，创建一个自定义的Android环形进度条涉及到以下几个步骤： 1. 创建一个新的视图类，继承自`View`。 2. 初始化画笔对象，设置颜色、宽度等属性。 3. 实现`onDraw`方法，用画笔绘制圆环和进度。 4. 通过`...
Android-CircleProgressBar一个圆形渐变Android进度条
08-12
CircleProgressBar 一个圆形渐变Android进度条
Android 自定义View实现环形带刻度颜色渐变的进度条
07-01
详情请查看博客：https://blog.csdn.net/qq_20785431/article/details/80872856
Android花样loading进度条（四）-渐变色环形进度条
海阔天空
12-16 3728
背景 Android花样loading进度条系列文章主要讲解如何自定义所需的进度条，包括水平、圆形、环形、圆弧形、不规则形状等。 本篇我们对配文字环形进度条稍加变换，将圆环颜色改为渐变色的形式，使得进度条更具有色彩性，其他内容同上一篇Android花样loading进度条（三）-配文字环形进度条，主要是使用Canvas绘制圆和圆弧、绘制文字。 效果 先上图看效果，这里有4个进度条，样...
android 自定义环形进度条，渐变色
md_beijing的博客
04-13 1319
什么也不说先上图 做一个类似qq记步的j进度条，直接上代码 首先在onmeasure方法中测量View的宽高 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int defaultWidth = Integer.MAX_VALUE; i
android绘图---绘制颜色渐变的圆圈进度条
cenfei78325747的专栏
07-08 3779
package com.example.fox_draw_view;/** * @auth:foxcen * @功能：画圆形进度条 */ import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.grap
Android 渐变圆环，圆形进度条效果实现，细谈分布式事务的前世今生
03-23 1037
/ 默认最大步数// 格式为保留小数点后一位// 空心// 圆角画笔// 去锯齿@Override// canvas.drawText(“步数”, mWheelRect.centerX() - (mTitlePaint.measureText(“步数”) / 2), mTitleY,description =“严重污染”;description =“中等污染”;}else{
Android 渐变圆环，圆形进度条效果实现，android移动开发基础案例教程源码
m0_66145114的博客
01-24 1677
最近做了一个功能，里面涉及到了渐变圆形的需求。就是一个颜色可以渐变的圆环，最后实现的效果如下图： 左图是带渐变效果，右图是不带渐变效果。原理还是绘图，Canvas可以绘制的对象有：弧线(arcs)、填充颜色(argb和color)、 Bitmap、圆(circle和oval)、点(point)、线(line)、矩形(Rect)、图片(Picture)、圆角矩形 (RoundRect)、文本(text)、 顶点(Vertices)、路径(path)。通过组合这些对象我们可以画出一些简单有趣的界面出来，但是光
Android 环形进度条 工具包
04-16
3. CircularProgressDrawable：是Android Support Library中的一个类，用于绘制环形进度条的动画效果，可以自定义颜色、大小、旋转速度等属性。 使用Android环形进度条的步骤如下： 1. 在布局文件中添加ProgressBar...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ywl5320

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值