[Android] DataBinding이란?

DataBinding?

• 데이터 바인딩이란 xml에 Data를 연결하는 작업을 말합니다.
• Android JetPack 라이브러리 중 하나입니다.
• findViewById를 사용하지 않아도 되며, 주로 MVVM패턴, LiveData와 함께 사용합니다. 단, 필수는 아닙니다.
• Data연결을 사용하지 않는다면 이전 포스팅인 ViewBinding에 대해서 알아보는 것이 좋습니다.
• ryan94.tistory.com/9

ViewBinding (뷰바인딩)

 

DataBinding 사용법

버튼을 누르면 텍스트뷰의 텍스트가 변경되는 것과 뷰 모델을 사용해서 간단하게 값을 변경하는 것을 해보겠습니다.

 

먼저, 데이터 바인딩을 사용하기 위해서는 다음과 같은 작업이 필요합니다.

 

build.gradle(Module: appName) 안에 DataBinding과 Plugin을 추가하여야 합니다.

 

plugin추가

//구버전 안드로이드스튜디오
apply plugin: 'kotlin-kapt'

//최신버전안드로이드 스튜디오
plugins {
    id 'kotlin-kapt'
}

Databinding추가

buildFeatures {
        dataBinding = true
}

 

main.xml

<?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">

    <TextView
        android:id="@+id/textStatus"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Hello World!"
        android:gravity="center"
        app:layout_constraintWidth_percent="0.8"
        app:layout_constraintHeight_percent="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/changeButton"/>

    <Button
        android:id="@+id/changeButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintHeight_percent="0.2"
        app:layout_constraintTop_toBottomOf="@id/textStatus"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

mainActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.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">
    
    <data>
        <variable
            name="main"
            type="com.test.myapplication.MainActivity" />
    </data>

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

        <TextView
            android:id="@+id/textStatus"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:gravity="center"
            android:text="Hello World!"
            app:layout_constraintBottom_toTopOf="@id/changeButton"
            app:layout_constraintHeight_percent="0.5"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.8" />

        <Button
            android:id="@+id/changeButton"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHeight_percent="0.2"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textStatus"
            app:layout_constraintWidth_percent="0.5" />

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

 

액티비티도 다음과같이 변경합니다.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        binding.main = this@MainActivity
        
        changeText()
    }

    private fun changeText(){
        binding.changeButton.setOnClickListener {
            binding.textStatus.text = "Hello DataBinding!"
        }
    }

}

이렇게 하면 버튼을 누를 때, Hellow World가 Hello DataBinding으로 바뀌는 것을 보실 수 있습니다.

 

다음은 뷰 모델을 이용한 데이터 변경입니다.

class TestViewModel : ViewModel() {

    val isChange get() = _isChange
    private val _isChange: MutableLiveData<Boolean> = MutableLiveData()

    init {
        _isChange.postValue(false)
    }

    fun changeStatus(){
        _isChange.value = !_isChange.value!!
    }

}

 

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">

    <data>
        <variable
            name="viewmodel"
            type="com.test.myapplication.TestViewModel" />
    </data>

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

        <TextView
            android:id="@+id/textStatus"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:gravity="center"
            android:text="@{viewmodel.isChange()? @string/helloDataBinding : @string/helloWorld}"
            app:layout_constraintBottom_toTopOf="@id/changeButton"
            app:layout_constraintHeight_percent="0.5"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.8" />

        <Button
            android:id="@+id/changeButton"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHeight_percent="0.2"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textStatus"
            app:layout_constraintWidth_percent="0.5" />

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

 

액티비티도 다음과같이 변경합니다.

class MainActivity : AppCompatActivity() {

    private val testViewModel by viewModels<TestViewModel>()
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        binding.viewmodel = testViewModel
        binding.lifecycleOwner = this@MainActivity

        changeText()
    }

    private fun changeText(){
        binding.changeButton.setOnClickListener {
            testViewModel.changeStatus()
        }
    }

}

 

이렇게 작성하면, 텍스트가 변경됨을 알 수 있습니다.

 

※ by viewModels를 사용하기 위해서는 액티비티에서는 Activity ktx가 필요하고, 프래그먼트에서는 Fragment ktx가 필요합니다.

※ 글을 작성한 현시점(2021-01-13) 기준 Activity ktx의 버전은 1.1.0 Fragment ktx의 버전은 1.2.5입니다.

 

※ 디펜던시에 다음을 추가하면 됩니다.

android {
    ...

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }

}

dependencies {
    def activity_version = "1.1.0"
    implementation "androidx.activity:activity-ktx:$activity_version"
    
    def fragment_version = "1.2.5"
    implementation "androidx.fragment:fragment-ktx:$fragment_version"
}

 

Fragment Ktx

developer.android.com/jetpack/androidx/releases/fragment?hl=ko

Fragment  |  Android 개발자  |  Android Developers

Activity Ktx

developer.android.com/jetpack/androidx/releases/activity?hl=ko

활동  |  Android 개발자  |  Android Developers

DataBinding

developer.android.com/topic/libraries/data-binding?hl=ko

데이터 결합 라이브러리  |  Android 개발자  |  Android Developers