🔎 아키텍처 구성요소에 레이아웃 뷰 바인딩하기

💡 LiveData를 사용하여 데이터 변경사항을 UI에 알리기

LiveData 개체를 데이터 바인딩 소스로 사용하여 데이터 변경사항을 UI에 자동으로 알릴 수 있음.

Observable 필드와 같은 Observable을 구현하는 객체와 달리 LiveData 객체는 데이터 변경 사항을 구독하는 Observer의 수명주기를 알고 있음.

바인딩 클래스와 함께 LiveData 개체를 사용하려면 lifecycle owner를 지정하여 LiveData 개체의 범위를 정의해야 함.

class ViewModelActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // Inflate view and obtain an instance of the binding class.
        val binding: UserBinding = DataBindingUtil.setContentView(this, R.layout.user)

        // Specify the current activity as the lifecycle owner.
        binding.setLifecycleOwner(this)
    }
}

ViewModel 컴포넌트를 사용하여 데이터를 레이아웃에 바인딩할 수 있음.
ViewModel 컴포넌트에서는 LiveData 개체를 사용하여 데이터를 변환하거나 여러 데이터 소스를 병합하는 것이 가능.

class ScheduleViewModel : ViewModel() {
    val userName: LiveData

    init {
        val result = Repository.userName
        userName = Transformations.map(result) { result -> result.value }
    }
}

💡 ViewModel을 사용하여 UI관련 데이터 관리

데이터 바인딩 라이브러리는 ViewModel 컴포넌트와 원활하게 동작.
데이터 바인딩 라이브러리와 함께 ViewModel 구성 요소를 사용하면 UI 로직을 레이아웃 외부의 컴포넌트로 이동할 수 있으므로 테스트하기가 용이해짐.

데이터 바인딩 라이브러리는 필요할 때 뷰가 데이터 소스에 바인딩되거나 바인딩 해제되도록 보장함.

• 데이터 바인딩 라이브러리와 ViewModel 컴포넌트 사용하기

1. ViewModel 클래스에서 상속되는 컴포넌트를 인스턴스화 시킴.
2. 바인딩 클래스의 인스턴스를 얻음.
3. ViewModel 컴포넌트를 바인딩 클래스의 속성에 할당

class ViewModelActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // Obtain the ViewModel component.
        val userModel: UserModel by viewModels()

        // Inflate view and obtain an instance of the binding class.
        val binding: UserBinding = DataBindingUtil.setContentView(this, R.layout.user)

        // Assign the component to a property in the binding class.
        binding.viewmodel = userModel
    }
}

<CheckBox
    android:id="@+id/rememberMeCheckBox"
    android:checked="@{viewmodel.rememberMe}"
    android:onCheckedChanged="@{() -> viewmodel.rememberMeChanged()}" />

💡 Observable ViewModel을 사용하여 바인딩 어댑터 효과적으로 제어

Observable 인터페이스를 구현하는 ViewModel 컴포넌트를 사용하여 데이터 변경 사항을 다른 앱 컴포넌트에 알릴 수 있음.

Observable을 구현하는 ViewModel 구성 요소를 사용하면 앱의 바인딩 어댑터를 더 효과적으로 제어할 수 있음.

Observable ViewModel 컴포넌트를 구현하려면 ViewModel 클래스를 상속하고 Observable 인터페이스를 구현하는 클래스를 만들어야 함.

addOnPropertyChangedCallback() 및 RemoveOnPropertyChangedCallback() 메서드를 사용하여 Observer가 알림을 구독하거나 구독 취소할 때 사용자 정의 로직을 제공할 수 있음.

또한 notifyPropertyChanged() 메서드에서 속성이 변경될 때 실행되는 사용자 지정 로직을 제공할 수 있음.

/**
 * A ViewModel that is also an Observable,
 * to be used with the Data Binding Library.
 */
open class ObservableViewModel : ViewModel(), Observable {
    private val callbacks: PropertyChangeRegistry = PropertyChangeRegistry()

    override fun addOnPropertyChangedCallback(
            callback: Observable.OnPropertyChangedCallback) {
        callbacks.add(callback)
    }

    override fun removeOnPropertyChangedCallback(
            callback: Observable.OnPropertyChangedCallback) {
        callbacks.remove(callback)
    }

    /**
     * Notifies observers that all properties of this instance have changed.
     */
    fun notifyChange() {
        callbacks.notifyCallbacks(this, 0, null)
    }

    /**
     * Notifies observers that a specific property has changed. The getter for the
     * property that changes must be marked with the @Bindable annotation to
     * generate a field in the BR class to be used as the fieldId parameter.
     *
     * @param fieldId The generated BR id for the Bindable field.
     */
    fun notifyPropertyChanged(fieldId: Int) {
        callbacks.notifyCallbacks(this, fieldId, null)
    }
}

