[Kotlin][Android] 안드로이드 RxBinding에 대해서(RxBinding의 사용방법)

안녕하세요 👋

오늘은 제가 프로젝트를 하며 사용했던 RxBinding에 대해서 

포스팅해보려 합니다.

 

먼저

RxBinding이란?

RxBinding은 RxJava와 RxAndroid를 이용해

안드로이드의 위젯이나 View에 Rx를 사용하기 쉽게 해주는 오픈소스입니다. 

대표적으론 TextWatcher의 기능이나 Button Click 이벤트 등이 있습니다.

---

Rxbinding을 통해 가장 많이 사용하는 Operator들로는

throttleFirst() , debounce()가 있습니다.

이 두 함수의 차이점에 대해 우선 설명 드리겠습니다.

 

throttleFirst()

정해진 시간 안에 일어나는 여러 이벤트들은 가장 먼저 호출된 이벤트만 방출하고 그 이후에 들어온 이벤트는 무시하는 Operator입니다.

해당 Operator를 통해 이중 클릭을 방지하는 기능을 많이 구현합니다.

아래는 throttleFirst()를 표현한 Marble Diagram입니다.

throttleFirst() 다이어그램

debounce()

이벤트가 호출되고 정해진 시간이 지난 후에 해당 이벤트를 방출하는 Operator입니다.

아래 Marble Diagram을 보며 설명드리겠습니다.

 

debounce() 다이어그램

위 그림을 보시면 빨간 이벤트가 호출되고 정해진 시간이 지난 후에 빨간 이벤트가 방출되며

노란색과 녹색 이벤트가 호출되었지만, 마지막에 호출된 녹색 이벤트가 호출된 후 정해진 시간이 지난 후에

녹색 이벤트만 방출되는 것을 볼 수 있습니다. 위와 같이 debounce()는 여러 번 이벤트를 호출하여도 가장 마지막에 

호출된 이벤트가 정해진 시간이 지나야 방출이 되는 것입니다.

그렇기에 해당 Operator를 통해 이중 클릭 방지 기능을 구현할 시에는 사용자가 버튼을 클릭 후 정해진 시간이

지나야 만 이벤트가 벌어지는 이상한? 상황이 벌어질 수 있습니다. 😅

그렇기에 해당 Operator는 EditText등과 함께 사용하여 입력값에 대한 유효성 체크를 할 때 자주 사용됩니다. 😎 

---

아울러 위 Operator와 함께 자주 사용하는 위젯의 Operator들을 알아보도록 하겠습니다.

 

clicks()

View에 클릭 이벤트가 발생할 때 Unit객체를 방출하는 Observable을 생성합니다.

주로 Button과 throttleFirst()와 함께 사용합니다.

 

textChanges()

TextView 컴포넌트에 담긴 text가 변경될 때 변경되는 CharSequence를 방출해주는 operator입니다.

EditText 또한 TextView를 상속받기 때문에 주로 EditText와 함께 사용합니다.

 

이렇게 Operator들에 대해 알아보았습니다.

이번에는 Rxbinding을 코드에 어떻게 적용시키는지에 대해 알아보도록 하겠습니다.

---

 

먼저 clicks()의 사용방법과 debounce()와 throttleFirst()가 각각 어떻게 다르게 동작하는지

코드와 영상을 통해 보여드리겠습니다.

 

코드는 아래와 같습니다.

 

우선 gradle에 dependency를 추가해줍니다.

dependencies {
	...
    
    // RxBinding
    implementation "com.jakewharton.rxbinding3:rxbinding:3.1.0"
    
    ...
}

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

      <TextView
        android:id="@+id/debounceClickTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Debounce"
        android:textSize="30sp"
        android:gravity="center"
        />

    <Button
        android:id="@+id/debounceButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/debounceClickTextView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_margin="10dp"
        android:text="debounce"
        />

    <TextView
        android:id="@+id/clickTextViewDebounce"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/debounceButton"
        android:gravity="center"
        android:layout_margin="10dp"
        />

    <TextView
        android:id="@+id/throttleTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/clickTextViewDebounce"
        android:gravity="center"
        android:text="Throttle"
        android:textSize="30sp"
        />

    <Button
        android:id="@+id/throttleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/throttleTextView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_margin="10dp"
        android:text="throttle"
        />

    <TextView
        android:id="@+id/clickTextViewThrottle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/throttleButton"
        android:gravity="center"
        android:layout_margin="10dp"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding
    private lateinit var mCompositeDisposable: CompositeDisposable

    private var mDebounceButtonClicks = 0
    private var mThrottleButtonClicks = 0
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater).also {
            setContentView(it.root)
        }
        addListeners()
    }

    override fun onDestroy() {
        super.onDestroy()
        if(::mCompositeDisposable.isInitialized){
            mCompositeDisposable.clear()
        }
    }

    private fun addListeners() {
        with(binding){
            mCompositeDisposable = CompositeDisposable()

            val debounceButtonDisposable = debounceButton.clicks() // Debounce
                .debounce(1000 , TimeUnit.MILLISECONDS)
                .subscribe({ clickTextViewDebounce.text = (++mDebounceButtonClicks).toString() } , {it.printStackTrace()})

            val throttleButtonDisposable = throttleButton.clicks() // throttleFirst
                .throttleFirst(1000 , TimeUnit.MILLISECONDS)
                .subscribe({ clickTextViewThrottle.text = (++mThrottleButtonClicks).toString() } , {it.printStackTrace()})

            mCompositeDisposable.addAll(debounceButtonDisposable , throttleButtonDisposable)
        }
    }
}

