【安卓笔记】扁平化的ProgressBar-----ProgressWheel

ProgressWheel是github上一个开源的项目，为开发者提供一个扁平化的ProgressBar，并可以对其进行深度定制。效果如下：

下面介绍使用方式：

1.下面是ProgressWheel源码，拷到项目下。

package com.example.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.graphics.Shader;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;
import com.example.progresswheeldemo.R;
/**
 * An indicator of progress, similar to Android's ProgressBar. Can be used in
 * 'spin mode' or 'increment mode'
 *
 * @author Todd Davies
 *         <p/>
 *         Licensed under the Creative Commons Attribution 3.0 license see:
 *         http://creativecommons.org/licenses/by/3.0/
 */
public class ProgressWheel extends View
{
	// Sizes (with defaults)
	private int layout_height = 0;
	private int layout_width = 0;
	private int fullRadius = 100;
	private int circleRadius = 80;
	private int barLength = 60;
	private int barWidth = 20;
	private int rimWidth = 20;
	private int textSize = 20;
	private float contourSize = 0;
	// Padding (with defaults)
	private int paddingTop = 5;
	private int paddingBottom = 5;
	private int paddingLeft = 5;
	private int paddingRight = 5;
	// Colors (with defaults)
	private int barColor = 0xAA000000;
	private int contourColor = 0xAA000000;
	private int circleColor = 0x00000000;
	private int rimColor = 0xAADDDDDD;
	private int textColor = 0xFF000000;
	// Paints
	private Paint barPaint = new Paint();
	private Paint circlePaint = new Paint();
	private Paint rimPaint = new Paint();
	private Paint textPaint = new Paint();
	private Paint contourPaint = new Paint();
	// Rectangles
	@SuppressWarnings("unused")
	private RectF rectBounds = new RectF();
	private RectF circleBounds = new RectF();
	private RectF circleOuterContour = new RectF();
	private RectF circleInnerContour = new RectF();
	// Animation
	// The amount of pixels to move the bar by on each draw
	private int spinSpeed = 2;
	// The number of milliseconds to wait inbetween each draw
	private int delayMillis = 0;
	private Handler spinHandler = new Handler()
	{
		/**
		 * This is the code that will increment the progress variable and so
		 * spin the wheel
		 */
		@Override
		public void handleMessage(Message msg)
		{
			invalidate();
			if (isSpinning)
			{
				progress += spinSpeed;
				if (progress > 360)
				{
					progress = 0;
				}
				spinHandler.sendEmptyMessageDelayed(0, delayMillis);
			}
			// super.handleMessage(msg);
		}
	};
	int progress = 0;
	boolean isSpinning = false;
	// Other
	private String text = "";
	private String[] splitText =
	{};
	/**
	 * The constructor for the ProgressWheel
	 *
	 * @param context
	 * @param attrs
	 */
	public ProgressWheel(Context context, AttributeSet attrs)
	{
		super(context, attrs);
		parseAttributes(context.obtainStyledAttributes(attrs,
				R.styleable.ProgressWheel));
	}
	// ----------------------------------
	// Setting up stuff
	// ----------------------------------
	/*
	 * When this is called, make the view square. From:
	 * http://www.jayway.com/2012
	 * /12/12/creating-custom-android-views-part-4-measuring
	 * -and-how-to-force-a-view-to-be-square/
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
	{
		// The first thing that happen is that we call the superclass
		// implementation of onMeasure. The reason for that is that measuring
		// can be quite a complex process and calling the super method is a
		// convenient way to get most of this complexity handled.
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		// We can鈥檛 use getWidth() or getHight() here. During the measuring
		// pass the view has not gotten its final size yet (this happens first
		// at the start of the layout pass) so we have to use getMeasuredWidth()
		// and getMeasuredHeight().
		int size = 0;
		int width = getMeasuredWidth();
		int height = getMeasuredHeight();
		int widthWithoutPadding = width - getPaddingLeft() - getPaddingRight();
		int heigthWithoutPadding = height - getPaddingTop()
				- getPaddingBottom();
		// Finally we have some simple logic that calculates the size of the
		// view
		// and calls setMeasuredDimension() to set that size.
		// Before we compare the width and height of the view, we remove the
		// padding,
		// and when we set the dimension we add it back again. Now the actual
		// content
		// of the view will be square, but, depending on the padding, the total
		// dimensions
		// of the view might not be.
		if (widthWithoutPadding > heigthWithoutPadding)
		{
			size = heigthWithoutPadding;
		} else
		{
			size = widthWithoutPadding;
		}
		// If you override onMeasure() you have to call setMeasuredDimension().
		// This is how you report back the measured size. If you don鈥檛 call
		// setMeasuredDimension() the parent will throw an exception and your
		// application will crash.
		// We are calling the onMeasure() method of the superclass so we don鈥檛
		// actually need to call setMeasuredDimension() since that takes care
		// of that. However, the purpose with overriding onMeasure() was to
		// change the default behaviour and to do that we need to call
		// setMeasuredDimension() with our own values.
		setMeasuredDimension(size + getPaddingLeft() + getPaddingRight(), size
				+ getPaddingTop() + getPaddingBottom());
	}
	/**
	 * Use onSizeChanged instead of onAttachedToWindow to get the dimensions of
	 * the view, because this method is called after measuring the dimensions of
	 * MATCH_PARENT & WRAP_CONTENT. Use this dimensions to setup the bounds and
	 * paints.
	 */
	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh)
	{
		super.onSizeChanged(w, h, oldw, oldh);
		// Share the dimensions
		layout_width = w;
		layout_height = h;
		setupBounds();
		setupPaints();
		invalidate();
	}
	/**
	 * Set the properties of the paints we're using to draw the progress wheel
	 */
	private void setupPaints()
	{
		barPaint.setColor(barColor);
		barPaint.setAntiAlias(true);
		barPaint.setStyle(Style.STROKE);
		barPaint.setStrokeWidth(barWidth);
		rimPaint.setColor(rimColor);
		rimPaint.setAntiAlias(true);
		rimPaint.setStyle(Style.STROKE);
		rimPaint.setStrokeWidth(rimWidth);
		circlePaint.setColor(circleColor);
		circlePaint.setAntiAlias(true);
		circlePaint.setStyle(Style.FILL);
		textPaint.setColor(textColor);
		textPaint.setStyle(Style.FILL);
		textPaint.setAntiAlias(true);
		textPaint.setTextSize(textSize);
		contourPaint.setColor(contourColor);
		contourPaint.setAntiAlias(true);
		contourPaint.setStyle(Style.STROKE);
		contourPaint.setStrokeWidth(contourSize);
	}
	/**
	 * Set the bounds of the component
	 */
	private void setupBounds()
	{
		// Width should equal to Height, find the min value to steup the circle
		int minValue = Math.min(layout_width, layout_height);
		// Calc the Offset if needed
		int xOffset = layout_width - minValue;
		int yOffset = layout_height - minValue;
		// Add the offset
		paddingTop = this.getPaddingTop() + (yOffset / 2);
		paddingBottom = this.getPaddingBottom() + (yOffset / 2);
		paddingLeft = this.getPaddingLeft() + (xOffset / 2);
		paddingRight = this.getPaddingRight() + (xOffset / 2);
		int width = getWidth(); // this.getLayoutParams().width;
		int height = getHeight(); // this.getLayoutParams().height;
		rectBounds = new RectF(paddingLeft, paddingTop, width - paddingRight,
				height - paddingBottom);
		circleBounds = new RectF(paddingLeft + barWidth, paddingTop + barWidth,
				width - paddingRight - barWidth, height - paddingBottom
						- barWidth);
		circleInnerContour = new RectF(circleBounds.left + (rimWidth / 2.0f)
				+ (contourSize / 2.0f), circleBounds.top + (rimWidth / 2.0f)
				+ (contourSize / 2.0f), circleBounds.right - (rimWidth / 2.0f)
				- (contourSize / 2.0f), circleBounds.bottom - (rimWidth / 2.0f)
				- (contourSize / 2.0f));
		circleOuterContour = new RectF(circleBounds.left - (rimWidth / 2.0f)
				- (contourSize / 2.0f), circleBounds.top - (rimWidth / 2.0f)
				- (contourSize / 2.0f), circleBounds.right + (rimWidth / 2.0f)
				+ (contourSize / 2.0f), circleBounds.bottom + (rimWidth / 2.0f)
				+ (contourSize / 2.0f));
		fullRadius = (width - paddingRight - barWidth) / 2;
		circleRadius = (fullRadius - barWidth) + 1;
	}
	/**
	 * Parse the attributes passed to the view from the XML
	 *
	 * @param a
	 *            the attributes to parse
	 */
	private void parseAttributes(TypedArray a)
	{
		barWidth = (int) a.getDimension(R.styleable.ProgressWheel_barWidth,
				barWidth);
		rimWidth = (int) a.getDimension(R.styleable.ProgressWheel_rimWidth,
				rimWidth);
		spinSpeed = (int) a.getDimension(R.styleable.ProgressWheel_spinSpeed,
				spinSpeed);
		delayMillis = a.getInteger(R.styleable.ProgressWheel_delayMillis,
				delayMillis);
		if (delayMillis < 0)
		{
			delayMillis = 0;
		}
		barColor = a.getColor(R.styleable.ProgressWheel_barColor, barColor);
		barLength = (int) a.getDimension(R.styleable.ProgressWheel_barLength,
				barLength);
		textSize = (int) a.getDimension(R.styleable.ProgressWheel_textSize,
				textSize);
		textColor = (int) a.getColor(R.styleable.ProgressWheel_textColor,
				textColor);
		// if the text is empty , so ignore it
		if (a.hasValue(R.styleable.ProgressWheel_text))
		{
			setText(a.getString(R.styleable.ProgressWheel_text));
		}
		rimColor = (int) a.getColor(R.styleable.ProgressWheel_rimColor,
				rimColor);
		circleColor = (int) a.getColor(R.styleable.ProgressWheel_circleColor,
				circleColor);
		contourColor = a.getColor(R.styleable.ProgressWheel_contourColor,
				contourColor);
		contourSize = a.getDimension(R.styleable.ProgressWheel_contourSize,
				contourSize);
		// Recycle
		a.recycle();
	}
	// ----------------------------------
	// Animation stuff
	// ----------------------------------
	protected void onDraw(Canvas canvas)
	{
		super.onDraw(canvas);
		// Draw the inner circle
		canvas.drawArc(circleBounds, 360, 360, false, circlePaint);
		// Draw the rim
		canvas.drawArc(circleBounds, 360, 360, false, rimPaint);
		canvas.drawArc(circleOuterContour, 360, 360, false, contourPaint);
		canvas.drawArc(circleInnerContour, 360, 360, false, contourPaint);
		// Draw the bar
		if (isSpinning)
		{
			canvas.drawArc(circleBounds, progress - 90, barLength, false,
					barPaint);
		} else
		{
			canvas.drawArc(circleBounds, -90, progress, false, barPaint);
		}
		// Draw the text (attempts to center it horizontally and vertically)
		float textHeight = textPaint.descent() - textPaint.ascent();
		float verticalTextOffset = (textHeight / 2) - textPaint.descent();
		for (String s : splitText)
		{
			float horizontalTextOffset = textPaint.measureText(s) / 2;
			canvas.drawText(s, this.getWidth() / 2 - horizontalTextOffset,
					this.getHeight() / 2 + verticalTextOffset, textPaint);
		}
	}
	/**
	 * Check if the wheel is currently spinning
	 */
	public boolean isSpinning()
	{
		if (isSpinning)
		{
			return true;
		} else
		{
			return false;
		}
	}
	/**
	 * Reset the count (in increment mode)
	 */
	public void resetCount()
	{
		progress = 0;
		setText("0%");
		invalidate();
	}
	/**
	 * Turn off spin mode
	 */
	public void stopSpinning()
	{
		isSpinning = false;
		progress = 0;
		spinHandler.removeMessages(0);
	}
	/**
	 * Puts the view on spin mode
	 */
	public void spin()
	{
		isSpinning = true;
		spinHandler.sendEmptyMessage(0);
	}
	/**
	 * Increment the progress by 1 (of 360)
	 */
	public void incrementProgress()
	{
		isSpinning = false;
		progress += 20;
		if (progress > 360)
			progress = 0;
		// setText(Math.round(((float) progress / 360) * 100) + "%");
		spinHandler.sendEmptyMessage(0);
	}
	/**
	 * Set the progress to a specific value
	 */
	public void setProgress(int i)
	{
		isSpinning = false;
		progress = i;
		spinHandler.sendEmptyMessage(0);
	}
	// ----------------------------------
	// Getters + setters
	// ----------------------------------
	/**
	 * Set the text in the progress bar Doesn't invalidate the view
	 *
	 * @param text
	 *            the text to show ('\n' constitutes a new line)
	 */
	public void setText(String text)
	{
		this.text = text;
		splitText = this.text.split("\n");
	}
	public int getCircleRadius()
	{
		return circleRadius;
	}
	public void setCircleRadius(int circleRadius)
	{
		this.circleRadius = circleRadius;
	}
	public int getBarLength()
	{
		return barLength;
	}
	public void setBarLength(int barLength)
	{
		this.barLength = barLength;
	}
	public int getBarWidth()
	{
		return barWidth;
	}
	public void setBarWidth(int barWidth)
	{
		this.barWidth = barWidth;
	}
	public int getTextSize()
	{
		return textSize;
	}
	public void setTextSize(int textSize)
	{
		this.textSize = textSize;
	}
	public int getPaddingTop()
	{
		return paddingTop;
	}
	public void setPaddingTop(int paddingTop)
	{
		this.paddingTop = paddingTop;
	}
	public int getPaddingBottom()
	{
		return paddingBottom;
	}
	public void setPaddingBottom(int paddingBottom)
	{
		this.paddingBottom = paddingBottom;
	}
	public int getPaddingLeft()
	{
		return paddingLeft;
	}
	public void setPaddingLeft(int paddingLeft)
	{
		this.paddingLeft = paddingLeft;
	}
	public int getPaddingRight()
	{
		return paddingRight;
	}
	public void setPaddingRight(int paddingRight)
	{
		this.paddingRight = paddingRight;
	}
	public int getBarColor()
	{
		return barColor;
	}
	public void setBarColor(int barColor)
	{
		this.barColor = barColor;
	}
	public int getCircleColor()
	{
		return circleColor;
	}
	public void setCircleColor(int circleColor)
	{
		this.circleColor = circleColor;
	}
	public int getRimColor()
	{
		return rimColor;
	}
	public void setRimColor(int rimColor)
	{
		this.rimColor = rimColor;
	}
	public Shader getRimShader()
	{
		return rimPaint.getShader();
	}
	public void setRimShader(Shader shader)
	{
		this.rimPaint.setShader(shader);
	}
	public int getTextColor()
	{
		return textColor;
	}
	public void setTextColor(int textColor)
	{
		this.textColor = textColor;
	}
	public int getSpinSpeed()
	{
		return spinSpeed;
	}
	public void setSpinSpeed(int spinSpeed)
	{
		this.spinSpeed = spinSpeed;
	}
	public int getRimWidth()
	{
		return rimWidth;
	}
	public void setRimWidth(int rimWidth)
	{
		this.rimWidth = rimWidth;
	}
	public int getDelayMillis()
	{
		return delayMillis;
	}
	public void setDelayMillis(int delayMillis)
	{
		this.delayMillis = delayMillis;
	}
}

