DataBinding을 통해 LiveData 연결하기

랜덤으로 과일이름과 글자순서가 섞이는 앱

'랜덤으로 과일과 글자순서가 섞이는 앱'을 만듬으로서 dataBinding을 통해 liveData를 ui에 연결하는법을 알아보려고 한다

'next'버튼을 누르면 랜덤의 과일이 가장 위 텍스트에 나오고, 나머지 아래 두 텍스트에는 각각 다른방식으로 그 과일의 글자를 랜덤으로 섞어주는 앱을 만들것이다.

우선 데이터 바인딩을 설정해주고

build.gradle

buildFeatures {
    dataBinding = true
}

랜덤으로 나올 과일 이름을 TestData란 파일에 리스트로 넣어준다.

TestData.kt

val testDataList : List<String> = listOf(
    "apple",
    "strawberry",
    "pineapple",
    "peach",
    "grape",
    "melon",
    "mango",
)

메인 엑티비티에서 뷰모델과 데이터바인딩을 설정하고, 이를 UI에 연결하기 위해 binding.vm과 binding.lifecycleOwner를 설정해줍니다.

여기서
binding.vm = viewModel 는 레이아웃xml에서 뷰모델의 속성에 직접 접근할 수 있게 만듭니다. 여기서 속성이란 객체지향에서 필드나 데이터를 의미한다. 즉 레이아웃 xml에서 viewModel의 필드나 데이터를 직접사용할 수 있게된다는 말이다.

binding.lifecycleOwner = this는 생명주기를 라이브데이터에 알려줍니다. 액티비티가 활성상태가 아닌데 ui를 업데이트를 하려고하면 충돌이나 버그가 일어날 수 있기 때문에 액티비티의 생명주기를 알려줌으로서 액티비티가 활성상태일때만 업데이트를 하도록 만들어줍니다.
참고로 lifecycleOwner란 라이브데이터객체가 액티비티나 프래그먼트와 같은 화면 컴포넌트의 생명주기의 상태를 관찰하게 할 수있게 해주는 속성입니다.

MainActivity.kt

class MainActivity : AppCompatActivity() {

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

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        viewModel = ViewModelProvider(this).get(MainViewModel::class.java)
        binding.vm = viewModel
        binding.lifecycleOwner = this

        binding.next.setOnClickListener {
            viewModel.getNextData()
        }
    }
}

그리고 데이터를 연결해줄 레이아웃 xml을 작성합니다.

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="vm"
            type="com.choidaehwan.viewmodellivedatalifecycleowner.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">

            <TextView
                android:text="@{vm.liveWord}"
                android:textSize="50sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <TextView
                android:text="@{vm.randomLiveWord}"
                android:textSize="50sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <TextView
                android:text="@{vm.switchMap}"
                android:textSize="50sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <Button
                android:id="@+id/next"
                android:text="next"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>