Android自定义TimeButton实现倒计时按钮

Android自定义TimeButton实现倒计时按钮攻略

前言

在Android开发过程中，经常会遇到需要实现倒计时按钮的需求。例如在用户注册登录时，发送验证码需要倒计时等待。这时，我们可以采用一个自定义的控件：TimeButton。

TimeButton实现了倒计时功能，是一个非常实用的控件。在本篇攻略中，我们将介绍如何自定义TimeButton实现倒计时按钮，并给出两个示例说明。

实现思路

TimeButton的实现思路如下：

1. 继承Button控件，实现倒计时功能。
2. 通过重写onDetachedFromWindow()方法，使Activity销毁时停止倒计时。

具体的实现细节可以看下面的代码。

自定义TimeButton

下面是一个自定义的TimeButton代码：

public class TimeButton extends Button implements Runnable{

    private int time = 60;  // 初始化倒计时间
    private String label = "重新获取";
    private boolean isRunning = false;  // 倒计时是否正在执行

    public TimeButton(Context context) {
        super(context);
        setText(label);
    }

    public TimeButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        setText(label);
    }

    @Override
    public void run() {
        if (isRunning) {
            setText("(" + time + ") 秒后" + label);
            time--;
            if (time == 0) {
                stop();
            } else {
                postDelayed(this, 1000);
            }
        }
    }

    public void start() {
        isRunning = true;
        setEnabled(false);
        post(this);
    }

    public void stop() {
        isRunning = false;
        setEnabled(true);
        time = 60;
        setText(label);
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        stop();
    }
}

示例说明

示例一：注册获取验证码

在注册界面，用户需要获取验证码才能验证自己的手机号。我们可以使用TimeButton控件来实现这个功能。

<com.example.myapp.TimeButton
    android:id="@+id/btn_get_code"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="获取验证码"/>

然后在注册Activity中，我们可以这样使用这个控件：

TimeButton btnGetCode = findViewById(R.id.btn_get_code);
btnGetCode.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        btnGetCode.start();   // 开始倒计时
        // TODO: 发送验证码
    }
});

示例二：重置支付密码

在重置支付密码界面，用户需要先输入手机号，然后获取验证码。我们可以使用TimeButton控件来实现这个功能。

<EditText
    android:id="@+id/edit_phone"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

<com.example.myapp.TimeButton
    android:id="@+id/btn_get_code"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="获取验证码"/>

然后在Activity中，我们可以这样使用这个控件：

TimeButton btnGetCode = findViewById(R.id.btn_get_code);
btnGetCode.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String phone = ((EditText)findViewById(R.id.edit_phone)).getText().toString();
        // TODO: 校验手机号是否合法
        btnGetCode.start();   // 开始倒计时
        // TODO: 发送验证码
    }
});

总结

通过本文的介绍，我们可以看到自定义TimeButton，可以满足不同场景下的倒计时功能的需求。同时，本文向大家展示了两个示例，分别是在注册获取验证码和重置支付密码获取验证码的场景下。在实际应用中，我们也可以根据需要，自行定义按钮样式、倒计时时长等，来制定符合自己产品需求的倒计时控件。