[RxJava] EditText + Debounce 로 검색창 만들기 #코틀린

Debounce

 

debounce는 그림에서 보는 것처럼 지정한 시간 안에 다른 동작이 있을 경우 이전 동작은 취소하고 이후 동작만 return하는 operator이다. (이후 동작에서도 지정한 시간 안에 개입이 있다면 이를 취소한다.)

 

이는 검색창을 만들때 유용하다. 버튼을 클릭해서 만드는 검색이 아니라 SearchView처럼 단어가 입력되는 대로 결과를 반환하는 검색에 적합하다.

 

이때 모든 문자의 입력마다 call을 보내고 return을 받는다면 굉장히 무거운 동작이 될 수 있는데 

debounce는 이러한 문제 해결에 도움을 준다.

 

 

 

2. 구현 방법

 

 

1) gradle 추가

 

//rxjava
implementation 'io.reactivex.rxjava3:rxjava:3.0.3'
implementation 'io.reactivex.rxjava3:rxandroid:3.0.0'

 

 

2) observable 구조 잡기

 

val observableTextQuery = Observable
            .create(/* observable 추가 */)
            .debounce(500, TimeUnit.MILLISECONDS)  //입력 후 0.5간 추가 입력이 없어야만 작동
            .subscribeOn(Schedulers.io())  //새로운 스레드에서 작업

 

 

 

3) observable.create() 내용 채우기

 

- textWatcher를 활용하여 text 입력을 listen하여 넘긴다.

 

   val observableTextQuery = Observable
            .create(ObservableOnSubscribe { emitter: ObservableEmitter<String>? ->
            movieNameET.addTextChangedListener(object : TextWatcher{
                override fun afterTextChanged(s: Editable?) {
                }

                override fun beforeTextChanged(
                    s: CharSequence?,
                    start: Int,
                    count: Int,
                    after: Int
                ) {
                    emitter?.onNext(s.toString())
                }

                override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
                }

            })
        })
            .debounce(500, TimeUnit.MILLISECONDS)
            .subscribeOn(Schedulers.io())  

 

 

 

 

4) observable 구독하기

 

        observableTextQuery.subscribe(object : Observer<String> {
            override fun onComplete() {
            }

            override fun onSubscribe(d: Disposable?) {
            }

            override fun onNext(t: String) {
                getMovieList(t) //네트워크 요청
            }

            override fun onError(e: Throwable?) {
            }

        })

 

 

 

+RxBinding으로 코드 줄이기

 

1)gradle 추가

 

//rx binding
implementation "com.jakewharton.rxbinding3:rxbinding:3.0.0-alpha2"

 

 

2)obervable + 구독

 

val observableTextQuery = movieNameET.textChanges()
            .debounce(500, TimeUnit.MILLISECONDS)
            .subscribeOn(Schedulers.io())
            .subscribe { charSequence ->
                getMovieList(charSequence.toString())
            }

 

코드가 정말 짧아졌다.

 

*rxBinding을 사용할 경우 rxjava3의 스케줄러를 사용할 수 없다.

 

 

 

 

참고 자료

https://codingwithmitch.com/courses/rxjava-rxandroid-for-beginners/transformation-operators-debounce/

https://tourspace.tistory.com/300