Android自定义圆形进度条

Android自定义圆形进度条,效果图如下:


主要逻辑如下:

RoundProgressBar.java

package com.jackie.roundprogressbar;

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

/**
 * 仿iphone带进度的进度条,线程安全的View,可直接在线程中更新进度
 * @author Jackie
 *
 */
public class RoundProgressBar extends View {
	private Paint mPaint;  //画笔对象
	private int mRoundColor; //圆环的颜色
	private int mRoundProgressColor; //圆形进度的颜色
	private int mTextColor;  //中间进度百分比的字符串的颜色
	private float mTextSize; //中间进度百分比的字符串的字体
	private float mRoundWidth; //圆环的宽度
	private float mProgress;  //当前进度
	private int mMax;  //最大进度
	private boolean mTextIsDisplayable; //是否显示中间的进度
	private int mStyle; //进度的风格,实心或者空心
	
	private static final int STROKE = 0;
	private static final int FILL = 1;
	
	public RoundProgressBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		
		mPaint = new Paint();
		
		TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgressBar);
		//获取自定义属性和默认值
		mRoundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED);
		mRoundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);
		mTextColor = mTypedArray.getColor(R.styleable.RoundProgressBar_textRColor, Color.GREEN);
		mTextSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_textRSize, 15);
		mRoundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);
		mMax = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 100);
		mTextIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable, true);
		mStyle = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 0);
		
		mTypedArray.recycle();
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		
		//画最外层的大圆环
		int center = getWidth() / 2;  //获取圆心的x坐标
		int radius = (int) (center - mRoundWidth / 2); //圆环的半径
		mPaint.setColor(mRoundColor); //设置圆环的颜色
		mPaint.setStyle(Paint.Style.STROKE); //设置空心
		mPaint.setStrokeWidth(mRoundWidth);
		mPaint.setAntiAlias(true); //消除据此
		canvas.drawCircle(center, center, radius, mPaint); //画出圆环
		
		//画进度百分比
		mPaint.setStrokeWidth(0);
		mPaint.setColor(mTextColor);
		mPaint.setTextSize(mTextSize);
		mPaint.setTypeface(Typeface.DEFAULT);  //设置字体
		int percent = (int)(((float)mProgress / (float)mMax) * 100); //中间的进度百分比,先转换成float在进行除法运算,不然都为0
		float textWidth = mPaint.measureText("PVideo");   //测量字体宽度,我们需要根据字体的宽度设置在圆环中间
		
		if (mTextIsDisplayable && percent != 0 && mStyle == STROKE) {
			//画出进度百分比
			canvas.drawText("   " + percent + "%", center - textWidth / 2, center + mTextSize / 2, mPaint);
		}
		
		//画圆弧,画圆环的进度
		//设置进度是实心还是空心
		mPaint.setStrokeWidth(mRoundWidth);  //设置圆环的宽度
		mPaint.setColor(mRoundProgressColor); //设置进度的颜色
		RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius); //用于定义的圆弧的形状和大小的界限
	    
		switch(mStyle) {
		case STROKE:
			mPaint.setStyle(Paint.Style.STROKE);
			canvas.drawArc(oval, 0, 360 * mProgress / mMax, false, mPaint);
			break;
		case FILL:
			mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
			if (mProgress != 0) {
				canvas.drawArc(oval, 0, 360 * mProgress/ mMax, true, mPaint);  //根据进度画圆弧
			}
			break;
		}
	}
	
	public synchronized int getMax() {
		return mMax;
	}

	/**
	 * 设置进度的最大值
	 * @param max
	 */
	public synchronized void setMax(int max) {
		if(max < 0){
			throw new IllegalArgumentException("Max not less than 0");
		}
		this.mMax = max;
	}
	
	/**
	 * 获取进度.需要同步
	 * @return
	 */
	public synchronized float getProgress() {
		return mProgress;
	}

	/**
	 * 设置进度,此为线程安全控件,由于考虑多线程的问题,需要同步
	 * 刷新界面调用postInvalidate()能在非UI线程刷新
	 * @param progress
	 */
	public synchronized void setProgress(float progress) {
		if (progress < 0) {
			throw new IllegalArgumentException("Progress not less than 0");
		}
		if (progress > mMax) {
			progress = mMax;
		}
		if (progress <= mMax) {
			this.mProgress = progress;
			postInvalidate();
			if (progress == mMax && mListener != null) {
				mListener.onFinished(true);
			} else if (mListener != null) {
				mListener.onCurrentPercent(mMax, (int)progress);
			}
		}
	}
	
	private OnProgressListener mListener;
	
	public void setOnProgressLister(OnProgressListener listener) {
		this.mListener = listener;
	}
	
	public interface OnProgressListener {
		public void onFinished(boolean result);
		public void onCurrentPercent(int mTotalTime , int mCurrentTime);
	}
	
	public void setTextSize(float textSize) {
		this.mTextSize = textSize;
	}
	
	public void setRoundWidth(float roundWidth) {
		this.mRoundWidth = roundWidth;
	}
}
MainActivity.java

