Rxjava实现发送验证码倒计时功能

本文为大家分享了使用Rxjava做一个发送验证码倒计时,供大家参考,具体内容如下

首先在gradle添加依赖:

compile 'io.reactivex:rxandroid:1.2.1'

compile 'io.reactivex:rxjava:1.1.6'

xml布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="luoxiang.com.rxcountdown.MainActivity"
  android:padding="16dp"
  android:orientation="vertical">

  <EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="请输入手机号码"
     />

  <Button
    android:id="@+id/btn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#f97e7e"
    android:text="获取验证码"
    />
</LinearLayout>

java代码:

package luoxiang.com.rxcountdown;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

import java.util.concurrent.TimeUnit;

import rx.Observable;
import rx.Observer;
import rx.android.schedulers.AndroidSchedulers;
import rx.functions.Action0;
import rx.functions.Func1;

public class MainActivity extends AppCompatActivity {

  private Button mSend;
  private static final String TAG = "MainActivity";

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

    init();

  }

  private void init() {

    mSend = (Button) findViewById(R.id.btn);
    mSend.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        final int count = 30;

        Observable.interval(0, 1, TimeUnit.SECONDS)//设置0延迟,每隔一秒发送一条数据
            .take(count+1) //设置循环11次
            .map(new Func1<Long, Long>() {
              @Override
              public Long call(Long aLong) {
                return count-aLong; //
              }
            })
            .doOnSubscribe(new Action0() {
              @Override
              public void call() {
                mSend.setEnabled(false);//在发送数据的时候设置为不能点击

                mSend.setBackgroundColor(Color.GRAY);//背景色设为灰色
              }
            })

            .observeOn(AndroidSchedulers.mainThread())//操作UI主要在UI线程
            .subscribe(new Observer<Long>() {
              @Override
              public void onCompleted() {
                Log.d(TAG, "onCompleted: ");
                mSend.setText("获取验证码");//数据发送完后设置为原来的文字
                mSend.setTextColor(Color.BLACK);
                mSend.setBackgroundColor(Color.parseColor("#f97e7e"));//数据发送完后设置为原来背景色
              }

              @Override
              public void onError(Throwable e) {
                e.printStackTrace();
              }

              @Override
              public void onNext(Long aLong) { //接受到一条就是会操作一次UI
                Log.d(TAG, "onNext: "+aLong);
                mSend.setText("剩余时间"+aLong+"秒");
                mSend.setEnabled(true);
                mSend.setTextColor(Color.WHITE);

              }
            });
      }
    });
  }

}

代码相对比较简单,做了详细的注释,要使用Rxjava需要明白什么是观察者模式。剩下的就去理解和怎么样组合使用Rxjava的各种操作符。

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

(0)

相关推荐

  • 基于RxJava框架实现获取验证码的辅助类

    本文实例为大家分享了RxJava实现获取验证码辅助类的具体代码,供大家参考,具体内容如下 应用场景: 一般的项目中都有获取验证码这个功能,并且可能不止一个地方用到.其逻辑时通的: -实时监控输入框中手机号或者邮箱的合法性 -合法时可点击获取验证码按钮 -点击按钮时调用接口去请求验证码,同时按钮变为不可点击,显示倒计时 -请求成功时执行正常逻辑,请求失败后倒计时取消,按钮状态恢复 设计思路 -整个功能涉及的对象:一个EditText用于输入账号信息,一个获取验证码的Button,一个Rxjava的

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

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

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

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

  • Rxjava实现发送验证码倒计时功能

    本文为大家分享了使用Rxjava做一个发送验证码倒计时,供大家参考,具体内容如下 首先在gradle添加依赖: compile 'io.reactivex:rxandroid:1.2.1' compile 'io.reactivex:rxjava:1.1.6' xml布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.

  • vue3发送验证码倒计时功能的实现(防止连点、封装复用)

    目录 一.实现思路 二.实现一个简单的验证码倒计时 三.优化 四.逻辑封装 补充 mobileRule 一.实现思路 倒计时 流程图 二.实现一个简单的验证码倒计时 //倒计时初始变量 const codeNum = ref(60); // 定时器id let clearId: number; // 发送验证码 const sendCode = async () => { // 防止下次点击 如果倒计时的时间不是60 就不执行下面逻辑 if (codeNum.value != 60) retur

  • iOS发送验证码倒计时应用

    app注册的时候,经常会遇到发送验证码的功能,当点击发送验证码的时候,那个button就开始了倒计时,当计时结束才可以重新发送,效果如下: 具体代码实现如下: - (IBAction)sendMes:(UIButton *)sender { __block int timeout = 10 ; //倒计时时间 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0); dispat

  • react native中的聊天气泡及timer封装成的发送验证码倒计时

    其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可以用callBack  二可以用pubsub发布订阅模式 三可以用manager事件监听(a页面要显示的内容 有两种形式,一是从manager主动接收,也就是说不需要点击什么的获取数据,而是时时监听manager里数据的变化,第二种a页面获取要显示内容的形式是 点击出发,获取) 3 需要说的还是na

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

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

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

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述: 注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果: 首先检测手机是否符合1开头,11位数字的格式: 若不符合,则提示错误信息并返回false: 否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: --------------------------------效果演

  • Android实现获取验证码倒计时功能

    本文实例为大家分享了android获取验证码倒计时功能的具体代码,供大家参考,具体内容如下 获取验证码倒计时在现在的App中非常常见,他主要的功能点就是给TextView设置一个点击事件,但是当点击后或出现倒计时,在倒计时的时候点击是触发不了点击事件的. 等倒计时结束显示重新获取验证码的时候可以重新触发点击事件: 在真实的项目中一般都是设置一分钟,咱们这里就不设置那么长了,设置10秒: 首先说下我这个demo非常简单,工具类不用管,直接复制到项目中,只需要两步两行代码即可: 第一步:初始化工具类

  • android实现一个图片验证码倒计时功能

    1.如图所示,要实现一个验证码的倒计时的效果          2.实现 图中获取验证码那块是一个button按钮 关键部分,声明一个TimeCount,继承自CountDownTimer /*验证码倒计时*/ private class TimeCount extends CountDownTimer{ /** * @param millisInFuture 总时间长度(毫秒) * @param countDownInterval 时间间隔(毫秒),每经过一次时间间隔都会调用onTick方法

  • Android 简单封装获取验证码倒计时功能

    效果如下图所示: 如图所示的效果相信大家都不陌生,我们可以使用很多种方法去实现此效果,这里自己采用 CountDownTimer 定时器简单封装下此效果,方便我们随时调用. 首页先在 attrs.xml 中定义下所需的几个属性: <resources> <declare-styleable name="CountDownButton"> <attr name="millisinfuture" format="integer&q

  • 微信小程序项目实践之验证码倒计时功能

    效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字 首先js文件的data里面 声明一个变量用于表示当前是否可以点击,codeIsCanClick = true,  默认是可以点击的 写下界面代码: wxml文件中 <view class='centerRow'> <view class='inputLabel'>动态码:</view> <input class='inputStyle' style="flex:1 " bin

随机推荐