自定义漂亮的圆形进度条

转载 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 自定义漂亮的圆形进度条

这几天对Android中实现画圆弧及圆弧效果中所实现的效果进行了修改,改为进度圆心进度条,效果如图所示   TasksCompletedView.java 代码如下...
  • jdsjlzx
  • jdsjlzx
  • 2015年01月07日 18:03
  • 27152

Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)

很多的时候,系统自带的View满足不了我们功能的需求,那么我们就需要自己来自定义一个能满足我们需求的View,自定义View我们需要先继承View,添加类的构造方法,重写父类View的一些方法,例如o...

2种方式实现带进度的圆形进度条

progressbar默认为水平和圆形进度条,但圆形的进度条是没有进度的。下面提供2中方式实现带进度的圆形进度条。...

H5动画,canvas绘制圆环百分比进度的动态效果

H5动画, canvas绘制圆环百分比进度的动态效果 h5+javascript简单动画

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

圆形进度条

1 先上图 - 绘制圆形进度条" title="android - 绘制圆形进度条" style="margin:0px; padding:0px; border:0px; list-style:no...

自定义漂亮的圆形进度条

代码: package com.snailws.taskscompleted.activity; import android.content.Context; import android.con...
  • HeyNine
  • HeyNine
  • 2013年11月15日 02:51
  • 10421

Android使用include无法调整位置的解决方法

在Android的layout样式定义中,可以使用xml文件方便的实现,有时候为了模块的复用,使用include标签可以达到此目的。例如: include layout="@layout/other...
  • lc0817
  • lc0817
  • 2015年09月21日 17:06
  • 3018

Android在指定View的下方显示PopupWindow

今天工作不忙,所以就把这些年做Android开发的一些经验技巧陆续写到博客上,一来是做自己的备忘,二来是可以帮助大家提高自己的技能。 大家在做下面的弹出层时用的应该都是android的PopupWin...

自定义漂亮的圆形进度条

  • 2016年08月18日 13:57
  • 7.27MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义漂亮的圆形进度条
举报原因:
原因补充:

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