Android 自定义View 之计时文字：玩转 Android 倒计时控件

Android

2023-12-28 05:17:19

打造自定义计时器控件：分步实现，打造动态计时效果

1. 缘起：计时需求无处不在

在 Android 开发中，计时需求可谓司空见惯，从接收验证码时的倒计时，到秒表的计时，此类需求层出不穷。为了应对这些挑战，我萌生了创建自定义计时器控件的想法。本文将带你踏上打造这款控件的详细之旅，并通过生动的效果图，展现其强劲的功能。

2. 循序渐进，打造计时器控件

打造自定义计时器控件，需要循序渐进地完成以下步骤：

创建自定义 View 类 ：从 View 类继承，定制计时器控件的基石。
重写 onDraw 方法 ：在其中绘制计时文字，让时间跃然纸上。
实现计时功能 ：通过 Handler 或 CountDownTimer 类，赋予控件动态计时能力。
将自定义 View 添加到布局文件 ：将计时器控件融入你的应用程序中。

3. 揭秘步骤，构建计时器控件

3.1 创建自定义 View 类

public class ChronometerView extends View {
    // 构造方法
    public ChronometerView(Context context) {
        super(context);
    }

    // 构造方法
    public ChronometerView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    // 构造方法
    public ChronometerView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    // 重写onDraw方法
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制计时文字
        String text = "00:00"; // 默认显示"00:00"
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setTextSize(50);
        canvas.drawText(text, 100, 100, paint);
    }
}

3.2 重写 onDraw 方法

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

    // 绘制计时文字
    String text = "00:00"; // 默认显示"00:00"
    Paint paint = new Paint();
    paint.setColor(Color.BLACK);
    paint.setTextSize(50);
    canvas.drawText(text, 100, 100, paint);
}

3.3 实现计时功能

private CountDownTimer timer;

private void startTimer() {
    timer = new CountDownTimer(10000, 1000) {
        @Override
        public void onTick(long millisUntilFinished) {
            // 每隔一秒更新计时文字
            String text = String.format("%02d:%02d",
                    TimeUnit.MILLISECONDS.toMinutes(millisUntilFinished),
                    TimeUnit.MILLISECONDS.toSeconds(millisUntilFinished) -
                            TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes(millisUntilFinished)));
            invalidate();
        }

        @Override
        public void onFinish() {
            // 计时结束
            invalidate();
        }
    };

    timer.start();
}

private void stopTimer() {
    timer.cancel();
}

3.4 将自定义 View 添加到布局文件

<com.example.myapplication.ChronometerView
    android:id="@+id/chronometerView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

4. 总结：定制计时控件，随心所欲

通过本文的详细讲解，你已经掌握了创建计时器控件的秘诀。你可以根据自己的需要，定制控件的外观和功能，让你的项目锦上添花。

5. 常见问题解答

5.1 如何改变计时器的字体颜色和大小？

在 onDraw 方法中修改 Paint 对象即可。

5.2 如何设置自定义计时时长？

在创建 CountDownTimer 对象时，传递所需的时长和间隔。

5.3 如何在计时结束后执行特定操作？

在 onFinish 方法中添加相应的操作代码。

5.4 如何暂停和恢复计时器？

暂停：调用 timer.cancel() 方法。恢复：调用 timer.start() 方法。

5.5 如何将计时器与其他控件关联？