【Android -- RxJava】RxJava2.0 实践（三），优化搜索联想功能

前言

本文使用 debounce 操作符，优化搜索联想功能。

效果图

应用场景

几乎每个应用程序都提供了搜索功能，某些应用还提供了搜索联想。对于一个搜索联想功能，最基本的实现流程为：客户端通过 EditText 的 addTextChangedListener 方法监听输入框的变化，当输入框发生变化之后就会回调 afterTextChanged 方法，客户端利用当前输入框内的文字向服务器发起请求，服务器返回与该搜索文字关联的结果给客户端进行展示。

在该场景下，有几个可以优化的方面：

• 在用户连续输入的情况下，可能会发起某些不必要的请求。例如用户输入了abc，那么按照上面的实现，客户端就会发起a、ab、abc三个请求。
• 当搜索词为空时，不应该发起请求。
• 如果用户依次输入了ab和abc，那么首先会发起关键词为ab请求，之后再发起abc的请求，但是abc的请求如果先于ab的请求返回，那么就会造成用户期望搜索的结果为abc，最终展现的结果却是和ab关联的。

具体实现

这里，我们针对上面提到的三个问题，使用 RxJava2 提供的三个操作符进行了优化：

• 使用 debounce 操作符，当输入框发生变化时，不会立刻将事件发送给下游，而是等待 200ms，如果在这段事件内，输入框没有发生变化，那么才发送该事件；反之，则在收到新的关键词后，继续等待 200ms。
• 使用filter操作符，只有关键词的长度大于 0 时才发送事件给下游。
• 使用switchMap操作符，这样当发起了 abc 的请求之后，即使 ab 的结果返回了，也不会发送给下游，从而避免了出现前面介绍的搜索词和联想结果不匹配的问题。

1. 添加依赖

	//Butter Knife
    implementation 'com.jakewharton:butterknife:10.2.0'
    annotationProcessor 'com.jakewharton:butterknife-compiler:10.2.0'

    //TitleBar
    implementation 'com.github.getActivity:TitleBar:8.6'

    //RxJava
    implementation 'io.reactivex.rxjava2:rxjava:2.2.10'
    implementation 'io.reactivex.rxjava2:rxandroid:2.1.1'

2. 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <com.hjq.bar.TitleBar
        android:id="@+id/title_bar"
        android:layout_width="match_parent"
        android:background="@color/teal_200"
        android:layout_height="?android:attr/actionBarSize"
        app:title="优化搜索联想功能"
        app:titleStyle="bold"
        app:titleSize="18sp"
        app:backButton="false"
        app:titleColor="@color/white"/>

    <EditText
        android:id="@+id/et_search"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/common_edt_bg"
        android:cursorVisible="true"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="14dp"
        android:layout_marginRight="14dp"
        android:hint="请输入手机号"
        android:inputType="phone"
        android:padding="10dp"
        android:drawableLeft="@mipmap/ic_search"
        android:drawablePadding="8dp"
        android:singleLine="true"
        android:textColor="@color/black"
        android:textColorHint="#959595"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/tv_search_result"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="40dp" />
</LinearLayout>

3. 逻辑代码

public class MainActivity extends BaseActivity {
    private static final String TAG = "MainActivity";

    @BindView(R.id.et_search)
    EditText mSearch;

    @BindView(R.id.tv_search_result)
    TextView mTvResult;

    private PublishSubject<String> mPublishSubject;
    private DisposableObserver<String> DisposableObserver;
    private CompositeDisposable mCompositeDisposable;


    @Override
    protected int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initView() {
        mSearch.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void afterTextChanged(Editable editable) {
                startSearch(editable.toString());
            }
        });

        mPublishSubject = PublishSubject.create();
        DisposableObserver = new DisposableObserver<String>() {

            @Override
            public void onNext(String s) {
                mTvResult.setText(s);
            }

            @Override
            public void onError(Throwable throwable) {

            }

            @Override
            public void onComplete() {

            }
        };
        mPublishSubject.debounce(200, TimeUnit.MILLISECONDS).filter(new Predicate<String>() {

            @Override
            public boolean test(String s) throws Exception {
                return s.length() > 0;
            }

        }).switchMap(new Function<String, ObservableSource<String>>() {

            @Override
            public ObservableSource<String> apply(String query) throws Exception {
                return getSearchObservable(query);
            }

        }).observeOn(AndroidSchedulers.mainThread()).subscribe(DisposableObserver);
        mCompositeDisposable = new CompositeDisposable();
        mCompositeDisposable.add(mCompositeDisposable);
    }

    private void startSearch(String query) {
        mPublishSubject.onNext(query);
    }

    private Observable<String> getSearchObservable(final String query) {
        return Observable.create(new ObservableOnSubscribe<String>() {

            @Override
            public void subscribe(ObservableEmitter<String> observableEmitter) throws Exception {
                Log.d(TAG, "开始请求，关键词为：" + query);
                try {
                    Thread.sleep(100 + (long) (Math.random() * 500));
                } catch (InterruptedException e) {
                    if (!observableEmitter.isDisposed()) {
                        observableEmitter.onError(e);
                    }
                }
                Log.d(TAG, "结束请求，关键词为：" + query);
                observableEmitter.onNext("完成搜索，关键词为：" + query);
                observableEmitter.onComplete();
            }
        }).subscribeOn(Schedulers.io());
    }


    @Override
    protected void onDestroy() {
        super.onDestroy();
        mCompositeDisposable.clear();
    }
}