利用RxJava和 RxBinding实现倒计时按钮、关键词搜索和按钮防抖效果

来源:互联网 发布:淘宝好评卡片 编辑:程序博客网 时间:2024/06/08 15:52

前言:最近在进行Android项目开发的时候,遇到了点击按钮获取验证码并且按钮自带倒计时功能的场景、通过输入框进行关键词搜索的应用场景、为防止按钮短时间多次点击的防抖场景。相信这不仅是我遇到的问题,相信在大多数项目中都会遇到这些使用场景。今天我们就来对这些场景进行统一的分析和处理,同时比较传统实现方式和利用RxJava实现方式的异同点,并且通过RxJava去优雅的实现这些功能。

废话不多说,接下来我们就一个一个来进行实现:

一.首先实现最简单的按钮防抖效果实现。

场景分析:我们可能经常遇到这种问题,通过点击界面上的按钮去进行复杂的逻辑处理(如网络请求),有时这种处理过程可能很慢。在这和过程中,肯能短时间内没有得到处理的相应结果,这时在UI并没有体现出处理的结果。这时用户可能多次点击(进行多次网络请求),为防止用户在短时间对按钮多次点击,需要对事件进行处理,短时间内不允许多次点击或只处理一次点击事件。

实现效果需要用RxBinding实现,这里需要使用到Observable的throttleFirst操作符,在这里对它进行简单的说明。

Observable.throttleFirst:允许设置一个时间长度,之后它只发送固定时间内的第一次事件,而屏蔽其它事件。

代码实现:

//mButton就是需要进行防抖操作的View,这里设置2秒内防抖 RxView.clicks(mButton).throttleFirst(2, TimeUnit.SECONDS).subscribe(new Action1<Void>() {            @Override            public void call(Void aVoid) {                //do sth  在一段时间内多次点击,只处理这段时间内的第一次点击事件                //如果为防止多次点击按钮而带来的不必要开销,可以在这里对事件进行处理                System.out.println(System.currentTimeMillis());            }        });

二.输入框进行关键词搜索效果实现

场景分析:在进行关键词搜索的时候,我们总是希望在输入完成后再向服务器发起请求进行搜索。但是传统的实现方法是在文本一旦发生变化的时候就会进行数据请求,带来了许多不必要的开销,虽然也可以实现我们想要的效果,但是总是很复杂。这里我们通过RxBinding就能很简单清晰地实现这种效果。

实现效果需要用RxBinding实现,这里需要使用到Observable的debounce操作符,在这里对它进行简单的说明。

Observable.debounce:仅在过了一个指定的时间后还没有发射数据才进行数据的发射。

实现关键词搜索效果,传统方法需要利用TextWatcher去辅助实现,这种方式的缺陷在上面也已经说到了,我们先来看看传统方式的实现原理:

