Android自定义控件 倒计时

容华谢后
1,219 阅读5分钟

GitHub传送门

1.写在前面

本篇文章实现了一个简单的倒计时控件，主要运用了画布的操作，滑动角度计算等知识点，非常适合自定义控件的初学者进行学习，看下效果图：

倒计时

2.实现

初始化一些数据

public class CountdownView extends View {

    // 控件宽
    private int width;
    // 控件高
    private int height;
    // 刻度盘半径
    private int dialRadius;
    // 小时刻度高
    private float hourScaleHeight = dp2px(6);
    // 分钟刻度高
    private float minuteScaleHeight = dp2px(4);
	// 定时进度条宽
    private float arcWidth = dp2px(6);
    // 时间-分
    private int time = 0;
    // 刻度盘画笔
    private Paint dialPaint;
    // 时间画笔
    private Paint timePaint;
    // 是否移动
    private boolean isMove;
    // 当前旋转的角度
    private float rotateAngle;
    // 当前的角度
    private float currentAngle;
    // 时间改变监听
    private OnCountdownListener onCountdownListener;

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

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

    public CountdownView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        // 刻度盘画笔
        dialPaint = new Paint();
        dialPaint.setAntiAlias(true);
        dialPaint.setColor(Color.parseColor("#94C5FF"));
        dialPaint.setStyle(Paint.Style.STROKE);
        dialPaint.setStrokeCap(Paint.Cap.ROUND);

        // 时间画笔
        timePaint = new Paint();
        timePaint.setAntiAlias(true);
        timePaint.setColor(Color.parseColor("#94C5FF"));
        timePaint.setTextSize(sp2px(33));
        timePaint.setStyle(Paint.Style.STROKE);
    }
	
	...
}

定义控件的大小

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
	super.onSizeChanged(w, h, oldw, oldh);
	// 控件宽、高
	width = height = Math.min(h, w);
	// 刻度盘半径
	dialRadius = (int) (width / 2 - dp2px(10));
}

绘制刻度盘

/**
 * 绘制刻度盘
 *
 * @param canvas 画布
 */
private void drawDial(Canvas canvas) {
	// 绘制外层圆盘
	dialPaint.setStrokeWidth(dp2px(2));
	canvas.drawCircle(width / 2, height / 2, dialRadius, dialPaint);

	// 将坐标原点移到控件中心
	canvas.translate(getWidth() / 2, getHeight() / 2);
	canvas.save();

	// 绘制小时刻度
	for (int i = 0; i < 12; i++) {
		// 定时时间为0时正常绘制小时刻度
		// 小时刻度没有被定时进度条覆盖时正常绘制小时刻度
		if (time == 0 || i > time / 5) {
			canvas.drawLine(0, -dialRadius, 0, -dialRadius + hourScaleHeight, dialPaint);
		}
		// 360 / 12 = 30;
		canvas.rotate(30);
	}

	// 绘制分钟刻度
	dialPaint.setStrokeWidth(dp2px(1));
	for (int i = 0; i < 60; i++) {
		// 小时刻度位置不绘制分钟刻度
		// 分钟刻度没有被定时进度条覆盖时正常绘制分钟刻度
		if (i % 5 != 0 && i > time) {
			canvas.drawLine(0, -dialRadius, 0, -dialRadius + minuteScaleHeight, dialPaint);
		}
		// 360 / 60 = 6;
		canvas.rotate(6);
	}
}

首先绘制一个圆，然后把坐标原点移动到控件中心，原点移动到控件中心后向上为负值，接着绘制小时刻度，一共有12个刻度，time的单位为分钟，要注意如果刻度被定时进度条覆盖就不再绘制，绘制分钟刻度同理，代码中已经写了很全的注释，不再多说，看下效果：

绘制刻度盘

绘制定时进度条

/**
 * 绘制定时进度条
 *
 * @param canvas 画布
 */
private void drawArc(Canvas canvas) {
	if (time > 0) {
		// 绘制起始标志
		dialPaint.setStrokeWidth(dp2px(3));
		canvas.drawLine(0, -dialRadius - hourScaleHeight, 0, -dialRadius + hourScaleHeight, dialPaint);

		// 取消直线圆角设置
		dialPaint.setStrokeCap(Paint.Cap.BUTT);

		// 绘制圆弧
		float arcWidth = dp2px(6);
		for (int i = 0; i <= time * 6; i++) {
			canvas.drawLine(0, -dialRadius - arcWidth / 2, 0, -dialRadius + arcWidth / 2, dialPaint);
			// 最后一次不旋转画布
			if (i != time * 6) {
				canvas.rotate(1);
			}
		}

		// 绘制结束标志
		dialPaint.setStrokeCap(Paint.Cap.ROUND);
		canvas.drawLine(0, -dialRadius - hourScaleHeight, 0, -dialRadius + hourScaleHeight, dialPaint);
	}
}

如果定时时间大于0则开始绘制定时进度条，重点说下绘制进度，在这里并没有使用绘制圆弧的方法，依然是通过旋转画布的方式绘制的，设置一个15分钟的进度，看下效果：

绘制定时进度条

绘制时间

/**
 * 绘制时间
 *
 * @param canvas 画布
 */
