一种实现极简番茄时钟的思路

HuYounger / 文 发表于2017-09-19 09:59 次阅读 android

概述

最近跟着扔物线的自定义View教程重新复习了一波基础,但是API这种东西如果不用很容易就忘了,趁大脑还没触发GC之前,最好的记忆方式就是撸个Demo出来。iOS上有一款个人很喜欢的简约TODO应用叫极简待办,其中它的番茄时钟交互很适合用来练手。

分析

先看下iOS的效果图长啥样

功能

  • 一个默认黑色的圆,一个灰色的圆,随着倒计时减少,灰色圆的弧度越来越大
  • 手指在圆圈内滑动可以调整时间

心路历程

一步步来,先画一个黑圆以及显示时间文本,传入一个时间值后,可以实现倒计时功能。实现倒计时需要用到CountDownTimer,因此只要在该类的onTick中不断重绘就行了

public void start(){
        new CountDownTimer(time * 1000 + 1000, 1000) {
            @Override
            public void onTick(long millisUntilFinished) {
                time = (time * 1000 - 1000) / 1000;
                textTime = time + "";
                invalidate();
            }

            @Override
            public void onFinish() {
            }
        }.start();
    }

通过setTime方法提前设置一分钟,运行后可以看到界面开始倒计时,

接着,开始倒计时后,画灰色的圆弧,这里需要用到动画ValueAnimator,通过ValueAnimator的getAnimatedValue()方法获取实时的动画值,计算灰色圆弧扫过的区域,修改start()方法如下:

public void start(){
    ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1.0f);
    valueAnimator.setDuration(time * 1000);
    valueAnimator.setInterpolator(new LinearInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            sweepVelocity = (float) animation.getAnimatedValue();
            invalidate();
        }
    });
    valueAnimator.start();

    new CountDownTimer(time * 1000 + 1000, 1000) {
        @Override
        public void onTick(long millisUntilFinished) {
            time = (time * 1000 - 1000) / 1000;
            textTime = time + "";
            invalidate();
        }

        @Override
        public void onFinish() {
        }
    }.start();
}

onDraw中:

mRectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
canvas.drawArc(mRectF, START_ANGLE, 360 * sweepVelocity, false, mPaint);

效果如下:

时间显示的有点挫,格式化下:

private String formatCountdownTime(int countdownTime) {
    StringBuilder sb = new StringBuilder();
    int minute = countdownTime / 60;
    int second = countdownTime - 60 * minute;
    if (minute < 10) {
        sb.append("0" + minute + ":");
    } else {
        sb.append(minute + ":");
    }
    if (second < 10) {
        sb.append("0" + second);
    } else {
        sb.append(second);
    }
    return sb.toString();
}

接下来就是实现上下滑动调整时间了,思路如下:

先确定一个最大值,这里取60分钟,我们可以获取到手指按下和滑动的坐标,如果这两个点的纵坐标差值刚好等于直径,那么显示的时间取最大值,其余的就在0-60的区间内,在滑动过程中执行重绘。

重写onTouchEvent方法:

@Override
public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    float y = event.getY();
    switch (event.getActionMasked()) {
        case MotionEvent.ACTION_DOWN:
            touchX = x;
            touchY = y;
            break;
        case MotionEvent.ACTION_MOVE:
            offsetX = x - touchX;
            offsetY = y - touchY;
            time = (int) (offsetY / 2 / radius * MAX_TIME);
            if (time <= 0) {
                time = 0;
            }
            textTime = formatTime(time);
            countdownTime = time * 60;
            invalidate();
            break;
    }
    return true;
}

运行效果如下:

时间是可以调整了,但是当前没有对滑动范围限制,看到最大时间超出60分钟,处理的思路很简单,就是判断点是否在圆内,那怎么判断触摸点是否在圆内呢?平面内两点间距离公式和半径比较即可。

private boolean isContained(float x, float y) {
    if (Math.sqrt((x - centerX) * (x - centerX) + (y - centerY) * (y - centerY)) > radius) {
        return false;
    } else {
        return true;
    }
}

最终效果:

github传送门

收藏 赞 (0) 踩 (0)