🔎 observable 데이터 객체와 작업

observability는 객체가 데이터 변화를 다른 객체에게 알릴 수 있는 능력을 나타냄. 데이터 바인딩 라이브러리를 사용하면 객체, 필드 또는 컬렉션을 관찰 가능하게 만들 수 있음.

데이터 바인딩을 사용하면 데이터 객체를 수정해도 UI가 자동으로 업데이트되지 않음. 이 때 데이터가 변경될 때 다른 객체(리스너)에게 알릴 수 있는 능력을 부여할 수 있음.

관찰 가능한 데이터 객체 중 하나가 UI에 바인딩되고 데이터 객체의 속성이 변경되면 UI가 자동으로 업데이트 됨.

📖 Observable fields

클래스에 속성이 몇 개 없다면 Observable 인터페이스를 구현하는 클래스를 만드는 것보다 제네릭 Observable 클래스와 다음과 같은 원시 타입별 클래스를 사용하여 필드를 관찰 가능하게 만들 수 있음.

• ObservableBoolean
• ObservableByte
• ObservableChar
• ObservableShort
• ObservableInt
• ObservableLong
• ObservableFloat
• ObservableDouble
• ObservableParcelable

Observable 필드는 단일 필드를 가진 독립적 관찰 가능한 객체.

class User {
    val firstName = ObservableField<String>()
    val lastName = ObservableField<String>()
    val age = ObservableInt()
}

필드에 접근하려면 set() 및 get() 메서드를 사용하거나 코틀린 프로퍼티 구문을 사용.

user.firstName = "Google"
val age = user.age

📖 Observable collections

데이터를 보유하는 동적 자료구조를 사용하는 경우, observable collection은 키를 사용하여 이런 구조에 액세스할 수 있게 함.

ObservableArrayMap<String, Any>().apply {
    put("firstName", "Google")
    put("lastName", "Inc.")
    put("age", 17)
}

<data>
    <import type="android.databinding.ObservableMap"/>
    <variable name="user" type="ObservableMap&lt;String, Object&gt;"/>
</data>
…
 <!-- string 키를 사용하는 map-->
<TextView
    android:text="@{user.lastName}" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@{String.valueOf(1 + (Integer)user.age)}"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

integer형 키를 사용할 때 ObservableArrayList를 사용하면 유용.

ObservableArrayList<Any>().apply {
    add("Google")
    add("Inc.")
    add(17)
}

<data>
    <import type="android.databinding.ObservableList"/>
    <import type="com.example.my.app.Fields"/>
    <variable name="user" type="ObservableList&lt;Object&gt;"/>
</data>
…
<TextView
    android:text='@{user[Fields.LAST_NAME]}'
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text='@{String.valueOf(1 + (Integer)user[Fields.AGE])}'
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

📖 Observable objects

개발을 더 쉽게하기 위해 데이터 바인딩 라이브러리는 리스너 등록 메커니즘을 구현하는 BaseObservable 클래스 제공.
BaseObservable을 구현하는 데이터 클래스는 프로퍼티가 변경될 때 알림을 담당.

class User : BaseObservable() {

    @get:Bindable
    var firstName: String = ""
        set(value) {
            field = value
            notifyPropertyChanged(BR.firstName)
        }

    @get:Bindable
    var lastName: String = ""
        set(value) {
            field = value
            notifyPropertyChanged(BR.lastName)
        }
}

데이터 바인딩은 모듈 패키지 내에 BR이라는 이름의 클래스를 생성. 이 클래스는 데이터 바인딩에 사용된 리소스의 ID를 포함함. Bindable 어노테이션은 컴파일 중 BR 클래스 파일에 항목을 생성함.

데이터클래스의 기본 클래스를 변경할 수 없는 경우 PropertyChangeRegistry 객체를 사용하여 리스너를 효율적으로 등록 및 통지할 수 있도록 Observable 인터페이스를 구현할 수 있음.

---

📖 Lifecycle-aware 객체

앱의 레이아웃은 데이터 바인딩 소스에 바인딩할 수 있으며 데이터 변경 사항이 UI에 자동으로 통지됨.
👉 데이터 바인딩이 라이프사이클을 인식하며 UI가 화면에 표시될 때만 트리거됨.

데이터 바인딩은 StateFlow와 LiveData를 지원함.

StateFlow 사용

