模仿音樂播放器帶進度的播放暫停按鈕

因為項目需要，要做一個下載下傳暫停開始的按鈕，要求按鈕上顯示進度。網上找了找沒有合适的，不太滿意，于是自己動手寫了一個。

效果如下：

主要步驟：1，最外側的圓環。2，圓環内側代表進度的圓弧。3，暫停時在中心部位畫出三角形。4，播放時在中心部位畫出矩形。5，重寫onTouch方法，DOWN事件時設定播放或者暫停的狀态。6，添加一個狀态監聽器，在調用者中監聽狀态。6，設定進度，重繪。

代碼比較簡單，是以貼出來View的代碼，Activity和布局檔案就不寫了：

/** Created by xuzhilei on 2016/8/16. 模仿音樂暫停開始按鈕的View */
public class PlayButtonView extends View {

	/** 中心點X軸坐标 */
	private int viewCenterX;

	/** 中心點Y軸坐标 */
	private int viewCenterY;

	/** 有效長度的一般（View長寬較小者的一半） */
	private int viewHalfLength;

	/** 三角形右側頂點 */
	private Point pointA = new Point();

	/** 三角形左上頂點 */
	private Point pointB = new Point();

	/** 三角形左下頂點 */
	private Point pointC = new Point();

	/** 矩形左邊界 */
	private int RectLeft;

	/** 矩形上邊界 */
	private int RectTOP;

	/** 矩形右邊界 */
	private int RectRight;

	/** 矩形下邊界 */
	private int RectBottom;

	/** 三角形的三條邊路徑 */
	private Path path = new Path();

	/** 包圍最外側圓環的矩形 */
	private RectF rectF = new RectF();

	/** 包圍進度圓弧的矩形 */
	private RectF rectF2 = new RectF();

	/** 進度 */
	private int progress;

	/** 暫停中還是播放中 */
	private boolean isPlaying = false;

	/** 是否進行過了測量 */
	private boolean isMeasured = false;

	/** 畫筆顔色 */
	private int color = 0xffff0099;

	/** 最外側圓環畫筆 */
	private Paint paintA = new Paint();

	/** 進度圓弧畫筆 */
	private Paint paintB = new Paint();

	/** 暫停開始畫筆 */
	private Paint paintC = new Paint();

	/** 狀态監聽器 */
	private OnStatusChangeListener onStatusChangeListener;

	/** 構造器 */
	public PlayButtonView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		if (!isMeasured) {
			getWidthAndHeight();
			isMeasured = true;
		}
	}

	/** 得到視圖等的高度寬度尺寸資料 */
	private void getWidthAndHeight() {

		int viewHeight = getMeasuredHeight();
		int viewWidth = getMeasuredWidth();
		viewCenterX = viewWidth / 2;
		viewCenterY = viewHeight / 2;
		viewHalfLength = viewHeight < viewWidth ? viewHeight / 2 : viewWidth / 2;

		int paintAwidth = viewHalfLength / 15;
		int paintBwidth = viewHalfLength / 8;

		rectF.left = viewCenterX - (viewHalfLength - paintAwidth / 2);
		rectF.top = viewCenterY - (viewHalfLength - paintAwidth / 2);
		rectF.right = viewCenterX + (viewHalfLength - paintAwidth / 2);
		rectF.bottom = viewCenterY + (viewHalfLength - paintAwidth / 2);

		rectF2.left = viewCenterX - (viewHalfLength - paintBwidth / 2);
		rectF2.top = viewCenterY - (viewHalfLength - paintBwidth / 2);
		rectF2.right = viewCenterX + (viewHalfLength - paintBwidth / 2);
		rectF2.bottom = viewCenterY + (viewHalfLength - paintBwidth / 2);

		paintA.setColor(color);
		paintA.setStrokeWidth(paintAwidth);
		paintA.setAntiAlias(true);
		paintA.setStyle(Paint.Style.STROKE);

		paintB.setColor(color);
		paintB.setStrokeWidth(paintBwidth);
		paintB.setAntiAlias(true);
		paintB.setStyle(Paint.Style.STROKE);

		paintC.setColor(color);
		paintC.setStrokeWidth(1);
		paintC.setAntiAlias(true);
		paintC.setStyle(Paint.Style.FILL);

		pointA.x = viewCenterX + viewHalfLength / 2;
		pointA.y = viewCenterY;

		double sin = Math.sin(Math.toRadians(60)); // √(3) / 2
		double cos = Math.cos(Math.toRadians(60)); // 1/ 2

		pointB.x = (float) ((viewCenterX - cos * viewHalfLength + viewCenterX) / 2);
		pointB.y = (float) ((viewCenterY - sin * viewHalfLength + viewCenterY) / 2);

		pointC.x = (float) ((viewCenterX - cos * viewHalfLength + viewCenterX) / 2);
		pointC.y = (float) ((viewCenterY + sin * viewHalfLength + viewCenterY) / 2);

		RectLeft = viewCenterX - viewHalfLength / 3;
		RectTOP = viewCenterY - viewHalfLength / 3;
		RectRight = viewCenterX + viewHalfLength / 3;
		RectBottom = viewCenterY + viewHalfLength / 3;
	}

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

		// 畫未完成進度的圓環
		canvas.drawArc(rectF, 0, 360, false, paintA);

		// 畫已經完成進度的圓弧 從-90度開始，即從圓環頂部開始
		canvas.drawArc(rectF2, -90, progress * 3.6f, false, paintB);

		if (isPlaying) {
			canvas.drawRect(RectLeft, RectTOP, RectRight, RectBottom, paintC);
		} else {
			path.reset();
			path.moveTo(pointA.x, pointA.y);
			path.lineTo(pointB.x, pointB.y);
			path.lineTo(pointC.x, pointC.y);
			path.close();
			canvas.drawPath(path, paintC);
		}
	}

	/** 監聽觸摸DOWN時間，開始播放，暫停播放 */
	@Override
	public boolean onTouchEvent(MotionEvent event) {

		if (event.getAction() == MotionEvent.ACTION_DOWN) {
			isPlaying = !isPlaying;
			invalidate();
			if (isPlaying) {
				onStatusChangeListener.play();
			} else {
				onStatusChangeListener.pause();
			}
		}
		return super.onTouchEvent(event);
	}

	/** 設定進度 0-100區間 */
	public void setProgress(int progress) {

		if (progress < 0) {
			progress = 0;
		}
		if (progress > 100) {
			progress = 100;
		}
		this.progress = progress;
		invalidate();
	}

	/** 外界設定播放狀态 */
	public void setPlaying(boolean isPlaying) {
		this.isPlaying = isPlaying;
		invalidate();
	}

	/** 播放暫停狀态監聽的接口 */
	public interface OnStatusChangeListener {

		void play();

		void pause();
	}

	/** 設定監聽接口 */
	public void setOnStatusChangeListener(OnStatusChangeListener onStatusChangeListener) {
		this.onStatusChangeListener = onStatusChangeListener;
	}

	/** 位置資訊 */
	private class Point {
		float x;
		float y;
	}
           

在調用者中設定OnStatusChangeListener 的監聽器即可監聽播放狀态，通過setProgress方法就可以設定進度。