package com.jackie.roundprogressbar;

import com.jackie.roundprogressbar.RoundProgressBar.OnProgressListener;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;

public class MainActivity extends Activity implements OnProgressListener {
	private RoundProgressBar mRoundProgressBar;
	private Handler mHandler = new Handler();
	private int mProgress = 0;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		mRoundProgressBar = (RoundProgressBar) findViewById(R.id.roundprogressbar);
		mRoundProgressBar.setOnProgressLister(this);
		mRoundProgressBar.setTextSize(100);
		mRoundProgressBar.setRoundWidth(50);
		
		mHandler.postDelayed(mRunnable, 0);
	}
	
	private Runnable mRunnable = new Runnable() {
		
		@Override
		public void run() {
			mRoundProgressBar.setProgress(mProgress);
			mProgress += 5;
			
			mHandler.postDelayed(this, 1000);
		}
	};

	@Override
	public void onFinished(boolean result) {
		mHandler.removeCallbacks(mRunnable);
	}

	@Override
	public void onCurrentPercent(int mTotalTime, int mCurrentTime) {
	}
}

总共分为三层:一层为圆形边线,一层为进度边线,一层用来显示标识进度节点。 public class CircleProgressBar extends View { private int maxProgress = 100; private int progress = 15; private int progressStrokeWidth = 2; private int marxArcStorkeWidth = 16; // 画圆所在的距形区域 RectF oval; Paint paint; public CircleProgressBar(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub oval = new RectF(); paint = new Paint(); } @Override protected void onDraw(Canvas canvas) { // TODO 自动生成的方法存根 super.onDraw(canvas); int width = this.getWidth(); int height = this.getHeight(); width = (width > height) ? height : width; height = (width > height) ? height : width; paint.setAntiAlias(true); // 设置画笔为抗锯齿 paint.setColor(Color.WHITE); // 设置画笔颜色 canvas.drawColor(Color.TRANSPARENT); // 白色背景 paint.setStrokeWidth(progressStrokeWidth); // 线宽 paint.setStyle(Style.STROKE); oval.left = marxArcStorkeWidth / 2; // 左上角x oval.top = marxArcStorkeWidth / 2; // 左上角y oval.right = width - marxArcStorkeWidth / 2; // 左下角x oval.bottom = height - marxArcStorkeWidth / 2; // 右下角y canvas.drawArc(oval, -90, 360, false, paint); // 绘制白色圆圈,即进度条背景 paint.setColor(Color.rgb(0x57, 0x87, 0xb6)); paint.setStrokeWidth(marxArcStorkeWidth); canvas.drawArc(oval, -90, ((float) progress / maxProgress) * 360, false, paint); // 绘制进度圆弧,这里是蓝色 paint.setStrokeWidth(1); String text = progress + "%"; int textHeight = height / 4; paint.setTextSize(textHeight); int textWidth = (int) paint.measureText(text, 0, text.length()); paint.setStyle(Style.FILL); canvas.drawText(text, width / 2 - textWidth / 2, height / 2 + textHeight / 2, paint); } public int getMaxProgress() { return maxProgress; } public void setMaxProgress(int maxProgress) { this.maxProgress = maxProgress; } /** * 设置进度 * * @param progress * 进度百分比 * @param view * 标识进度的节点视图 */ public void setProgress(int progress, View view) { this.progress = progress; view.setAnimation(pointRotationAnima(0, (int) (((float) 360 / maxProgress) * progress))); this.invalidate(); } /** * 非UI线程调用 */ public void setProgressNotInUiThread(int progress, View view) { this.progress = progress; view.setAnimation(pointRotationAnima(0, (int) (((float) 360 / maxProgress) * progress))); this.postInvalidate(); } /** * 进度标注点的动画 * * @param fromDegrees * @param toDegrees * @return */ private Animation pointRotationAnima(float fromDegrees, float toDegrees) { int initDegress = 306;// 进度点起始位置(图片偏移约54度) RotateAnimation animation = new RotateAnimation(fromDegrees, initDegress + toDegrees, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); animation.setDuration(1);// 设置动画执行时间 animation.setRepeatCount(1);// 设置重复执行次数 animation.setFillAfter(true);// 设置动画结束后是否停留在结束位置 return animation; } }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值