코틀린 및 코루틴을 사용하는 앱의 경우 데이터 바인딩 소스로 StateFlow 객체를 사용할 수 있음. StateFlow 객체를 사용하기 위해 lifecycle owner를 지정해야 함.

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.lifecycleOwner = this
    }
}

StateFlow와 ViewModel을 다음과 같이 함께 사용할 수 있음.

class ScheduleViewModel : ViewModel() {

    private val _username = MutableStateFlow<String>("")
    val username: StateFlow<String> = _username

    init {
        viewModelScope.launch {
            _username.value = Repository.loadUserName()
        }
    }
}

레이아웃에서 바인딩 표현식을 사용하여 ViewModel 객체의 속성 및 메서드를 해당 뷰에 할당.

<TextView
    android:id="@+id/name"
    android:text="@{viewmodel.username}" />

---

🔎 바인딩 클래스 생성

Data Binding 라이브러리는 레이아웃 변수와 뷰에 액세스할 수 있는 바인딩 클래스를 생성함.
생성된 바인딩 클래스는 레이아웃 변수를 레이아웃 뷰와 연결함.

모든 생성된 바인딩 클래스는 ViewDataBinding 클래스를 상속함.

기본적으로 클래스의 이름은 레이아웃 파일의 이름을 파스칼 케이스로 변환하고 "Binding" 접미사를 추가한 것.

📖 바인딩 객체 생성

바인딩 객체는 레이아웃을 인플레이트한 직후 생성됨. 객체를 레이아웃에 바인딩하는 가장 일반적인 방법은 바인딩 클래스의 정적 메서드를 사용하는 것.
바인딩 클래스의 inflate() 메서드를 사용하여 뷰 계층 구조를 인플레이트하고 객체를 바인딩할 수 있음.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    val binding: MyLayoutBinding = MyLayoutBinding.inflate(layoutInflater)

    setContentView(binding.root)
}

inflate() 메서드의 대안 버전은 LayoutInflater 객체 외에도 ViewGroup 객체를 인수로 사용함.

val binding: MyLayoutBinding = MyLayoutBinding.inflate(getLayoutInflater(), viewGroup, false)

레이아웃이 다른 메커니즘을 사용하여 인플레이트된 경우 다음과 같이 별도로 바인딩할 수 있음.

val binding: MyLayoutBinding = MyLayoutBinding.bind(viewRoot)

사전에 바인딩 타입을 알 수 없는 경우 DataBindingUtil 클래스를 사용하여 바인딩 생성.

val viewRoot = LayoutInflater.from(this).inflate(layoutId, parent, attachToParent)
val binding: ViewDataBinding? = DataBindingUtil.bind(viewRoot)

프래그먼트, 리스트뷰 또는 리사이클러뷰 어댑터 내에서 데이터 바인딩 항목을 사용하는 경우, 바인딩 클래스의 inflate() 메서드 또는 DataBindingUtil 클래스를 사용하는 것이 좋을 수 있음.

val listItemBinding = ListItemBinding.inflate(layoutInflater, viewGroup, false)
// or
val listItemBinding = DataBindingUtil.inflate(layoutInflater, R.layout.list_item, viewGroup, false)

📖 ID를 가진 뷰

<layout xmlns:android="http://schemas.android.com/apk/res/android">
   <data>
       <variable name="user" type="com.example.User"/>
   </data>
   <LinearLayout
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <TextView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{user.firstName}"
   android:id="@+id/firstName"/>
       <TextView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{user.lastName}"
  android:id="@+id/lastName"/>
   </LinearLayout>
</layout>

데이터 바인딩 라이브러리는 레이아웃에서 id를 가진 뷰에 대해 바인딩 클래스에 immutable 필드를 생성함. 라이브러리는 레이아웃의 id를 포함한 모든 뷰를 한번에 뷰 계층 구조에서 추출함.
findViewById()를 호출하는 것보다 빠를 수 있음.

📖 Variables, ViewStubs

1. variables
   데이터 바인딩 라이브러리는 레이아웃에서 선언된 각 변수에 대한 접근자 메서드를 생성함.

<data>
   <import type="android.graphics.drawable.Drawable"/>
   <variable name="user" type="com.example.User"/>
   <variable name="image" type="Drawable"/>
   <variable name="note" type="String"/>
</data>

위 코드에서 user, image 및 note 변수에 대한 setter와 getter를 생성함.

