实用技巧——获取验证码的倒计时

简介: 实用技巧——获取验证码的倒计时效果图源码:GitHubCountDownTimer 创建对象,调用start的方法,开始倒计时/** * 第一个参数:总...

实用技巧——获取验证码的倒计时

效果图

G1

源码:GitHub

CountDownTimer

创建对象,调用start的方法,开始倒计时

/**
 * 第一个参数:总时长(毫秒)
 * 第二个参数:多久执行一次回调(毫秒)
 */
new CountDownTimer(10000, 1000) {
    @Override
    public void onTick(long millisUntilFinished) {
        // TODO 显示倒计时
    }

    @Override
    public void onFinish() {
        // TODO 倒计时结束
    }
}.start();

封装

package kong.qingwei.countdowntimerdemo;

import android.os.CountDownTimer;
import android.widget.Button;

/**
 * Created by kqw on 2016/5/11.
 * TimeCountUtil
 */
public class TimeCountUtil extends CountDownTimer {
    private Button mButton;

    public TimeCountUtil(Button button, long millisInFuture, long countDownInterval) {
        super(millisInFuture, countDownInterval);
        this.mButton = button;
    }

    @Override
    public void onTick(long millisUntilFinished) {
        // 按钮不可用
        mButton.setEnabled(false);
        String showText = millisUntilFinished / 1000 + "秒后可重新发送";
        mButton.setText(showText);
    }

    @Override
    public void onFinish() {
        // 按钮设置可用
        mButton.setEnabled(true);
        mButton.setText("重新获取验证码");
    }
}

Code(参考)

测试类

package kong.qingwei.countdowntimerdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Button mButton;
    private TimeCountUtil mTimeCountUtil;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mButton = (Button) findViewById(R.id.button);
        mTimeCountUtil = new TimeCountUtil(mButton, 5000, 1000);
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mTimeCountUtil.start();
                // TODO 请求验证码
                Toast.makeText(getApplicationContext(), "请求验证码", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="kong.qingwei.countdowntimerdemo.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_button"
        android:text="点击发送验证码"/>
</RelativeLayout>

drawable

  • selector_button.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 可用状态 -->
    <item android:drawable="@drawable/shape_button_type1" android:state_enabled="true" />
    <!-- 不可用状态 -->
    <item android:drawable="@drawable/shape_button_type2" android:state_enabled="false" />
    </selector>
  • shape_button_type1.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="#FF4583C9"/>
        <corners android:radius="5dp"/>
        <stroke android:width="1px" android:color="#FF4583C9" />
    </shape>
  • shape_button_type2.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="#FFDDDDDD"/>
        <corners android:radius="5dp"/>
        <stroke android:width="1px" android:color="#FFDDDDDD" />
    </shape>
相关文章
|
12月前
验证码倒计时的注册页面
验证码倒计时的注册页面
45 0
layui框架实战案例(10):短信验证码60秒倒计时
layui框架实战案例(10):短信验证码60秒倒计时
306 0
|
2月前
|
Windows
Axure原型设计:获取验证码倒计时效果的实现
本文介绍了使用Axure 9.0在Windows或Mac电脑上设计手机号登录页面的步骤,包括前期准备和详细教程。前期准备涉及软件、硬件及逻辑梳理。教程涵盖绘制登录页面、创建动态面板实现倒计时效果,以及设置按钮交互。通过这些步骤,实现输入手机号后点击获取验证码的禁用状态与倒计时显示功能。鼓励读者思考其他实现方法,提升Axure使用技巧。
|
2月前
Axure原型设计:制作验证码倒计时,并重新获取交互效果
本文详细介绍了在Axure中实现验证码倒计时交互效果的步骤,包括元件准备、布局美化、全局变量设置及交互效果配置。通过分解交互流程,利用全局变量控制倒计时逻辑,最终实现按钮从“获取验证码”到倒计时状态的自动切换,并可重复使用。
|
3月前
|
NoSQL Java Redis
认证服务---整合短信验证码,验证码倒计时,验证码防刷校验 【一】
这篇文章介绍了如何在分布式微服务项目中整合短信验证码服务,包括使用阿里云短信验证接口、将短信验证功能集成到第三方服务中、其他服务的远程调用,以及通过Redis实现验证码防刷机制的代码实现和遇到的问题解决方案。
|
4月前
发送短信验证码,60秒倒计时重发
发送短信验证码,60秒倒计时重发
43 0
发送短信验证码,60秒倒计时重发
|
6月前
|
NoSQL 安全 前端开发
验证码倒计时:用户界面的小细节,大智慧
本文深入探讨了验证码倒计时的设计和实现,一项看似简单但对用户体验影响深远的功能。我们将讨论为什么需要倒计时,如何在不同平台(如Web和移动应用)上实现它,以及如何确保它既用户友好又安全。无论你是前端新手还是资深开发者,理解验证码倒计时的原理和最佳实践都将有助于你创建更流畅、更安全的用户界面。
204 3
|
JavaScript API 容器
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
288 1
|
Android开发
Android 短信验证码倒计时60s实现步骤
Android 短信验证码倒计时60s实现步骤
212 0
|
小程序 JavaScript
微信小程序登录与注册验证码倒计时的效果实现
微信小程序登录与注册验证码倒计时的效果实现
293 0