2.将如下的属性文件拷到attrs.xml中：

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<declare-styleable name="ProgressWheel">
        <attr name="text" format="string" />
        <attr name="textColor" format="color" />
        <attr name="textSize" format="dimension" />
        <attr name="barColor" format="color" /><!-- 进度条颜色 -->
        <attr name="rimColor" format="color" /><!-- 默认轮廓颜色 -->
        <attr name="rimWidth" format="dimension" />
        <attr name="spinSpeed" format="dimension" />
        <attr name="delayMillis" format="integer" />
        <attr name="circleColor" format="color" /><!-- 圆圈内部的颜色 -->
        <attr name="radius" format="dimension" />
        <attr name="barWidth" format="dimension" /><!-- 进度条宽度 -->
        <attr name="barLength" format="dimension" /><!-- 进度条长度(即进度条走过的长度) -->
        <attr name="contourColor" format="color"/><!-- 控制外边缘颜色 -->
        <attr name="contourSize" format="dimension"/>
    </declare-styleable>
</resources>

3.在布局文件中声明控件：

注：首先你得加上命名空间：

xmlns:ProgressWheel="http://schemas.android.com/apk/res/包名"

声明控件：

<com.example.view.ProgressWheel
        android:id="@+id/pw_spinner"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_centerInParent="true"
        ProgressWheel:barColor="#0097D6"
        ProgressWheel:barLength="160dp"
        ProgressWheel:barWidth="15dp"
        ProgressWheel:rimColor="#330097D6"
        ProgressWheel:rimWidth="15dp"
        ProgressWheel:text="wait..."
        ProgressWheel:contourColor="#330097D6"
        ProgressWheel:textColor="#222"

4.在代码中使用控件：

wheel = (ProgressWheel) findViewById(R.id.pw_spinner);//找到控件
		wheel.setProgress(180);//设置进度
		wheel.incrementProgress();//增加进度
		wheel.spin();//使控件开始旋转
		wheel.stopSpinning();//停止旋转