自定义漂亮的圆形进度条

转载 2013年12月03日 13:55:04
对Android中实现画圆弧及圆弧效果中所实现的效果进行了修改,改为进度圆心进度条,效果如图所示




 




TasksCompletedView.java 代码如下
package com.snailws.taskscompleted.activity;


import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Paint.FontMetrics;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;


import com.snailws.taskscompleted.R;


/**
 * @author naiyu(http://snailws.com)
 * @version 1.0
 */
public class TasksCompletedView extends View {


	// 画实心圆的画笔
	private Paint mCirclePaint;
	// 画圆环的画笔
	private Paint mRingPaint;
	// 画字体的画笔
	private Paint mTextPaint;
	// 圆形颜色
	private int mCircleColor;
	// 圆环颜色
	private int mRingColor;
	// 半径
	private float mRadius;
	// 圆环半径
	private float mRingRadius;
	// 圆环宽度
	private float mStrokeWidth;
	// 圆心x坐标
	private int mXCenter;
	// 圆心y坐标
	private int mYCenter;
	// 字的长度
	private float mTxtWidth;
	// 字的高度
	private float mTxtHeight;
	// 总进度
	private int mTotalProgress = 100;
	// 当前进度
	private int mProgress;


	public TasksCompletedView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// 获取自定义的属性
		initAttrs(context, attrs);
		initVariable();
		Log.v("xulongheng*TasksCompletedView*","*******");
	}


	private void initAttrs(Context context, AttributeSet attrs) {
		TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
				R.styleable.TasksCompletedView, 0, 0);
		mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80);
		mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10);
		mCircleColor = typeArray.getColor(R.styleable.TasksCompletedView_circleColor, 0xFFFFFFFF);
		mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF);
		
		mRingRadius = mRadius + mStrokeWidth / 2;
		
		Log.v("xulongheng*TasksCompletedView*initAttrs",mRadius+"/"+mStrokeWidth+"/"+mCircleColor+"/"+mRingColor);
	}


	private void initVariable() {
		mCirclePaint = new Paint();
		mCirclePaint.setAntiAlias(true);
		mCirclePaint.setColor(mCircleColor);
		mCirclePaint.setStyle(Paint.Style.FILL);
		
		mRingPaint = new Paint();
		mRingPaint.setAntiAlias(true);
		mRingPaint.setColor(mRingColor);
		mRingPaint.setStyle(Paint.Style.STROKE);
		mRingPaint.setStrokeWidth(mStrokeWidth);
		
		mTextPaint = new Paint();
		mTextPaint.setAntiAlias(true);
		mTextPaint.setStyle(Paint.Style.FILL);
		mTextPaint.setARGB(255, 255, 255, 255);
		mTextPaint.setTextSize(mRadius / 2);
		
		FontMetrics fm = mTextPaint.getFontMetrics();
		mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);
		
	}


/***	canvas.drawArc(new RectF(0, 0, 128, 128), 0, 360, true, new Paint(
			Paint.ANTI_ALIAS_FLAG));
			参数1:圆的范围大小
			参数2:起始角度
			参数3:圆心角角度,360为圆,180为半圆
			参数4:中心搜索
			参数5:画笔Paint,可以设置画线or填充,设置颜色,设置线的粗细等等***/
			
	@Override
	protected void onDraw(Canvas canvas) {


		Log.v("xulongheng*TasksCompletedView*onDraw",":"+mProgress);
		mXCenter = getWidth() / 2;
		mYCenter = getHeight() / 2;
		
		canvas.drawCircle(mXCenter, mYCenter, mRadius, mCirclePaint);
		
		if (mProgress > 0 ) {
			RectF oval = new RectF();
			oval.left = (mXCenter - mRingRadius);
			oval.top = (mYCenter - mRingRadius);
			oval.right = mRingRadius * 2 + (mXCenter - mRingRadius);
			oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
			canvas.drawArc(oval, -90, ((float)mProgress / mTotalProgress) * 360, false, mRingPaint); //
//			canvas.drawCircle(mXCenter, mYCenter, mRadius + mStrokeWidth / 2, mRingPaint);
			String txt = mProgress + "%";
			mTxtWidth = mTextPaint.measureText(txt, 0, txt.length());
			canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 4, mTextPaint);
		}
	}
	
	public void setProgress(int progress) {
		mProgress = progress;
		Log.v("xulongheng*TasksCompletedView*setProgress",":"+mProgress);
//		invalidate();
		postInvalidate();
	}


}



attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
     
    <declare-styleable name="TasksCompletedView">
        <attr name="radius" format="dimension"/>
        <attr name="strokeWidth" format="dimension"/>
        <attr name="circleColor" format="color"/>
        <attr name="ringColor" format="color"/>
    </declare-styleable>
     
</resources>
源码下载http://download.csdn.net/detail/heng615975867/6649281


自定义一个带进度值的圆形进度条

项目中有时候我们为了博得用户的眼球,需要自定义一些好看的控件,下面记录一个自定义带进度值的圆形进度条 先上效果 下面记录具体的实现过程 在Android studio下新建一个proje...
  • u010918416
  • u010918416
  • 2017-02-27 22:53:48
  • 545

自定义圆形进度条实现动态显示指定进度

首先得写一个类RoundProgress继承View,重写其中onMeasure()和onDraw()方法。在onMeasure()里获取当前画布的宽度。 在onDraw()方法里主要绘制如下三部分...
  • xiaoyantan
  • xiaoyantan
  • 2016-11-13 16:45:35
  • 2198

环形进度条控件VB.net

  • 2009年09月12日 09:02
  • 66KB
  • 下载

自定义圆环进度条

代码: 首先在values下的attrs.xml下建立属性节点: 定义好控件的属...
  • a550508153
  • a550508153
  • 2016-12-13 10:19:02
  • 498

自定义view原环进度圈

第一view类 package views; import android.content.Context; import android.content.res.TypedArr...
  • wyj1369
  • wyj1369
  • 2017-10-22 18:19:51
  • 80

自定义View倒计时

1.创建一个类,继承View public class CompletedView extends View { // 画实心圆的画笔 private Paint mCirclePa...
  • TTHHVV
  • TTHHVV
  • 2017-10-22 14:59:34
  • 171

svn配置库各种图标提示的状态说明!超详细文字描述。

1.常规(就是正常):文件夹上面一个绿色圆中带一个白色勾。 2.修改(常规的文件被修改了):文件夹上面一个红色圆中带一个白色感叹号。 3.冲突(你提交的文件与配置库中的文件有相同的部分):文件夹上...
  • hack517
  • hack517
  • 2013-04-23 09:29:51
  • 3271

Java实现圆圈旋转效果,等待、加载、刷新、旋转进度条

  • 2017年08月11日 18:55
  • 2KB
  • 下载

自定义圆形进度条的实现方式

如何自定义圆形进度条哪,也就是替换一下进度条的图片而已。 先分析一下,系统对进度条如何定义的: 咱们一般情况下载布局文件中这么书写: //在布局文件里的代码 ...
  • com360
  • com360
  • 2012-06-14 12:52:30
  • 12642

Unity圆环进度条制作

0. 背景最近有个在Unity中制作圆环进度条的需求,并在圆中显示进度数值,类似于图1: 图1. 圆环进度条平时制作直线的进度条比较多,突然要求做个圆环的有些不适应。不过,这个需求google一...
  • tab_space
  • tab_space
  • 2016-06-28 14:24:01
  • 7398
收藏助手
不良信息举报
您举报文章:自定义漂亮的圆形进度条
举报原因:
原因补充:

(最多只允许输入30个字)