Android：自定义View之番茄钟

闲来无事，回顾了一下之前写的项目，把番茄钟从里面整理出来了。

该View通过上下滑动设置倒计时的时间，调用start()方法开始倒计时，stop()方法停止计时。

效果图如下：

核心代码：

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Build;
import android.os.CountDownTimer;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;

import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;

public class TomatoClockView extends View {
private static final String TAG = "TomatoClockView";

private Paint arcPaint;  //圆弧画笔
private Paint textPaint;  //时间文本画笔
private int backgroundColor = Color.parseColor("#D1D1D1");
private int arcColor = Color.BLUE;

private int width;  //View的宽
private int height;  //View的高
private float centerX;  //View中心点的X坐标
private float centerY;  //View中心点的Y坐标

private float oldOffsetY;  //上一次MOVE事件结束位置和DOWN事件落点之间Y坐标的偏移量
private float offsetY;  //本次MOVE事件结束位置和DOWN事件落点之间Y坐标的偏移量
float touchedY;  //本次DOWN事件落点的Y坐标

private static final int MAX_TIME = 60;  //最大倒计时长
private static String textTime = "00:00";  //时间文本
private long countDownTime;  //倒计时时长（毫秒）
private float time;  //倒计时时长（分钟）

private float sweepVelocity = 0;  //动画执行的完成度
private ValueAnimator valueAnimator;  //属性动画对象

private boolean isStarted;  //倒计时是否已开始

private MyTimer mTimeCounter;  //倒计时器

private class MyTimer extends CountDownTimer{

/**
* @param millisInFuture    The number of millis in the future from the call
*                          to {@link #start()} until the countdown is done and {@link #onFinish()}
*                          is called.
* @param countDownInterval The interval along the way to receive
*                          {@link #onTick(long)} callbacks.
*/
public MyTimer(long millisInFuture, long countDownInterval) {
super(millisInFuture, countDownInterval);
}

@Override
public void onTick(long millisUntilFinished) {

textTime = formatCountTime(millisUntilFinished);
invalidate();

}

@Override
public void onFinish() {
textTime = "00:00";
invalidate();
}
}

//view是在JAVA代码中new的，则调用此构造函数
public TomatoClockView(Context context) {
super(context);
init();
}

//View是在.xml文件中声明的，则调用此构造函数
public TomatoClockView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}

public TomatoClockView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public TomatoClockView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

width = MeasureSpec.getSize(widthMeasureSpec);
height = MeasureSpec.getSize(heightMeasureSpec);

//定义LayoutParams为warp_content时的测量宽高，否则wrap_content会失效
if(getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT
&& getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT){
width = 400;
height = 500;
} else if(getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT){
width = 400;
} else if(getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT){
height = 400;
}

//计算番茄钟的中心点
centerX = getLeft() + width/2;
centerY = getTop() + height/2;

setMeasuredDimension(width, height);  //保存测量宽高
Log.d(TAG, "onMeasure: ");
}

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

//对padding进行处理，否则padding属性将会失效
int paddingLeft = getPaddingLeft();
int paddingRight = getPaddingRight();
int paddingTop = getPaddingTop();
int paddingBottom = getPaddingBottom();

//int radius = Math.min(width-paddingLeft-paddingRight, height-paddingTop-paddingBottom)/2;  //计算半径

RectF rectF = new RectF();
rectF.set(centerX-width/2 + paddingLeft, centerY-height/2 + paddingTop, centerX+width/2 - paddingRight, centerY+height/2 - paddingBottom);

//绘制底部圆弧
canvas.save();
arcPaint.setColor(backgroundColor);
canvas.drawArc(rectF, -90, 360, false, arcPaint);
canvas.restore();

//绘制倒计时圆弧
canvas.save();
arcPaint.setColor(arcColor);
canvas.drawArc(rectF, -90, 360 * sweepVelocity, false, arcPaint);
canvas.restore();

//绘制时间文本
canvas.save();
Paint.FontMetrics metrics = textPaint.getFontMetrics();
float baseline = (metrics.bottom - metrics.top)/2 + centerY - metrics.bottom;
canvas.drawText(textTime, centerX, baseline, textPaint );
canvas.restore();
}