2. ViewStubs

ViewStub은 런타임 시 보이지 않으며 크기가 0이고 레이아웃 리소스를 늦게 인플레이트할 수 있는 뷰. ViewStub이 표시되거나 inflate()가 호출되면 레이아웃 리소스가 인플레이트됨.

그 다음 ViewStub은 상위 뷰를 인플레이트된 뷰로 대체함.
따라서 ViewStub은 setVisibility(int) 또는 inflate()가 호출될 때 까지 뷰 계층 구조에 존재함.

확장된 뷰는 ViewStub의 레이아웃 매개변수를 사용하여 ViewStub의 상위 뷰에 추가됨.
마찬가지로 ViewStub의 inflateId 속성을 사용하여 인플레이트 된 뷰의 id를 정의, 재정의할 수 있음.

     <ViewStub android:id="@+id/stub"
               android:inflatedId="@+id/subTree"
               android:layout="@layout/mySubTree"
               android:layout_width="120dip"
               android:layout_height="40dip" />

이렇게 정의된 ViewStub은 stub 이라는 id를 사용하여 찾을 수 있음.
레이아웃 리소스 mySubTree를 inflate한 후 ViewStub은 상위항목에서 제거됨.

mySubTree를 inflate하여 생성된 뷰는 inflatedId 속성에 지정된 subTree id를 사용하여 찾을 수 있음. inflate된 뷰에는 최종적으로 너비 120dip, 높이 40dip이 할당됨.

     ViewStub stub = findViewById(R.id.stub);
     View inflated = stub.inflate();

inflate()가 호출되면 ViewStub이 inflate된 뷰로 대체되고 inflate된 뷰가 반환됨. 이에 따라서 애플리케이션은 추가적으로 findViewById()를 실행하지 않고도 inflate된 뷰에 대한 참조를 얻을 수 있음

• 사용 이유
  복잡하지만 자주 쓰이지 않는 레이아웃 (다운로드 진행 상황을 보여주는 뷰 등..)이 있을 때 ViewStub을 사용하면 메모리 사용량과 렌더링 시간을 줄일 수 있음.

• ViewStubProxy란
  인플레이션 전후의 ViewStub을 나타내는 클래스이며 ViewStub에 액세스할 수 있음.
  인플레이션 후에는 인플레이션된 레이아웃의 루트 뷰를 사용할 수 있음.
  inflate된 레이아웃에 데이터 바인딩이 있는 경우 뷰에 대한 데이터바인딩에 액세스할 수 있음.

ViewStub이 뷰 계층 구조에서 사라지기 때문에 가비지 컬렉터에 의해 처리될 수 있도록 바인딩 개체의 뷰도 사라져야 함.
뷰는 final이기 때문에 ViewStubProxy 개체는 생성된 바인딩 클래스에서 ViewStub을 대신하여 ViewStub이 있을 때 ViewStub에 대한 액세스를 제공하고 ViewStub이 inflate될 때 inflate된 뷰 계층 구조에 대한 액세스를 제공.

다른 레이아웃을 inflate할 때 새 레이아웃에 대한 바인딩을 설정해야 하므로 ViewStubProxy는 ViewStub OnInflateListener를 수신하고 필요할 때 바인딩을 설정.

한번에 하나의 리스너만 존재할 수 있으므로 ViewStubProxy를 사용하면 바인딩을 설정한 후 호출하는 OnInflateListener를 설정할 수 있음.

📖 Dyname variables

RecyclerView.Adapter와 같은 경우는 특정 바인딩 클래스를 알지 못함. onBindViewHolder()를 호출하는 동안 바인딩 값을 할당해야 함.

override fun onBindViewHolder(holder: BindingHolder, position: Int) {
    item: T = items.get(position)
    holder.binding.setVariable(BR.item, item);
    holder.binding.executePendingBindings(); // 바인딩을 즉시 실행해야 할 경우 강제로 실행하는 메서드
}

📖 바인딩 클래스명 커스텀

모듈 패키지가 com.example.my.app인 경우 바인딩 클래스는 com.example.my.app.databind 패키지에 배치됨.
data element의 클래스 속성을 조정하여 클래스 이름을 바꾸거나 다른 패키지에 배치할 수 있음.

<data class="ContactItem">
    ...
</data>

<data class=".ContactItem"> <!--클래스 이름 앞에 마침표를 추가하여 다른 패키지에 바인딩 클래스 생성 가능-->
    ...