private void drawTime(Canvas canvas) {
	canvas.restore();
	String timeText = String.format(Locale.CHINA, "%02d", time) + " : 00";
	// 获取时间的宽高
	float timeWidth = timePaint.measureText(timeText);
	float timeHeight = Math.abs(timePaint.ascent() + timePaint.descent());
	// 居中显示
	canvas.drawText(timeText, -timeWidth / 2, timeHeight / 2, timePaint);
}

在控件中心绘制一段文本，重点在于如何获取文本的宽高，宽度直接测量就可以了，高度比较特殊，因为绘制的是数字，所以使用Math.abs(timePaint.ascent() + timePaint.descent());这种方式来获取文本高度，先挖个坑，下一篇文章详细讲一下文本的绘制，看下效果：

绘制时间

滑动事件

@Override
public boolean onTouchEvent(MotionEvent event) {
	switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			// 按下的角度
			currentAngle = calcAngle(event.getX(), event.getY());
			break;

		case MotionEvent.ACTION_MOVE:
			// 标记正在移动
			isMove = true;
			// 移动的角度
			float moveAngle = calcAngle(event.getX(), event.getY());
			// 滑过的角度偏移量
			float angleOffset = moveAngle - currentAngle;

			// 防止越界
			if (angleOffset < -270) {
				angleOffset = angleOffset + 360;
			} else if (angleOffset > 270) {
				angleOffset = angleOffset - 360;
			}

			currentAngle = moveAngle;
			// 计算时间
			calcTime(angleOffset);
			break;

		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP: {
			if (isMove && onCountdownListener != null) {
				// 回调倒计时改变方法
				onCountdownListener.countdown(time);
				isMove = false;
			}
			break;
		}
	}
	return true;
}

通过计算滑过的角度增量来设置当前的定时时间，看下如何来计算当前触摸点的角度：

前方高能，请减速慢行！

/**
 * 以刻度盘圆心为坐标圆点，建立坐标系，求出(targetX, targetY)坐标与x轴的夹角
 *
 * @param targetX x坐标
 * @param targetY y坐标
 * @return (targetX, targetY)坐标与x轴的夹角
 */
private float calcAngle(float targetX, float targetY) {
	// 以刻度盘圆心为坐标圆点
	float x = targetX - width / 2;
	float y = targetY - height / 2;
	// 滑过的弧度
	double radian;

	if (x != 0) {
		float tan = Math.abs(y / x);
		if (x > 0) {
			if (y >= 0) {
				// 第四象限
				radian = Math.atan(tan);
			} else {
				// 第一象限
				radian = 2 * Math.PI - Math.atan(tan);
			}
		} else {
			if (y >= 0) {
				// 第三象限
				radian = Math.PI - Math.atan(tan);
			} else {
				// 第二象限
				radian = Math.PI + Math.atan(tan);
			}
		}
	} else {
		if (y > 0) {
			// Y轴向下方向
			radian = Math.PI / 2;
		} else {
			// Y轴向上方向
			radian = Math.PI + Math.PI / 2;
		}
	}

	// 完整圆的弧度为2π，角度为360度，所以180度等于π弧度
	// 弧度 = 角度 / 180 * π
	// 角度 = 弧度 / π * 180
	return (float) (radian / Math.PI * 180);
}

首先了解下弧度与角度的计算公式：

  • 完整圆的弧度为2π，角度为360度，所以180度等于π弧度

  • 弧度 = 角度 / 180 * π

  • 角度 = 弧度 / π * 180

然后以第一象限的点为例，计算一下触摸点的角度：

// 以刻度盘圆心为坐标圆点
float x = targetX - width / 2;
float y = targetY - height / 2;
// 触摸点与x轴的夹角
float tan = Math.abs(y / x);
// 触摸点的弧度
double radian = 2 * Math.PI - Math.atan(tan);
// 触摸点的角度
double angle = radian / Math.PI * 180;

看图理解：

计算触摸点的角度

根据滑过的角度计算当前的定时时间：

/**
 * 计算时间
 *
 * @param angle 增加的角度
 */
private void calcTime(float angle) {
	rotateAngle += angle;
	if (rotateAngle < 0) {
		rotateAngle = 0;
	} else if (rotateAngle > 360) {
		rotateAngle = 360;
	}
	time = (int) rotateAngle / 6;
	invalidate();
}

最后提供设置倒计时，和监听倒计时状态的方法:

/**
 * 设置倒计时
 *
 * @param minute 分钟
 */
public void setCountdown(int minute) {
	if (minute < 0 || minute > 60) {
		return;
	}
	time = minute;
	rotateAngle = minute * 6;
	invalidate();
}

/**
 * 设置倒计时监听
 *
 * @param onTempChangeListener 倒计时监听接口
 */
public void setOnCountdownListener(OnCountdownListener onCountdownListener) {
	this.onCountdownListener = onCountdownListener;
}

/**
 * 倒计时监听接口
 */
public interface OnCountdownListener {
	/**
	 * 倒计时
	 *
	 * @param temp 时间
	 */
	void countdown(int time);
}

大功告成，再看下效果：

倒计时

3.写在最后

源码已经上传到GitHub上了，欢迎Fork，觉得还不错就Start一下吧！

GitHub传送门

点我下载本文Demo的Apk

avatar
文章
阅读
粉丝