양방향 데이터 결합

양방향 데이터 바인딩이란 데이터와 뷰를 직접 연결하여 서로가 서로에게 영향을 주는것입니다.
이를 통해 ViewModel, Activity, XML사이의 상호 작용이 가능해집니다.
실제 코드를 통해 확인해봅시다.

우선 프로젝트 수준 gradle에 데이터바인딩에 대한 종속성을 추가해줍니다.

buildFeatures{
	dataBinding = true
}

다음,뷰모델을 생성하고 나이를 1씩 더하는 함수를 만듭니다.

class MainViewModel : ViewModel() {

    var mutableAge = MutableLiveData(0)

    fun plus() {

        mutableAge.value= mutableAge.value?.plus(1)

    }

}

MainActivity에서는 dataBinding과 MainViewModel을 연결하고, binding.vm= viewModel을 통해 뷰모델과 xml을 연결합니다. 또한 binding.lifecycleOwner= this를 통해 라이프사이클을 맞춰줍니다.

class MainActivity : AppCompatActivity() {

    private lateinit var binding : ActivityMainBinding
    private lateinit var viewModel : MainViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        viewModel = ViewModelProvider(this)[MainViewModel::class.java]

        binding.vm= viewModel
        binding.lifecycleOwner= this
    }
}

마지막으로 xml에서는 버튼을 누를 때마다 나이가 1씩 증가하는 화면을 구현합니다. <data>태그를 통해 이름과 타입을 설정하며, viewModel에서 제공하는 나이 데이터와 1씩 더하는 함수를 연동합니다.

<?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="vm"
            type="com.bokchi.jetpack_rec.MainViewModel" />
    </data>

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="나이"
                android:textSize="80sp"/>

            <TextView
                android:id="@+id/ageArea"
                android:layout_marginTop="100dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="50sp"
                android:text="@{Integer.toString(vm.mutableAge)}"/>

            <Button
                android:id="@+id/plusBtn"
                android:layout_marginTop="10dp"
                android:text="plus"
                android:onClick="@{() -> vm.plus()}"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>


        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

이렇게 구현하면 버튼을 누를 때마다 나이가 1살씩 증가하는 화면을 만들 수 있습니다.