---

🔎 양방향 데이터 바인딩

단방향 데이터 바인딩을 사용할 경우 속성에 값을 설정하고 해당 속성의 변경에 반응하는 리스너를 설정할 수 있음.

<CheckBox
    android:id="@+id/rememberMeCheckBox"
    android:checked="@{viewmodel.rememberMe}"
    android:onCheckedChanged="@{viewmodel.rememberMeChanged}"
/>

양방향 바인딩은 다음과 같이 작성할 수 있음.
@={} 표기를 통해 속성에 대한 데이터 변경을 수신하는 동시에 사용자 업데이트를 수신함.

<CheckBox
    android:id="@+id/rememberMeCheckBox"
    android:checked="@={viewmodel.rememberMe}"
/>

백업 데이터의 변경 사항에 반응하기 위해 레이아웃 변수를 Observable(보통 BaseObservable)로 구현하고 @Bindable 어노테이션을 사용.

class LoginViewModel : BaseObservable {
    // val data = ...

    @Bindable
    fun getRememberMe(): Boolean {
        return data.rememberMe
    }

    fun setRememberMe(value: Boolean) {
        // Avoids infinite loops.
        if (data.rememberMe != value) {
            data.rememberMe = value

            // React to the change.
            saveData()

            // Notify observers of a new value.
            notifyPropertyChanged(BR.remember_me)
        }
    }
}

💡 사용자 정의 속성을 사용하는 양방향 데이터 바인딩

사용자 정의 속성과 함께 양방향 데이터 바인딩을 사용하려면 @InverseBindingAdapter 및 @InverseBindingMethod 어노테이션을 사용해야함.

1. @BindingAdapter를 사용하여 초기값을 설정하고 값이 변경되면 업데이트하는 메서드에 어노테이션을 달아줌.

@BindingAdapter("time")
@JvmStatic fun setTime(view: MyView, newValue: Time) {
    // Important to break potential infinite loops.
    if (view.time != newValue) {
        view.time = newValue
    }
}

2. @InverseBindingAdapter를 사용하여 뷰에서 값을 읽는 메서드에 어노테이션을 달아줌.

@InverseBindingAdapter("time")
@JvmStatic fun getTime(view: MyView) : Time {
    return view.getTime()
}

여기에서 데이터 바인딩은 데이터가 변경될때 수행할 작업(@BindingAdapter 어노테이션이 달린 메서드)과 뷰 속성이 변경될 때 호출할 작업(@InverseBindingListener 호출)을 알고 있지만,

속성이 언제 어떻게 변경되는지 알 수 없으므로 뷰에 리스너를 설정해야함. 리스너를 설정하는 메서드에 @BindingAdapter 어노테이션을 추가.

@BindingAdapter("app:timeAttrChanged")
@JvmStatic fun setListeners(
        view: MyView,
        attrChange: InverseBindingListener //InverseBindingListener 매개변수로 사용.
        //데이터 바인딩 시스템에 속성이 변경되었음을 알려준 후 @InverseBindingAdapter 등을 사용한 어노테이션이 달린 메서드 호출을 시작할 수 있음.
) {
    // Set a listener for click, focus, touch, etc.
}

• 더 참고할 페이지
  공식홈페이지
  참고1
  참고2

---

💡 컨버터

View 객체에 바인딩된 변수를 표시하기 전에 변환해야하는경우 Converter 개체 사용 가능.

<EditText
    android:id="@+id/birth_date"
    android:text="@={Converter.dateToString(viewmodel.birthDate)}"
/>

양방향 데이터 바인딩이 제공되므로 역변환을 하는 기능도 필요함.

컨버터에 @InverseMethod 어노테이션을 추가한 후 이 어노테이션이 역컨버터를 참조하도록 함.

object Converter {
    @InverseMethod("stringToDate")
    @JvmStatic fun dateToString(
        view: EditText, oldValue: Long,
        value: Long
    ): String {
        // Converts long to String.
    }

    @JvmStatic fun stringToDate(
        view: EditText, oldValue: String,
        value: String
    ): Long {
        // Converts String to long.
    }
}

💡 양방향 데이터 바인딩을 사용한 무한 루프

양방향 데이터 바인딩을 사용할 때 무한 루프가 발생하지 않도록 주의해야 함

유저가 속성 변경 -> @InverseBindingAdapter가 사용된 메서드가 호출 -> @BindingAdapter가 사용된 메서드 호출 -> @InverseBindingAdapter가 사용된 메서드에 대한 또 다른 호출 트리거

따라서 @BindingAdapter가 사용된 메서드의 새 값과 이전 값을 비교하여 무한 루프를 방지하는 것이 중요.

+) @BindingAdapter @InverseBindingAdapter 내용 정리하기