这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文
 

我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时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。

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

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

Andorid实现点击获取验证码倒计时效果的更多相关文章

  1. 前端学习——ionic/AngularJs——获取验证码倒计时按钮

     按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...

  2. Android 获取验证码倒计时实现

    Android 获取验证码倒计时实现 2017年10月24日 09:55:41 FBY展菲 阅读数:2002    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  3. day80:luffy:短信sdk接入&点击获取验证码&注册功能的实现&Celery实现短信发送功能

    目录 1.短信sdk接入 2.前端点击获取验证码效果 3.注册后端接口实现 4.注册-前端 5.Celery 6.Celery完成短信发送功能 1.短信sdk接入 1.准备工作 1.下载云通讯相关的文 ...

  4. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  5. day79:luffy:注册之对手机号的验证&实现基本的注册功能逻辑&点击获取验证码&redis

    目录 1.前端和后端对于手机号的验证 2.实现基本的注册功能-不包括验证码 3.点击获取验证码 4.解决登录不上Xadmin的bug 5.redis register.vue页面 <templa ...

  6. Jquery插件实现点击获取验证码后60秒内禁止重新获取

    通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能 先到官网(http://plugins.jquery.com/cookie/ )下载coo ...

  7. JQuery 获取验证码倒计时

    HTML代码: <button id="btn">点击获取验证码</button> Jquery:代码: $(document).ready(functio ...

  8. angular中service封装$http做权限时拦截403等状态及获取验证码倒计时、跨域问题解决

    封装$http.做权限时拦截403等状态及获取验证码倒计时: 拦截接口返回状态 var app = angular.module('app'); app.factory('UserIntercepto ...

  9. 微信小程序实现验证码倒计时效果

    效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...

随机推荐

  1. Linux系统编程:基本I/O系统调用

    文件描述符 进程每打开一个文件的时候,会获得该文件的文件描述符,而后续的读写操作都把文件描述符作为参数.在用户空间或者内核空间,都是通过文件描述符来唯一地索引一个打开的文件.文件描述符使用int类型表 ...

  2. linux ssh publickey登录

    一.公钥认证的基本思想: 对信息的加密和解密采用不同的key,这对key分别称作private key和public key,其中,public key存放在目标服务器上,而private key为特 ...

  3. sqlalchemy 大全

    SQLAchemy SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:将对象转换成SQL,然后使用数据API执行S ...

  4. BBSXP最新漏洞 简单注入检測 万能password

    BBSXP最新漏洞 漏洞日期:2005年7月1日受害版本号:眼下全部BBSXP漏洞利用:查前台password注入语句:blog.asp?id=1%20union%20select%201,1,use ...

  5. mirantis fuel puppet执行顺序 和 对整个项目代码的执行流程理解

    stage执行顺序 stage {'zero': } -> stage {'first': } -> stage {'openstack-custom-repo': } -> sta ...

  6. 用removeLast和removeFrist来模仿堆和栈

    /* *在大不久前,我决定自学Java,关注了很多的公众号.微博等.没几天我看到一个笑话: *晚上孩子哭了,老婆让我去看看. *我说:"不行,咱们的床是队列,你先上的床就得你先下床... * ...

  7. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  8. WorldCount代码检查与优化——软件测试第三次作业

    合作者:201631062222,201631062232 代码地址:https://gitee.com/biubiubiuLYQ/ceshi_secend 本次作业链接地址:https://edu. ...

  9. vue脚手架 构建豆瓣App 第一天

    课堂笔记: 项目结构分析: 项目入口:index.html(div#app) 全局vue组件:App.vue(template:div#app) 通过相同id的div,index.html与Appvu ...

  10. Linux上rsync配置

    一.服务器端配置1.rsyncd.conf文件说明uid = rsync     #用户,用来控制用户访问模块目录的读写权限gid = rsync     #组,用来控制组访问模块目录的读写权限use ...