위와 같이 시간을 설정해주고 subscribe()을 통해 발행된 event에서 할 동작을 정의를 해주면 됩니다.

subscribe에 들어가는 2번째 인자는 exception handler로

에러가 발생했을 때에 대한 handler를 정의해주는 부분입니다.

필자는 exception 발생 시 stackTrace를 찍도록 하였습니다.

아울러, 위 보이는 CompositeDisposable에 대해서는 아래에서 한 번에 설명하도록 하겠습니다.

 

시연영상

위 영상에서 보시는 것과 같이

debounce()의 경우에는 7번을 버튼을 눌렀음에도 마지막 동작만 발행이 되어 +1만 한 것을 볼 수 있고,

throttleFirst()의 경우 7번 클릭 시 첫 번째 이벤트에 대해서 발행되고 그 후 1초의 시간이 흐른 뒤에 들어온 이벤트에 대해서

한번 더 발행하여 +2가 된 것을 볼 수 있습니다.

---

이번에는 textChanges()의 사용방법을 확인해보겠습니다.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/inputEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        android:padding="10dp"
        android:layout_margin="10dp"
        />

    <TextView
        android:id="@+id/verificationTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/inputEditText"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_margin="5dp"
        />
        
</androidx.constraintlayout.widget.ConstraintLayout>

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding
    private lateinit var mCompositeDisposable: CompositeDisposable

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater).also {
            setContentView(it.root)
        }
        addListeners()
    }

    override fun onDestroy() {
        super.onDestroy()
        if(::mCompositeDisposable.isInitialized){
            mCompositeDisposable.clear()
        }
    }

    private fun addListeners() {
        with(binding){
            mCompositeDisposable = CompositeDisposable()
            val inputEditTextDisposable = inputEditText.textChanges()
                .debounce(1000 , TimeUnit.MILLISECONDS , AndroidSchedulers.mainThread())
                .subscribe({ verificationTextView.text = String.format("입력된 글자는 : %s입니다." , it) } , {it.printStackTrace()})

            mCompositeDisposable.addAll(inputEditTextDisposable)
        }
    }

 

시연영상

 

위에서 설명했듯 debounce()는 마지막 이벤트만 발행하여 실행하기 때문에 위처럼 EditText에서 입력을 마치고 

1초가 지난 뒤에 TextView에 값을 변경시킨 것을 확인할 수 있습니다.

---

그렇다면 마지막으로 Disposable은 무엇일까요? 🤔

사전적 의미로 Disposable은 '1회성 , 일회용의'라는 뜻으로

Observable 객체를 구독하고 해당 구독이 더 이상 필요하지 않을 때는 구독을 해지해야 하는데

이것을 도와주는 객체가 disposable입니다.

만일, 구독을 해지하지 않고 계속 stream을 남겨 두게 된다면

memory leak이 발생할 가능성이 있으므로 더 이상 해당 구독에 대해 필요하지 않다면

적절하게 구독을 해지해주어야 합니다.

 

구독을 해지하는 방법으로는 2가지 방법이 있습니다.

---

1. dispose() 함수를 통해 직접 disposable객체를 제거한다.

 

2. CopositeDisposable객체를 활용하여 한번에 제거한다.

---

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater).also {
            setContentView(it.root)
        }
        val disposable = binding.button.clicks().subscribe{
        	// something to do 
        }
        disposable.dispose() // 1번 방법
        
    }
}

 

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding
    private lateinit var mCompositeDisposable: CompositeDisposable

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater).also {
            setContentView(it.root)
        }
        val disposable = binding.button.clicks().subscribe{
        	// something to do 
        }
        mCompositeDisposable = CompositeDisposable(disposable)
    }

    override fun onDestroy() {
        super.onDestroy()
        if(::mCompositeDisposable.isInitialized){
            mCompositeDisposable.clear() // 2번 방법
        }
    }

 

각각의 사용 방법은 위 코드를 참고 바랍니다.

CompsiteDisposable 같은 경우에는 모든 Disposable을 한 번에 관리가 

가능하기에 여러 가지 disposable객체를 해지할 때는 해당 객체를 통한 방법이 좋을 것 같습니다. 🤔

 

이상으로 RxBinding에 대한 포스팅을 마치겠습니다.

오늘도 즐코 하세요 :)