圆形进度条以及百分率指示器 Scroller类的练习

转载时请注明出处,尊重他人的劳动成果,谢谢。

先附上效果图:

圆形进度条以及百分率指示器 Scroller类的练习圆形进度条以及百分率指示器 Scroller类的练习


这个控件是动态加载到75%的,主要我忘了怎么做动态图,就先放一个静态图在这里表示表示。旁边这个没有没有喜欢的?有想知道的 我可以告诉答案。

现附上代码,不懂的请留言:

package com.sahadev.circleview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Scroller;

public class CircleView extends View implements OnClickListener {
	private Paint outPaint, inPaint;
	/* The Circle's radius */
	private int radius = 200;
	/* The torus's width */
	private int width = 50, backgroundColor = Color.WHITE;// 默认 背景色为纯白

	private RectF mTempRectF = new RectF();

	private int mProgress;// 当前进度
	private int mTargetProgress = 75;// 目标进度

	private int mWidth = 400, mHeight = 400;// 该控件的初始大小为400*400

	private Scroller mScroller;// 滑动辅助类

	private int duration = 1000;// 动画间隔时间

	private int textSize = 50, mFontHeight;

	private float mTextWidth = 0;

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

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

	public CircleView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

		outPaint = new Paint();
		inPaint = new Paint();
		outPaint.setTextSize(textSize);

		mScroller = new Scroller(context);
		mScroller.forceFinished(false);

		outPaint.setColor(Color.argb(90, 90, 90, 90));
		outPaint.setStyle(Paint.Style.FILL_AND_STROKE);
		outPaint.setAntiAlias(true);

		inPaint.setColor(backgroundColor);
		inPaint.setAntiAlias(true);

		setBackgroundColor(backgroundColor);

		FontMetrics fm = outPaint.getFontMetrics();// 得到系统默认字体属性
		mFontHeight = (int) (Math.ceil(fm.descent - fm.top) + 2);// 获得字体高度
		mFontHeight = mFontHeight - textSize;

		mTempRectF.set(0, 0, mWidth, mHeight);
	}

	public void setTextSize(int textSize) {
		this.textSize = textSize;
	}

	/*
	 * 设置背景色
	 * 
	 * @see android.view.View#setBackgroundColor(int)
	 */
	public void setBackgroundColor(int color) {
		this.backgroundColor = color;
	}

	/**
	 * 设置圆圈颜色
	 * 
	 * @param color
	 */
	public void setCircleColor(int color) {
		outPaint.setColor(color);
	}

	/**
	 * 设置圆圈半径
	 * 
	 * @param radius
	 */
	public void setRadius(int radius) {
		this.radius = radius;
	}

	/**
	 * 设置圆圈宽度
	 * 
	 * @param width
	 */
	public void setWidth(int width) {
		this.width = width;
	}

	/**
	 * 设置目标进度
	 * 
	 * @param progress
	 *            大于0,小于100
	 */
	public void setTargetProgress(int progress) {
		this.mTargetProgress = progress;
	}

	/**
	 * 可以作为进度条设置当前进度
	 * 
	 * @param progress
	 */
	public void setProgress(int progress) {
		this.mProgress = progress;
		postInvalidate();
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			onClick(this);
			return true;
		}
		return super.onTouchEvent(event);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		canvas.drawArc(mTempRectF, -90, 360 * mProgress / 100, true, outPaint);// 画一个扇形
		canvas.drawCircle(mWidth / 2, mHeight / 2, radius - width, inPaint);// 中心画一个圆
		mTextWidth = outPaint.measureText(mProgress + "%");
		canvas.drawText(mProgress + "%", (mWidth - mTextWidth) / 2, (mHeight) / 2 + mFontHeight, outPaint);

	}

	/*
	 * 获取适合的高宽
	 * 
	 * @see android.view.View#onMeasure(int, int)
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		int size = 0;
		size = widthMeasureSpec > mWidth && heightMeasureSpec > mHeight ? (mWidth > mHeight ? mHeight : mWidth) : (widthMeasureSpec > heightMeasureSpec ? heightMeasureSpec
				: widthMeasureSpec);
		/* 该控件为正方形 */
		setMeasuredDimension(size, size);
	}

	/*
	 * 触动该控件 绘制到指定位置
	 * 
	 * @see android.view.View.OnClickListener#onClick(android.view.View)
	 */
	@Override
	public void onClick(View v) {
		mScroller.startScroll(0, 0, mTargetProgress, 0, duration);
		postInvalidate();
	}

	/**
	 * 设置动画绘制时间
	 * 
	 * @param duration
	 */
	public void setDuration(int duration) {
		this.duration = duration;
	}

	@Override
	public void computeScroll() {
		super.computeScroll();
		if (mScroller.computeScrollOffset()) {
			mProgress = mScroller.getCurrX();
			postInvalidate();
		}
	}

}


像一般自定义控件使用这个控件就可以了,具体方法相信大家都懂得,我就不贴方法了,只用设置进去就可以看到效果。
上一篇:MaxCompute产品消费相关文章合集


下一篇:Web前端 — Bootstrap(1)