JetPack AAC: DataBinding

Data Binding 

---

LiveData 와 DataBinding ? 

둘 다  데이터가 변경되는지 관찰하면서 변경될 때 반응하는 방법을 제공한다.

그러나 둘의 사용법에서의 차이가 존재한다. [스택오버플로 글 참고하기]

UI 상의 변화를 실시간으로 관찰하고 반영하고자 한다.   👉 DataBinding

백그라운드에서 데이터를 관찰하고 관리한다.  👉 LiveData  [좀 더 자세히 보기]

그리고, LiveData는 LifeCycleOwner를 사용해줘야 한다. 

간단하게 이렇게 인식하고 활용하자.

---

1. 원하는 화면에서 데이터 묶기 기능 추가하기 

먼저, 데이터 묶기를 시도할 화면이 필요하다.

xml 코드상에 아래의 예시와 같이 작성한다. 

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    
    <data>
        <variable
            name="viewModel"
            type="com.bignerdranch.android.beatbox.SoundViewModel" />
    </data>
    
    <Button
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:text="@{viewModel.title}"
        tools:text="Sound name"
        />
</layout>

구체적인 설명

1. <layout> 태그를 xml 코드 전체를 감싼다.  xmlns 부분은 layout태그로 이동시킨다.

2. <layout> 태그 안에 <data> 태그를 넣어준다. 

3. <data> 태그 안에, <variable> 태그를 넣어준다. 해당 태그의 name과 type을 설정해준다. 

    위의 코드의 경우 SoundViewModel 이라는 클래스와 xml 를 연동해주는 것이라 보면된다.

    type은 구체적인 연동 클래스를 나타낸다.

    name의 경우 해당 클래스를 상징하는 이름을 적어주면 된다. 

4. 이제 원하는 객체 뷰를 연동 시킨다.  Button의 text부분에 "@{viewModel.title}" 이런 식으로 작성하면 된다. 

    viewModel에 해당하는  뷰모델 클래스에서 설정한 title이라는 속성을 사용하는 것이다. 

 

이 표현식은 람다식으로도 가능하다. 

android:onClick = "@{(view) -> viewModel.onButtonClick()}"

"@{() -> viewModel.onButtonClick()}" 이렇게, 활용할 수 있다. 

 

백틱(`)  기호를 사용할 수도 있다.

android:text = "@{`File name: ` + viewModel.title}"

 

null 처리 연산도 가능하다.

android:text = "@{`File name: ` + viewModel.title ??  `No file`}"

이렇게 하면 뷰모델 혹은 객체 클래스와 레이아웃 xml 의 연동이 마무리 된다. 

---

2. DataBinding 과 Observable

라이브 데이터와 데이터 바인딩 둘 다, 관찰할 수 있다는 기능이 있다. 

이러한 기능을 구현하는 방법은 LiveData를 쓰거나, 데이터바인딩의  Observable인터페이스를 사용한다. 

즉, 단순히 연결만 한다고 끝이 아니라는 것이다. 

이러한 인터페이스를 통해, 뷰모델이나 데이터 처리를 담당하는 클래스에서 리스너를 설정해줄 수 있다. 

 

묶여진 데이터가 변경되면 자동으로 콜백 호출을 받을 수 있다는 의미이다. Observable 구현하기 

package com....

import androidx.databinding.BaseObservable
import androidx.databinding.Bindable

class SoundViewModel : BaseObservable(){

    var sound: Sound? = null
        set(sound) {
            field = sound
            notifyChange()
        }

    @get:Bindable
    val title: String?
        get() = sound?.name
}

위의 뷰모델은 jetpack aac의 viewmodel과는 다르다.

데이터 묶임을 한 레이아웃의 처리를 담당해주는 곳이다. 

BaseObservable() 이 서브 클래스로 추가 된 상태로 설정해준다. 

이 후, 객체 클래스(데이터 클래스 등) 에 해당되는 객체를 생성해주고, set, get()의 기능을 추가하여 원하는 형태로 구현한다. 

특이한 점은 @get:Bindable이라는 애노테이션이 붙어있는 것이다. 

 

이 부분을 자세히 보면, title이라는 string 선언부분이 있다. 방금 이 부분은 xml 상에 지정한 viewModel.title 부분이라고 보면된다. 이 부분이 변화하는 경우 이곳에 get() 이 그 변경값을 sound.name에 할당 된 뒤 set(sound)부분을 통해 값이 변경된 것을 감지하는  notifyChange()를 사용하여 값을 변경해준다. 

 

---

데이터 묶기를 레이아웃에 사용하면 가장 좋은 점은 FindViewById() 를 안써도 된다.