@Override
public boolean onTouchEvent(MotionEvent event) {
if(isStarted){
return true;
}

//获取屏幕高度
WindowManager manager = (WindowManager) (getContext().getApplicationContext().getSystemService(Context.WINDOW_SERVICE));
DisplayMetrics metrics = new DisplayMetrics();
manager.getDefaultDisplay().getMetrics(metrics);
float screenHeight = metrics.heightPixels;

float y = event.getY();  //获取触摸事件发生位置的y坐标

//通过上下滑动来设置倒计时时间
//原理：MOVE事件结束时的y坐标 - DOWN事件发生的y坐标，MAX_TIME*(所得值/屏幕高度)即为倒计时时间，负减正增
switch (event.getAction()){

case MotionEvent.ACTION_DOWN:
touchedY = y;
break;

case MotionEvent.ACTION_MOVE:
offsetY = y - touchedY;

//可以通过多次滑动来调整时间
float totalOffsetY = oldOffsetY + offsetY;
if(totalOffsetY <= 0){
totalOffsetY = 0;
} else if(totalOffsetY >= screenHeight){
totalOffsetY = screenHeight;
}

time = totalOffsetY/screenHeight*MAX_TIME;  //分钟

textTime = formatTime((long)time);

invalidate();
break;

case MotionEvent.ACTION_UP:
oldOffsetY = offsetY;  //记录上次滑动的位移量，用以实现多次滑动调整时间
countDownTime = (long)time * 60 * 1000;  //倒计时时长，毫秒
break;
}

return true;
}

private void init(){
initPaint();
initValueAnimation();
}

private void initPaint(){
arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
arcPaint.setStyle(Paint.Style.STROKE);  //描边
arcPaint.setStrokeWidth(30);

textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
textPaint.setColor(Color.BLACK);
textPaint.setStrokeWidth(20);
textPaint.setTextSize(180);
textPaint.setTextAlign(Paint.Align.CENTER);
}

private void initValueAnimation(){
valueAnimator = ValueAnimator.ofFloat(0f, 1f);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
sweepVelocity = (float) animation.getAnimatedValue();
invalidate();
}
});
}

/**
* 开始倒计时
*/
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
public void start(){
if(!isStarted){
isStarted = true;

//设置动画时间并开始动画
valueAnimator.setDuration(countDownTime);
valueAnimator.start();

//设置倒计时时间并开始倒计时
mTimeCounter = new MyTimer(countDownTime, 1000);
mTimeCounter.start();
}

}

/**
* 停止倒计时
*/
public void stop(){
mTimeCounter.cancel();
valueAnimator.end();

isStarted = false;
time = 0f;
textTime = "00:00";
sweepVelocity = 0;
oldOffsetY = 0;

invalidate();
}

/**
* 倒计时开始前格式化时间文本
* @param time
* @return
*/
private String formatTime(long time){
StringBuilder sb = new StringBuilder();

if(time < 10){
sb.append("0" + time + ":00");
} else {
sb.append(time + ":00");
}

return sb.toString();
}

/**
* 在倒计时过程中格式化时间文本
* @param time
* @return
*/
private static String formatCountTime(long time){

StringBuilder sb = new StringBuilder();

time = time/1000;  //毫秒转秒

long min = time/60;  //分钟
long second = time - min*60;  //秒

if(min < 10){
sb.append("0" + min + ":");
} else {
sb.append(min + ":");
}

if(second < 10){
sb.append("0" + second);
} else {
sb.append(second);
}

return sb.toString();
}

public boolean isStarted() {
return isStarted;
}

public void setStarted(boolean started) {
isStarted = started;
}
}

在布局文件中直接调用即可：

<androidx.appcompat.widget.LinearLayoutCompat
android:layout_centerInParent="true"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<com.example.viewtest.view.TomatoClockView <--注意要使用全限定名!-->
android:id="@+id/m_view"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:padding="10dp" />

<Button
android:id="@+id/btn_start_clock"
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/m_view"
android:text="START" />

</androidx.appcompat.widget.LinearLayoutCompat>

番茄钟的相关属性可以根据需要自行设置。