mEditText.addTextChangedListener(new TextWatcher() {            @Override            public void beforeTextChanged(CharSequence s, int start, int count, int after) {            }            @Override            public void onTextChanged(CharSequence s, int start, int before, int count) {            //当输入框的内容一旦发生变化,这个方法就会得到执行,如果我们在这里斤西瓜网络请求的话,每次输入或发生改变都会进行一次请求                //do sth  在这里进行关键字,词的查询操作                // 这里模拟数据请求,返回list数据                List<String> mDatas = new ArrayList<String>();                mDatas.add("哈哈哈哈");                mDatas.add("呵呵呵呵");                System.out.println("------------当前时间:" + System.currentTimeMillis() + "---------------");                for (String str : mDatas) {                    System.out.println(str);                }            }            @Override            public void afterTextChanged(Editable s) {            }        });

通过RxBinding方式实现:

 RxTextView.textChanges(mEditText).debounce(300, TimeUnit.MILLISECONDS)                .subscribeOn(AndroidSchedulers.mainThread())//对text的监听必须在ui线程中                .filter(new Func1<CharSequence, Boolean>() {                    @Override                    public Boolean call(CharSequence charSequence) {                    //这里过滤掉字符串为空的情况,防止为空时还发起请求                        return charSequence.toString().length() > 0;                    }                }).map(new Func1<CharSequence, String>() {            @Override            public String call(CharSequence charSequence) {                if (null != charSequence && !"".equals(charSequence.toString().trim()))                    return charSequence.toString().trim();                return null;            }        }).observeOn(Schedulers.io()).switchMap(new Func1<String, Observable<List<String>>>() {        //flatmap:将所有请求排列起来,然后一个一个发射出去            //switchMap操作符:只发射最近的一个请求            @Override            public Observable<List<String>> call(String s) {            //在这里我们只处理0.3秒内文本框内容未发生变化,且最后一次请求的字符串数据,将最后一次变化产生的字符串作为请求参数向服务器请求                //do sth  在这里通过keywords关键字进行网络请求,获取改关键字搜索到的记录                // 这里模拟数据请求,返回list数据                List<String> mDatas = new ArrayList<String>();                mDatas.add("哈哈哈哈");                mDatas.add("呵呵呵呵");                return Observable.just(mDatas);            }        }).subscribeOn(Schedulers.io()).observeOn(AndroidSchedulers.mainThread()).subscribe(new Action1<List<String>>() {            @Override            public void call(List<String> strings) {            //在这里订阅处理成功后的数据,进行相关逻辑处理                System.out.println("------------当前时间:" + System.currentTimeMillis() + "---------------");                for (String s : strings) {                    System.out.println(s);                }            }        }, new Action1<Throwable>() {            @Override            public void call(Throwable throwable) {                //处理出错的逻辑            }        });

三.获取短信验证码是倒计时按钮实现

场景分析:大多数项目都会用到获取短信验证码的功能,在点击获取验证码的时候,我们往往会设置一个时间间隔,让应用去向服务器获取验证码,同时需要ui上显示剩余的时间。在这个间隔期间不能再次点击获取验证码功能。但是在这个间隔过去之后,如果没有收到验证码,我们仍然希望能够再次去获取。

这里使用到的操作符比较多,就不再这里一一介绍了,在实际用到的时候再作具体说明。

传统方式实现,需要借助CountDownTimer去实现倒计时和改变ui状态的功能。

 class CountTimer extends CountDownTimer {        /**         * @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 receive         *                          {@link #onTick(long)} callbacks.         */        public CountTimer(long millisInFuture, long countDownInterval) {            super(millisInFuture, countDownInterval);        }        @Override        public void onTick(long millisUntilFinished) {        // 在每隔1秒时去改变ui,显示剩余时间            smsButton.setText("剩余" + millisUntilFinished / interval + "秒");        }        @Override        public void onFinish() {        //在时间间隔过去后,再次设置按钮可点击设置            smsButton.setEnabled(true);        }    }

通缩上面的Timer辅助类,再结合需要实现倒计时功能的按钮就能达到场景中描述的效果。在点击按钮实现事件处理逻辑的时候设置按钮的可点击状态设置为不可点击,同时将我们初始化好的Timer启动。

使用RxJava实现:

     smsButton.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                //总倒计时秒数                final int count = 60;                //每1秒发射一次数据,设置时间间隔为1秒                Observable.interval(0, 1, TimeUnit.SECONDS)                //设置总时间为60秒,即按钮在60秒内不可再次点击,并且在这段时间内每隔一秒发射一次数据,更新ui                .take(count)                        .observeOn(AndroidSchedulers.mainThread())                        .doOnSubscribe(new Action0() {                            @Override                            public void call() {                                //在数据还在发射期间设置按钮不可点击                                smsButton.setEnabled(false);                            }                        }).map(new Func1<Long, String>() {                    @Override                    public String call(Long integer) {                        //对发射过来的int类型数据进行转换,便于ui显示                        return String.valueOf(count - integer);                    }                }).subscribe(new Subscriber<String>() {                    @Override                    public void onCompleted() {                        //当数据发射完成(即60秒后),设置按钮可点击                        smsButton.setEnabled(true);                    }                    @Override                    public void onError(Throwable e) {                        //错误处理逻辑                    }                    @Override                    public void onNext(String s) {                    //在这里接受发射过来的字符串数据,用于ui显示                        smsButton.setText("剩余" + s + "秒");                    }                });            }        });

总结:上面我们通过比较传统方式和RxJava方式实现了各种效果,可以看出RxJava实现方式逻辑更佳清楚,也更好控制。这里只是对关键代码进行了展示,有什么问题的同学可以去RxJava实现倒计时和关键词搜索找到RxBindingActivity查看源码。也可以在这里进行下载:RxJava实现倒计时和关键词搜索相关文件

ps:在项目中也实现了自动填充获取到的验证码到文本框的功能。需要的可以在项目中找到SmsObserver这个类,进行查看。也可以下载上面的文件查看。

最后,如果大家有什么好的建议,欢迎提出来一起讨论。