Android实现点击获取验证码倒计时效果

我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取,为了方便以后使用,这里做个记录,讲讲倒计时器的实现。

1、先进行倒计时工具类的封装

public class CountDownTimerUtils extends CountDownTimer {
 private TextView mTextView;

 /**
  * @param textView   The TextView
  *
  *
  * @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 receiver
  *       {@link #onTick(long)} callbacks.
  */
 public CountDownTimerUtils(TextView textView, long millisInFuture, long countDownInterval) {
  super(millisInFuture, countDownInterval);
  this.mTextView = textView;
 }

 /**
  * 倒计时期间会调用
  * @param millisUntilFinished
  */
 @Override
 public void onTick(long millisUntilFinished) {
  mTextView.setClickable(false); //设置不可点击
  mTextView.setText(millisUntilFinished / 1000 + "秒"); //设置倒计时时间
  mTextView.setBackgroundResource(R.drawable.shape_verify_btn_press); //设置按钮为灰色,这时是不能点击的

  SpannableString spannableString = new SpannableString(mTextView.getText().toString()); //获取按钮上的文字
  ForegroundColorSpan span = new ForegroundColorSpan(Color.RED);
  /**
   * public void setSpan(Object what, int start, int end, int flags) {
   * 主要是start跟end,start是起始位置,无论中英文,都算一个。
   * 从0开始计算起。end是结束位置,所以处理的文字,包含开始位置,但不包含结束位置。
   */
  spannableString.setSpan(span, 0, 2, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);//将倒计时的时间设置为红色
  mTextView.setText(spannableString);
 }

 /**
  * 倒计时完成后调用
  */
 @Override
 public void onFinish() {
  mTextView.setText("重新获取验证码");
  mTextView.setClickable(true);//重新获得点击
  mTextView.setBackgroundResource(R.drawable.shape_verify_btn_normal); //还原背景色
 }
}

让这个工具类继承CountDownTimer,然后把显示倒计时的View传进去,在倒计时期间会调用onTick方法,在这个方法里面对View的倒计时界面进行刷新,倒计时结束后,会调用onFinish方法,在里面恢复View的状态即可。

2、布局文件

未点击获取验证码时的view布局 shape_verify_btn_normal.xml

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle" >

 <!-- 填充的颜色:这里设置背景透明 -->
 <solid android:color="@color/maincolor" />
 <!-- 边框的颜色 :不能和窗口背景色一样-->
 <stroke
  android:width="1dp"
  android:color="@color/white" />
 <!-- 设置按钮的四个角为弧形 -->
 <!-- android:radius 弧形的半径 -->
 <corners android:radius="5dip" />

 <!-- padding:Button里面的文字与Button边界的间隔 -->
 <padding
  android:bottom="5dp"
  android:left="5dp"
  android:right="5dp"
  android:top="5dp" />
</shape>

点击获取验证码之后的view布局  shape_verify_btn_press.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle" >

 <!-- 填充的颜色:这里设置背景透明 -->
 <solid android:color="@color/graywhite" />
 <!-- 边框的颜色 :不能和窗口背景色一样-->
 <stroke
  android:width="1dp"
  android:color="@color/white" />
 <!-- 设置按钮的四个角为弧形 -->
 <!-- android:radius 弧形的半径 -->
 <corners android:radius="5dip" />

 <!-- padding:Button里面的文字与Button边界的间隔 -->
 <padding
  android:bottom="5dp"
  android:left="5dp"
  android:right="5dp"
  android:top="5dp" />
</shape>

整个界面的布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@drawable/login_bg">

 <EditText
  android:id="@+id/rst_phone_number"
  android:layout_width="match_parent"
  android:layout_height="40dp"
  android:inputType="phone"
  android:hint="@string/phone_number"
  android:textSize="16sp"
  android:textColor="@color/black"
  android:singleLine="true"
  android:background="@drawable/shape_form"
  android:textCursorDrawable="@drawable/text_cursor"
  android:layout_marginLeft="30dp"
  android:layout_marginRight="30dp"
  android:layout_marginTop="30dp"
  android:layout_gravity="center_vertical"/>

 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="40dp"
  android:layout_marginLeft="30dp"
  android:layout_marginRight="30dp"
  android:layout_marginTop="15dp"
  android:orientation="horizontal">

  <EditText
   android:id="@+id/rst_verify_code"
   android:layout_width="wrap_content"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:inputType="number"
   android:hint="@string/rst_verify_code"
   android:textSize="16sp"
   android:textColor="@color/black"
   android:singleLine="true"
   android:background="@drawable/shape_form"
   android:textCursorDrawable="@drawable/text_cursor" />

  <TextView
   android:id="@+id/rst_send_code"
   android:layout_width="130dp"
   android:layout_height="match_parent"
   android:text="@string/rst_send_code"
   android:textSize="13sp"
   android:textColor="@color/white"
   android:gravity="center"
   android:layout_marginLeft="10dp"
   android:background="@drawable/shape_verify_btn_normal"/>

 </LinearLayout>

 <Button
  android:id="@+id/rst_next_step"
  android:layout_width="match_parent"
  android:layout_height="40dp"
  android:layout_margin="30dp"
  android:text="@string/rst_next_step"
  android:textSize="15sp"
  android:textColor="@color/white"
  android:background="@drawable/shape_btn"/>

