Android 自定义圆圈进度并显示百分比例控件（纯代码实现）

标签：控件   android   

这个是续上一次水平

2.进度计算：其实是小学二年级数学题：当前进度/总数=百分比；

理论总是和实践差距的太远，不扯淡，不吹嘘，贴代码：

package com.spring.progressview;

import java.text.SimpleDateFormat;
import java.util.Date;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.graphics.Paint.Style;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/****
 * 圆圈进度控件
 * @author spring sky
 * Email:vipa1888@163.com
 * 下载地址：http://download.csdn.net/detail/vipa1888/7637905
 */
public class RoundProgressView extends View {
	
	/**最外围的颜色值*/
	private int mOutRoundColor = Color.argb(60, 255, 255, 255);
	/**中心圆的颜色值*/
	private int mCenterRoundColor = Color.argb(255, 255, 255, 255);
	
	/**进度的颜色*/
	private int mProgressRoundColor = Color.argb(255, 255, 255, 255);
	/**进度的背景颜色*/
	private int mProgressRoundBgColor = Color.argb(100, 255, 255, 255);
	/**进度条的宽度*/
	private int mProgressWidth = 5;
	
	private int[] colors = {Color.WHITE,Color.RED};
	/***字体颜色*/
	private int mTextColor = Color.rgb(118, 181, 66);
	private float mPencentTextSize = 65;
	
	private int mWidth,mHeight;
	private int mPaddingX;
	
	private float mProgress = 0.5f;
	private float mMax = 1.0f;
	/**
	 * 时间显示格式
	 */
	private SimpleDateFormat mDateFormat = new SimpleDateFormat("HH:mm:ss.S");
	
	private Paint mPaint = new Paint();

	public RoundProgressView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();
	}

	public RoundProgressView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public RoundProgressView(Context context) {
		super(context);
		init();
	}
	
	public void init(){
	}
	
	@SuppressLint("DrawAllocation")
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		mWidth = getWidth();
		mHeight = getHeight();
		
		if(mWidth > mHeight){
			mPaddingX = (mWidth-mHeight)/2;
			mWidth = mHeight;
		}
		mPaint.setAntiAlias(true); // 消除锯齿
		mPaint.setStyle(Style.FILL);
		mPaint.setColor(mOutRoundColor);
		RectF oval = new RectF(new Rect(mPaddingX, 0, mWidth+mPaddingX, mHeight));
		canvas.drawArc(oval, 0, 360, true, mPaint);
		
		int halfWidth = mWidth/6;
		mPaint.setColor(mProgressRoundBgColor);
		mPaint.setStrokeWidth(mProgressWidth);
		mPaint.setStyle(Style.STROKE);
		oval = new RectF(new Rect(halfWidth+mPaddingX, halfWidth, halfWidth*5+mPaddingX, halfWidth*5));
		canvas.drawArc(oval, 0, 360, false, mPaint);
		
		mPaint.setColor(mProgressRoundColor);
		canvas.drawArc(oval, 90, 360*mProgress/mMax, false, mPaint);
		
		
		halfWidth = mWidth/4;
		mPaint.setStyle(Style.FILL);
		mPaint.setColor(mCenterRoundColor);
		oval = new RectF(new Rect(halfWidth+mPaddingX, halfWidth, halfWidth*3+mPaddingX, halfWidth*3));
		canvas.drawArc(oval, 0, 360, false, mPaint);
		
		mPaint.reset();
		mPaint.setTextSize(mPencentTextSize);
		mPaint.setColor(mTextColor);
		mPaint.setStyle(Style.FILL);
		mPaint.setTextAlign(Align.CENTER);
		String number = (int)(mProgress*100/mMax)+"";
		canvas.drawText(number, mWidth/2+mPaddingX, mHeight/2+mPencentTextSize/3, mPaint);
		
		float textWidth = mPaint.measureText(number);
		mPaint.setTextSize(mPencentTextSize/2);
		canvas.drawText("%", mWidth/2+mPaddingX+textWidth/2+5, mHeight/2-mPencentTextSize/8, mPaint);
		
		mPaint.setTextSize(mPencentTextSize/2);
		canvas.drawText(mDateFormat.format(new Date(System.currentTimeMillis())), mWidth/2+mPaddingX, mHeight/2+halfWidth/4*3, mPaint);
	}
	
	public void setMax(float mMax) {
		this.mMax = mMax;
	}
	
	public void setProgress(float mProgress) {
		this.mProgress = mProgress;
		invalidate();
	}
	
	public float getMax() {
		return mMax;
	}
	
	public float getProgress() {
		return mProgress;
	}
	
}

mPaint.setStyle(Style.STROKE); //这个是原来显示空心的东西

mPaint.setStrokeWidth(mProgressWidth);   //这个是空心最外层的宽度
比如：drawArc 是画一个圆，那么，我们的设置了以上两个方法，就是要画一个空心圆，圆的轨迹宽度就是  mProgressWidth
3.画圆的时候，开始度数和结束度数一定要控制好哦。
4.如果您还有什么不懂的，请多了解：Canvas 和Paint的相关方法和API，在此不胜感激。


写这篇博客的目的为了分享，我也希望能给你们提供一些思路，希望大家把不错的控件都共享出来，不胜感激。

好了，博客贴出去，肯定有很多人要Demo，为了防止蜘蛛乱抓取而丢失下载地址，地址请看代码上的注明点。
转载请注明作者来源：Spring sky .

Android 自定义圆圈进度并显示百分比例控件（纯代码实现）,布布扣,bubuko.com

Android 自定义圆圈进度并显示百分比例控件（纯代码实现）

标签：控件   android   

原文地址：http://blog.csdn.net/springsky_/article/details/37817517