</data>

<data class="com.example.ContactItem"> <!-- 바인딩 클래스를 생성하려는 전체 패키지 이름을 사용할 수도 있음.-->
    ...
</data>

---

🔎 바인딩 어댑터

바인딩 어댑터는 값 설정을 위해 적절한 프레임워크 호출을 수행하는 일을 담당함.
(예: setText() 호출과 같은 속성값을 설정하는 것, setOnClickListener()를 호출하는 것과 같이 이벤트 리스너를 설정하는 것.)

📖 속성 값 설정

바인딩된 값이 변경될 때마다 생성된 바인딩 클래스는 바인딩 표현식을 사용하여 뷰에서 setter 메서드를 호출해야 함. 데이터 바인딩 라이브러리가 자동으로 메서드를 결정할 수 있도록 할 수 있고,
메서드를 명시적으로 선언하거나 커스텀 로직을 제공하여 메서드를 선택할 수 있음.
👉 xml에서 사용자가 만든 속성과 로직을 사용할 수 있음.

메서드 자동 선택

만약 android:text="@{user.name}" 과 같은 표현식이 주어지면 라이브러리는 user.getName()에서 반환된 타입을 허용하는 setText(arg)메서드를 찾음.

user.getName()의 반환 타입이 String인 경우, 라이브러리는 String 인수를 허용하는 setText() 메서드를 찾음. 표현식이 int인수를 반환하는 경우 int 인수를 허용하는 setText() 메서드를 탐색함

데이터 바인딩은 해당 이름의 속성이 존재하지 않는 경우에도 동작. 데이터 바인딩을 사용하여 모든 setter에 대한 속성을 생성할 수 있음.

<!-- DrawerLayout에는 속성이 없지만 많은 setter가 있으며 setScrimColor(int) 및 addDrawerListener(DrawerListener) 메서드를 자동으로 사용함-->
<android.support.v4.widget.DrawerLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:scrimColor="@{@color/scrim}"
    app:drawerListener="@{fragment.drawerListener}">

사용자 정의 메소드 이름 지정

일부 속성에는 이름이 일치하지 않는 setter가 있음. 이런 경우엔 BindingMethods 어노테이션을 사용하여 속성을 setter와 연결할 수 있음.
어노테이션은 클래스와 함께 사용되며 이름이 바뀐 각 메서드마다 BindingMethod 어노테이션을 포함할 수 있음.

@BindingMethods(value = [
    BindingMethod(
        type = android.widget.ImageView::class,
        attribute = "android:tint",
        method = "setImageTintList")])

일반적으로 안드로이드 프레임워크 클래스에서 속성은 이미 네이밍 규칙을 사용하여 구현되고 자동으로 일치하는 메서드를 찾으므로 setter의 이름을 바꿀 필요가 없음.

사용자 정의 로직 부여

일부 속성에는 사용자 정의 바인딩 로직이 필요할 경우가 있음.

android:paddingLeft속성에는 연결된 setter가 없음. 대신 setPadding(left, top, right, bottom)이 제공됨.

BindingAdapter 어노테이션이 포함된 정적 바인딩 어댑터 메서드를 사용하면 속성에 대한 setter가 호출되는 방식을 사용자 지정할 수 있음.

/** 첫 번째 매개변수는 속성과 연관된 뷰의 타입, 두 번째 매개변수는 지정된 속성에 대한 타입.**/
@BindingAdapter("android:paddingLeft")
fun setPaddingLeft(view: View, padding: Int) {
    view.setPadding(padding,
                view.getPaddingTop(),
                view.getPaddingRight(),
                view.getPaddingBottom())
}

여러 속성을 받는 어댑터가 있을 수도 있음.

@BindingAdapter("imageUrl", "error")
fun loadImage(view: ImageView, url: String, error: Drawable) {
    Picasso.get().load(url).error(error).into(view)
}

<ImageView app:imageUrl="@{venue.imageUrl}" app:error="@{@drawable/venueError}" />

속성이 설정될 때 어댑터가 호출되도록 하려면 다음 예에 표시된 대로 어댑터의 requireAll 플래그를 false로 설정.