</LinearLayout>

这里布局有个问题,因为获取验证码这个TextView中的字会在倒计时期间有变化,而且每次字的变化长度不一样,如果把它的layout_width设为wrap_content,那么这个TextView的长度会变化,影响界面美观,所以可以把它的长度固定,然后把验证码输入框的layout_weight设为1,这样就可以了。

3、具体使用方法

// 发送成功进入倒计时
countDownTimer = new CountDownTimerUtils(tv_send_code, 60000, 1000);
countDownTimer.start();

其中60000代表要倒计时的时长,即60s;1000代表每次递减1s。

以上就是具体的实现过程,下面附几张效果图!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-08-09

Android获取验证码倒计时显示效果

前面为大家讲过计时器的顺时针的两种方法,在录制视频等操作中颇有使用,今天就给大家带来倒计时实现的两种方式. 虽然最近写的都比较简单和基础,不过简单不代表熟悉,基础不代表就会,大牛绕过,哈,中牛小牛也可以绕过,这个是写给初学者的. 先搞个效果图. 代码实现方式也超级简单啦,这里首推第一种实现方式,而且也是比较适合大家的,就是通过直接继承CountDownTimer来实现. 对于CountDownTimer这个类很简单,继承它的时候必须重写构造方法和实现其虚拟方法. 构造方法的两个参数分别是(倒计时

Android获取验证码倒计时实现代码

本文实例为大家分享了Android获取验证码倒计时的具体代码,供大家参考,具体内容如下 1. 验证码输入框和获取验证码按钮布局 xml代码: <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/white" android:orientation="horizontal&q

Android实现发送短信验证码倒计时功能示例

一.简介: 开发中在用户注册或找回密码之类的功能,经常会遇到获取短信验证码,获取验证码后需要等待1分钟倒计时,这段时间是不能再次发送短信请求的. 效果图: 二.实现步骤: 1.一个关键类:CountDownTimer(Android系统自带的倒计时功能类) public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; //显示倒计时的文字 /** * @param textView Th

Android开发之获取短信验证码后按钮背景变化并且出现倒计时

目前越来越多的app在注册或是进行对应操作时,要求获取短信验证码,在点击了获取短信验证码的按钮后,就是出现倒计时,比如倒计时120S,在倒计时期间内,按钮背景变化并且出现倒计时,当倒计时结束后,如果你没有获取到验证码,可以再次点击. 代码如下所示: VerCodeTimer mVerCodeTimer=(Button) findViewById(R.id.login_get_ver_code); private class VerCodeTimer extends CountDownTimer

Android 用RxBinding与RxJava2实现短信验证码倒计时功能

场景:注册账号页面时,我们点击按钮发送验证码,在等待验证码时,界面会有倒计时提示,这此期间按钮不可点击.当倒计时结束时,按钮恢复. 实现与功能都不难,这次用 RxBinding,RxJava2 的方法去实现.并实现了手动.自动停止倒计时,防止多次点击. 功能动态图 要使用 RxBinding.RxJava2 先添加 Gradle 配置: compile 'io.reactivex.rxjava2:rxandroid:2.0.1' compile 'io.reactivex.rxjava2:rxj

Android账号注册实现点击获取验证码倒计时效果

网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果,如何实现这个效果,具体内容如下 效果图:   代码: RegisterActivity.java import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.View; import android.widget.Button; import com.jialianjia.bzw.BaseAct

Android利用CountDownTimer实现验证码倒计时效果实例

前言 等待总是让人感到焦急和厌烦的,特别是看不到进展的等待.所以为了不让用户痴痴地等,我们在进行某些耗时操作时,一般都要设计一个进度条或者倒计时器,让进度可视化,告诉用户"等待之后更精彩".在使用短信验证码注册或者登录App就可以看到这样的设计:点击"发送验证码"的按钮之后,按钮上就会出现倒计时(一般为60秒),倒计时结束之后,按钮的文字就会变成"重新发送". 在Android中要实现这样的效果可以使用Handler发送消息,但其实还有一个已经封

Android自定义View获取注册验证码倒计时按钮

在Android开发中,我们不可避免的会做到注册功能,而现在的注册大多数都是用手机去注册的,那么注册的时候都会要求用获取验证码的方式去验证,我们接下来就来实战一下自定义获取验证码倒计时按钮: 1.先看效果图 2.我们涉及到的变量 //倒计时时长,可设置 /** * 倒计时时长,默认倒计时时间60秒: */ private long length = 60 * 1000; //在点击按钮之前按钮所显示的文字 /** * 在点击按钮之前按钮所显示的文字,默认是获取验证码 */ private Str

Android&#8203;短信验证码倒计时验证的2种常用方式

前言 ​本文主要介绍的是短信验证码功能,这里总结了两种常用的方式,可以直接拿来使用. 看图 计时器 说明:这里的及时从10开始,是为了演示的时间不要等太长而修改的. 方法如下 1.第一种方式:Timer /** * Description:自定义Timer * <p> * Created by Mjj on 2016/12/4. */ public class TimeCount extends CountDownTimer { private Button button; //参数依次为总时

Android使用Kotlin和RxJava 2.×实现短信验证码倒计时效果

本文介绍了Android使用Kotlin和RxJava 2.×实现短信验证码倒计时效果,分享给大家,具体如下: 场景:注册账号页面时,我们点击按钮发送验证码,在等待验证码时,界面会有倒计时提示,这此期间按钮不可点击.当倒计时结束时,按钮恢复. 实现代码 val timer:TextView = findViewById(R.id.textView) //这里的 timer 就是你要控制显示倒计时效果的 TextView val mSubscription: Subscription? = nul

Android使用第三方服务器Bmob实现发送短信验证码

调用Bmob第三方服务器实现短信验证的功能,大致思路如下: 随机产生6位数字,然后调用Bmob的请求短发函数发送者六位数到服务器,然后服务器给指定手机发送这6位验证码,然后感觉用户输入的数字进行判断,如果输入的和发送的相等,则验证成功. 第一步.请求验证码: SimpleDateFormat format =new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String sendTime = format.format(new Date());

swift 3.0 实现短信验证码倒计时功能

下面一段代码给大家分享swift 3.0 实现短信验证码倒计时功能,具体实例代码如下所示: class TCCountDown { private var countdownTimer: Timer? var codeBtn = UIButton() private var remainingSeconds: Int = 0 { willSet { codeBtn.setTitle("重新获取\(newValue)秒", for: .normal) if newValue <=

ReactNative短信验证码倒计时控件的实现代码

由于最近刚开始认真的搞RN,可能有一些封装的不是最佳实践,还是希望大家多提意见,和大家一起进步吧.本文介绍了ReactNative短信验证码倒计时控件,分享给大家 功能 根据项目的需要,需要写一个自定义的控件,实现如下功能: 默认文字为点击获取验证码 点击后出现60秒的倒计时 颜色,字号可调 倒计时过程中,再次点击需要忽略掉 倒计时完成后文本恢复成点击获取验证码 再几次点击同之前 其实说了这么多,就是个最普通的验证码的功能... 效果 效果图如下:(录的图片比较一般,对付着看吧) 实现原理 自己

JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)

1.功能描述 当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送. 2.分析 必须用到定时器.按钮点击后,在定时器内做出判断.倒计时60秒,到0结束. 3.代码实现: 重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的. <!DOCTYPE html> <html> <head> <meta charset="U

JS获取短信验证码倒计时的实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: $(function() { var phone_num = /^1\d{10}$/; var flag = 1; //短信发送时标志位 $(".getcode").click(function() { if($("#phone").val() == "") { alert("请输入电话号码!"); return false; }; if(!phone_num.test($

Android手机号注册、绑定手机号获取短信验证码实例

本文写了一个常见的功能--手机app中注册或绑定手机号的获取验证码的功能,也就是短信验证功能 具体效果就是,你在注册界面填写手机号,点击获取验证码按钮,---然后会收到验证短信,填入验证码后点击注册按钮,如果验证正确就可以跳转到另外一个界面 1.首先大家需要在mob官网注册一个账号,mob是一个免费的短信验证平台 2.在mob.com后台创建应用 3.下载对应的sdk 4.将sdk作为一个library导入到你的项目中 5.现在就可以在你的项目中编写代码使用mob提供的这个功能了 具体代码如下:

Android利用广播接收器实现自动填充短信验证码

今天博主带给小伙伴们一个小功能,就是利用广播接收器实现自动填充短信验证码,话不多说,我们先看看如何去实现这个小功能. 首先我们需要新建一个名为SMSBroadcastReceiver的广播接收器,代码如下: public class SMSBroadcastReceiver extends BroadcastReceiver { private static MessageListener mMessageListener; public SMSBroadcastReceiver() { sup