[BindingAdapter] 안드로이드 DataBinding에 BindingAdapter 사용법

안드로이드 DataBinding과 BiningAdapter 사용법

  이전 글에서 DataBinding과 LiveData를 같이 사용하는 방법을 알아보았습니다.

DataBinding과 LiveData 같이 사용하는 방법 알아보러가기

 이전 글을 마치면서 BindingAdapter를 잠깐 언급했었는데 오늘은 DataBinding과 LiveData를 쓰면서 BindingAdapter를 사용하는 방법을 알아보도록 하겠습니다. BindingAdapter는 쉽게 말해서 view의 속성을 Custom으로 추가시키는 것인데 BindingAdapter와 LiveData를 함께 사용한다면 개발자입장에서 아주 편하고 강력한 기능을 제공합니다.

 이번예제에 필요한 Kotlin, DataBinding, LiveData에 대한 사용방법을 모르시면 아래 링크들을 참고 해주시기 바랍니다.

Kotlin 기본 문법

안드로이드 DataBinding 기본 사용법

안드로이드 LiveData 기본 사용법

 이제 아래 예제를 통해 BindingAdapter의 기본적인 사용방법에 대해 알아보도록 하겠습니다.

 DataBinding과 LiveData 같이 사용하는 방법 예제를 해보셨으면 이미 다 설정이 다 완료되었겠지만 본문만 보시는 분들을 위해서 다시 설명드리겠습니다. 먼저 DataBinding을 사용하려면 App 수준의 build.gradle 파일에 DataBinding 사용을 위한 코드를 명시해주어야 하고 LiveData를 사용하기 위해서는 androidx를 사용해야 합니다.

1. App 수준의 build.gradle 수정

android {
    ...
    dataBinding {
        enabled = true
    }
}

- android scope에 위 코드를 추가합니다.

implementation 'androidx.appcompat:appcompat:1.1.0'

- LiveData를 사용하기 위해서 위와 같은 종송석이 추가 되어있어야 합니다.

2. xml 코드를 <layout>으로 감싸주기

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

        <variable
            name="activity"
            type="com.imaec.bindingadapterex.MainActivity" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{activity.liveText}"
            app:visible="@{activity.liveVisible}"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/btn_change1"
            app:layout_constraintVertical_chainStyle="packed"/>

        <Button
            android:id="@+id/btn_change1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="visible"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/text_view"
            app:layout_constraintBottom_toTopOf="@id/btn_change2"/>

        <Button
            android:id="@+id/btn_change2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="gone"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btn_change1"
            app:layout_constraintBottom_toBottomOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

- 최상위 Layout을 <layout>으로 감싸줍니다.

- TextView의 visibility가 자동으로 바뀌는 것을 확인하기 위해 Button을 추가해 줬습니다.

- <variable>은 layout에서 사용할 변수 or 객체입니다. 여기서는 MainActivity를 추가해줬습니다.

- TextView의 text 속성에 activity의 객체인 liveText를 세팅해준 모습입니다. liveText는 MainActivity에 정의합니다.

- TextView의 visible 속성은 BindingAdapter를 이용해서 만들어준 속성입니다. 속성의 값에 따라 TextView의 visibility가 바뀌도록 BindingAdapter를 설정합니다.

3. BindingAdapter 구현

BindingAdapters.kt

package com.imaec.bindingadapterex

import android.view.View
import androidx.databinding.BindingAdapter

object BindingAdapters {

    /**
     * View의 visibility를 변경
     * @param view 속성을 사용하는 view
     * @param isVisible visibility를 변경시키는 기준이 되는 값
     */
    @JvmStatic
    @BindingAdapter("visible")
    fun setVisible(view: View, isVisible: Boolean) {
        view.visibility = if (isVisible) View.VISIBLE else View.GONE
    }
}

- BindingAdapter는 class가 아닌 object를 이용하여 만듭니다.

- @JvmStatic : java의 static을 사용하기 위한 Annotation 입니다.

- @BindingAdapter : BindingAdapter 함수를 만들기 위한 Annotation 입니다.

- @BindingAdapter("visible")의 "visible"이 속성 이름이 됩니다.

4. Activity에서 LiveData 변경

MainActivity.kt

package com.imaec.bindingadapterex

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.core.view.isVisible
import androidx.databinding.DataBindingUtil
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import com.imaec.bindingadapterex.databinding.ActivityMainBinding
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    val liveText = MutableLiveData<String>()
    val liveVisible = MutableLiveData<Boolean>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.apply {
            lifecycleOwner = this@MainActivity  // **중요** binding에 LifeCycleOwner을 지정해줘야 LiveData가 실시간으로 변화
            activity = this@MainActivity        // xml 파일에 선언한 activity

            btnChange1.setOnClickListener {
                liveVisible.value = true
            }
            btnChange2.setOnClickListener {
                liveVisible.value = false
            }
        }

        liveText.value = "Hello DataBinding!"
    }
}

- xml에서 visible 속성에 넣어준 liveVisible을 정의

- btnChange1, btnChange2에 따라 liveVisible의 value를 변경시켜줌으로써 visibility 값 변경

5. 결과

 Kotlin 코드에서 TextView의 visibility 속성을 직접 수정하지 않고 liveVisible의 value만 변경해줘도 TextView의 visibility 값이 변경되는 것을 확인할 수 있습니다. 이렇게 android에서 제공해주지 않는 속성을 직접 만들어 사용할 수 있는 것이 BidningAdapter 입니다. 위의 예제를 응용하시면 무궁무진하게 많은 것들을 할 수 있습니다.

 새로운 기술이나 해보지 않은 것들을 한번에 하려면 생각보다 헷갈리는 부분이 많을 것입니다. 하지만 하나하나 공부하고 천천히 구현해보면 생각보다 많이 어렵지 않은 것을 알 수 있습니다. 물론 가르쳐 주는 사수나 선생님 또는 선배가 있다면 더욱 빠르게 익힐 수 있겠지만 혼자서 공부하는 분들도 천천히 하다보면 하나하나 깨닫는 순간이 있을것입니다. 혼자서 공부하시는 분들에게 많은 도움이 됐으면 좋겠습니다!^^

 예제를 보면서 궁금한점이나 잘못된 부분이 있다면 댓글로 달아주세요~!

Kotlin, DataBinding, LiveData 따라하기

Kotlin 기본 문법

안드로이드 DataBinding 기본 사용법

안드로이드 LiveData 기본 사용법

DataBinding과 LiveData 같이 사용하기