@BindingAdapter(value = ["imageUrl", "placeholder"], requireAll = false)
fun setImageUrl(imageView: ImageView, url: String?, placeHolder: Drawable?) {
    if (url == null) {
        imageView.setImageDrawable(placeholder);
    } else {
        MyImageLoader.loadInto(imageView, url, placeholder);
    }
}

바인딩 어댑터 메서드는 해당 핸들러에서 이전 값을 사용할 수 있음. 이전 값과 새로운 값을 사용하는 메서드는 속성에 대한 이전 값을 새로운 값보다 먼저 선언해야 함.

@BindingAdapter("android:paddingLeft")
fun setPaddingLeft(view: View, oldPadding: Int, newPadding: Int) {
    if (oldPadding != newPadding) {
        view.setPadding(newPadding,
                    view.getPaddingTop(),
                    view.getPaddingRight(),
                    view.getPaddingBottom())
    }
}

이벤트 핸들러는 다음 예제와 같이 하나의 추상 메서드가 있는 인터페이스 또는 추상 클래스에서만 사용할 수 있음.

@BindingAdapter("android:onLayoutChange")
fun setOnLayoutChangeListener(
        view: View,
        oldValue: View.OnLayoutChangeListener?,
        newValue: View.OnLayoutChangeListener?
) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
        if (oldValue != null) {
            view.removeOnLayoutChangeListener(oldValue)
        }
        if (newValue != null) {
            view.addOnLayoutChangeListener(newValue)
        }
    }
}

<View android:onLayoutChange="@{() -> handler.layoutChanged()}"/>

리스너에 메서드가 여러 개인 경우 여러 리스너로 분할해야 함.

// Translation from provided interfaces in Java:
@TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
interface OnViewDetachedFromWindow {
    fun onViewDetachedFromWindow(v: View)
}

@TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
interface OnViewAttachedToWindow {
    fun onViewAttachedToWindow(v: View)
}

@BindingAdapter(
        "android:onViewDetachedFromWindow",
        "android:onViewAttachedToWindow",
        requireAll = false
)
fun setListener(view: View, detach: OnViewDetachedFromWindow?, attach: OnViewAttachedToWindow?) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR1) {
        val newListener: View.OnAttachStateChangeListener?
        newListener = if (detach == null && attach == null) {
            null
        } else {
            object : View.OnAttachStateChangeListener {
                override fun onViewAttachedToWindow(v: View) {
                    attach.onViewAttachedToWindow(v)
                }

                override fun onViewDetachedFromWindow(v: View) {
                    detach.onViewDetachedFromWindow(v)
                }
            }
        }

        val oldListener: View.OnAttachStateChangeListener? =
                ListenerUtil.trackListener(view, newListener, R.id.onAttachStateChangeListener)
        if (oldListener != null) {
            view.removeOnAttachStateChangeListener(oldListener)
        }
        if (newListener != null) {
            view.addOnAttachStateChangeListener(newListener)
        }
    }
}

📖 객체 변환

자동 객체 변환

바인딩 표현식에서 개체가 반환되면 라이브러리는 속성 값을 설정하는데 사용되는 메서드를 선택.
개체는 선택한 메서드의 매개변수 타입으로 캐스팅됨.

<TextView
   android:text='@{userMap["lastName"]}'
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

object.key 표기법을 사용하여 맵의 값을 참조할 수도 있음.
@{userMap["lastName"]}을 @{userMap.lastName}으로 바꿀 수 있음.

위 예시의 userMap 객체는 android:text 속성의 값을 설정하는 데 사용되는 setText(CharSequence) 메서드에 있는 매개변수 유형으로 자동으로 캐스팅되는 값을 반환함.

매개변수 유형이 모호할 경우 표현식에서 반환 유형을 캐스팅할 것.

사용자 정의 변환

뷰의 android:Background 속성은 Drawable을 기대하지만 지정된 색상 값은 정수.

<View
   android:background="@{isError ? @color/red : @color/white}"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>

Drawable이 예상되고 정수가 반환될 때마다 int를 ColorDrawable로 변환.
BindingConversion 어노테이션과 함께 정적 메서드를 사용.

@BindingConversion
fun convertColorToDrawable(color: Int) = ColorDrawable(color)

바인딩 표현식에 제공되는 값 타입은 동일한 타입이어야 함.

// The @drawable and @color represent different value types in the same
// expression, which causes a build error.
<!-- 에러가 일어나는 코드-->
<View
   android:background="@{isError ? @drawable/error : @color/white}"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>