🔎 데이터 바인딩이란

프로그래밍적으로가 아닌 선언적 형식을 사용하여 앱의 데이터 소스와 레이아웃 UI 컴포넌트를 바인딩할 수 있도록 허용하는 라이브러리.

레이아웃은 종종 액티비티에서 UI 프레임워크 메서드를 호출하는 코드와 함께 정의됨.

findViewById<TextView>(R.id.sample_text).apply {
    text = viewModel.userName
}

하지만 Data Binding 라이브러리를 사용하여 레이아웃 파일에서 위젯에 직접 텍스트를 할당할 수 있음.

<TextView
    android:text="@{viewmodel.userName}" />

💡 장점

레이아웃 파일에서 컴포넌트를 바인딩하면 액티비티에서 많은 UI 프레임워크 호출을 제거하여 액티비티를 더 간단하고 유지 관리하기 쉽게 만들 수 있음.

👉 앱의 성능을 향상시키고 메모리 누수와 널 포인터 예외를 방지.

📝 사용 환경 설정

앱 모듈의 build.gradle 파일에서 dataBinding 빌드 옵션 활성화.

android {
    ...
    buildFeatures {
        dataBinding true
    }
}

📝 레이아웃 및 바인딩 표현식

표현식 언어를 사용하면 변수를 레이아웃의 뷰에 연결하는 표현식을 작성할 수 있음.
데이터 바인딩 라이브러리는 레이아웃 뷰를 데이터 객체와 자동으로 연결하기 위해 필요한 클래스를 자동으로 생성함. 라이브러리는 레이아웃에서 사용할 수 있는 imports, variables 및 includes 같은 기능 제공.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="viewmodel"
            type="com.myapp.data.ViewModel" />
    </data>
    <ConstraintLayout... /> <!-- UI layout's root element -->
</layout>

데이터 바인딩 레이아웃 파일은 layout 루트 태그로 시작하며, data element와 view root element가 이어서 작성됨. view element는 일반 레이아웃 파일과 동일하게 작성.

예시 코드)

<?xml version="1.0" encoding="utf-8"?>
<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}"/>
       <TextView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{user.lastName}"/>
   </LinearLayout>
</layout>

레이아웃 내에서의 표현식은 @{} 구문을 사용하여 속성 프로퍼티에 작성됨.

<TextView android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@{user.firstName}" />

---

📚 데이터 바인딩

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

    val binding: ActivityMainBinding = DataBindingUtil.setContentView(
            this, R.layout.activity_main)

    binding.user = User("Test", "User") //런타임 시 UI에 Test user를 표시
}

각 레이아웃 파일에 대해 바인딩 클래스가 생성됨. 기본적으로 클래스 이름은 레이아웃 파일의 이름을 파스칼 표기법으로 변환한 것이며 여기에 Binding 접미사가 추가됨.(뷰 바인딩과 동일)

LayoutInflater를 사용하여 뷰를 가져올 수도 있음.

val binding: ActivityMainBinding = ActivityMainBinding.inflate(getLayoutInflater())

Fragment, ListView 또는 RecyclerView 어댑터 내에서 데이터 바인딩 항목을 사용하는 경우, 바인딩 클래스 또는 DataBindingUtil 클래스의 inflate() 메서드를 사용할 수 있음.

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

---

📚 표현식 언어

다음 연산자를 표현식 언어에서 사용할 수 있음.

• Mathematical: + - / * %
• String concatenation: +
• Logical: && ||
• Binary: & | ^
• Unary: + - ! ~
• Shift: >> >>> <<
• Comparison: == > < >= <= (the < needs to be escaped as <)
• instanceof
• Grouping: ()
• Literals, such as character, String, numeric, null
• Cast
• Method calls
• Field access
• Array access: []
• Ternary operator: ?:

android:text="@{String.valueOf(index + 1)}"
android:visibility="@{age > 13 ? View.GONE : View.VISIBLE}"
android:transitionName='@{"image_" + id}'

📚 널 병합 연산자

널 병합 연산자 (??)는 왼쪽 피연산자가 null이 아닌 경우 왼쪽을 선택하고, 왼쪽이 null인 경우 오른쪽을 선택함.

android:text="@{user.displayName ?? user.lastName}"

<!--아래 코드와 동일한 코드임-->
android:text="@{user.displayName != null ? user.displayName : user.lastName}"

📚 프로퍼티 참조, 뷰 참조

표현식은 필드, 게터, ObservableField 객체에 대해 동일한 형식을 사용하여 클래스 내 속성을 참조할 수 있음.

android:text="@{user.lastName}"

다음 구문을 사용하여 레이아웃 내의 다른 뷰를 ID로 참조할 수 있음.
⭐ 바인딩 클래스는 ID를 카멜 케이스로 변환.

android:text="@{exampleText.text}"

<EditText
    android:id="@+id/example_text"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"/>
<TextView
    android:id="@+id/example_output"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@{exampleText.text}"/>

📚 컬렉션

배열, 리스트, 희소 리스트 및 맵과 같은 일반 컬렉션에 [] 연산자를 사용하여 편하게 접근 가능.

<data>
    <import type="android.util.SparseArray"/>
    <import type="java.util.Map"/>
    <import type="java.util.List"/>
    <variable name="list" type="List&lt;String>"/>
    <variable name="sparse" type="SparseArray&lt;String>"/>
    <variable name="map" type="Map&lt;String, String>"/>
    <variable name="index" type="int"/>
    <variable name="key" type="String"/>
</data>
...
android:text="@{list[index]}"
...
android:text="@{sparse[index]}"
...
android:text="@{map[key]}"

⭐ xml 문법을 올바르게 작성하기 위해 < 문자를 이스케이프해야 함. List<String> 대신 List<String> 와 같이 작성. 맵에서 값을 참조할 때 object.key 표기법 사용 가능.
예를 들어 @{map[key]}를 @{map.key}로 대체

📚 이벤트 처리

데이터 바인딩을 사용하면 뷰에서 전달되는 이벤트를 처리하는 표현식으로 작성할 수 있음.

💡 이벤트 처리를 위한 두 가지 메커니즘

1. Method references
   표현식이 메서드 참조로 실행되면 데이터 바인딩은 메서드 참조와 소유자 객체를 리스너에 래핑하고 해당 리스너를 대상 뷰에 설정함.
   표현식이 null로 평가되면 데이터 바인딩은 리스너를 생성하지 않고 null 리스너를 설정함.

2. Listener bindings
   이벤트 발생 시에 실행되는 람다 표현식. 데이터 바인딩은 항상 리스너를 생성하고 해당 리스너를 뷰에 설정함. 이벤트가 발생하면 리스너가 람다 표현식을 실행함.

Method references

이벤트를 핸들러 메서드에 직접 바인딩할 수 있으며 이는 액티비티에서 android.onClick 메서드에 할당하는 방식과 유사.

View의 onClick 속성과 비교했을 때의 장점은 표현식이 컴파일 시간에 처리된다는 것.
메서드가 존재하지 않거나 시그니처가 잘못된 경우 컴파일 타임 오류가 발생함.

• Method references와 Listener bindings의 차이점
  실제 리스너 구현이 이벤트가 트리거될 때가 아닌 데이터 바인딩될 때 생성된다는 것.
  리스너 바인딩은 이벤트가 발생할 때 표현식이 실행됨.

class MyHandlers {
    fun onClickFriend(view: View) { ... }
}

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
   <data>
       <variable name="handlers" type="com.example.MyHandlers"/>
       <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:onClick="@{handlers::onClickFriend}"/> <!--메서드 시그니처와 정확히 일치해야 함-->
   </LinearLayout>
</layout>

Listener bindings

이벤트가 발생할 때 실행되는 바인딩 표현식. 메서드 참조와 유사하지만 임의의 데이터 바인딩 표현식 실행 가능. (Android Gradle 플러그인 버전 2.0 이상에서 사용 가능.)

Method reference에서는 메서드의 매개변수가 이벤트 리스너의 매개 변수와 일치해야 함. (메서드 시그니처가 정확히 일치해야 함)
리스너 바인딩에서는 void를 기대하는 경우를 제외하고는 반환 값만 리스너의 기대 반환 값과 일치하면 됨.

class Presenter {
    fun onSaveClick(task: Task){}
}

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable name="task" type="com.android.example.Task" />
        <variable name="presenter" type="com.android.example.Presenter" />
    </data>
    <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent">
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:onClick="@{() -> presenter.onSaveClick(task)}" />
    </LinearLayout>
</layout>

콜백이 표현식에서 사용될 때 데이터 바인딩은 필요한 리스너를 자동으로 생성하고 해당 이벤트에 등록함.

뷰가 이벤트를 발생시키면 데이터 바인딩은 주어진 표현식을 실행함. 이 때 리스너 표현식이 실행되는 동안 데이터 바인딩의 null 및 스레드 안전성을 제공받음.

위의 코드를 아래와 같이 작성 가능.

android:onClick="@{(view) -> presenter.onSaveClick(task)}" <!--onClick(View)에 전달되는 매개변수를 명명한 것. 무시하거나 모두 명명할 수 있음.-->

아래와 같이 사용 가능.

class Presenter {
    fun onSaveClick(view: View, task: Task){}
}

android:onClick="@{(theView) -> presenter.onSaveClick(theView, task)}"

하나보다 많은 매개변수를 가진 람다식 사용 가능.

class Presenter {
    fun onCompletedChanged(task: Task, completed: Boolean){}
}

<CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content"
      android:onCheckedChanged="@{(cb, isChecked) -> presenter.completeChanged(task, isChecked)}" />

이벤트가 void가 아닌 반환값을 가질 경우 표현식은 동일한 유형의 반환 값을 반환해야 함.

class Presenter {
    fun onLongClick(view: View, task: Task): Boolean { }
}

android:onLongClick="@{(theView) -> presenter.onLongClick(theView, task)}"

표현식이 null 객체로 인해 실행할 수 없는 경우 기본값을 반환할 수 있음.
삼항식을 사용해야 하는 경우 void를 기호로 사용할 수 있음.

android:onClick="@{(v) -> v.isVisible() ? doSomething() : void}"

📚 복잡한 리스너는 피할 것

리스너 표현식은 코드를 읽기 쉽게 만들 수 있음. 그러나 복잡한 표현식을 포함하는 리스너는 레이아웃을 읽고 유지하기 힘들게 만듦. 표현식은 가능한 한 간단하게 유지하고 UI에서 사용 가능한 데이터를 콜백 메서드로 전달. 리스너 표현식에서 호출하는 콜백 메서드 내에서 비즈니스 로직 구현.

---

📝 Imports, variables, includes

📕 Imports

Imports를 사용하면 레이아웃 파일 내에서 클래스를 참조할 수 있음.
data 요소 내에서 import 요소를 0개 이상 사용할 수 있음.

<data>
    <import type="android.view.View"/>
</data>

View 클래스를 가져오면 바인딩 표현식에서 해당 클래스를 참조 할 수 있음.

<TextView
   android:text="@{user.lastName}"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:visibility="@{user.isAdult ? View.VISIBLE : View.GONE}"/>

• Type aliases
  클래스 이름이 충돌하는 경우 하나를 별칭으로 바꿀 수 있음.

<import type="android.view.View"/>
<import type="com.example.real.estate.View"
        alias="Vista"/> <!-- 별칭으로 바꿈 -->

• 다른 클래스 import
  Import된 타입을 변수와 표현식에서 type 참조로 사용할 수 있음.

<data>
    <import type="com.example.User"/>
    <import type="java.util.List"/>
    <variable name="user" type="User"/>
    <variable name="userList" type="List&lt;User>"/>
</data>

캐스팅에도 사용 가능.

<TextView
   android:text="@{((User)(user.connection)).lastName}"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>

정적 필드와 메서드를 참조할 때도 import된 유형 사용 가능.

<data>
    <import type="com.example.MyStringUtils"/>
    <variable name="user" type="com.example.User"/>
</data>
…
<TextView
   android:text="@{MyStringUtils.capitalize(user.lastName)}"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>

📕 Variables

data element 내에서 여러 variable element 사용 가능.
각 variable 요소는 레이아웃에 설정할 수 있는 속성을 설명하며, 레이아웃 파일 내의 바인딩 표현식에서 사용됨.

<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>

variable 유형은 컴파일 타임에 검사됨. 변수가 Observable을 구현하거나 Observable 컬렉션인 경우 그 사항이 type에 반영되어야 함.

다양한 구성(가로모드 혹은 세로모드)의 레이아웃 파일이 서로 다를 때 변수가 결합됨. 이러한 레이아웃 파일 간 충돌하는 변수 정의가 있어서는 안됨.

생성된 바인딩 클래스에는 각 변수에 대해 getter와 setter가 있음. setter가 호출될 때까지 변수는 기본값을 사용.(참조 유형은 null, int는 0, boolean은 false)

📕 includes

app 네임 스페이스와 속성에서 변수 이름을 사용하여 포함된 레이아웃의 바인딩에 변수를 전달할 수 있음.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:bind="http://schemas.android.com/apk/res-auto">
   <data>
       <variable name="user" type="com.example.User"/>
   </data>
   <LinearLayout
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <include layout="@layout/name"
           bind:user="@{user}"/>
       <include layout="@layout/contact"
           bind:user="@{user}"/>
   </LinearLayout>
</layout>

예시 코드2)

<!--layout_name.xml-->
<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="user"
            type="com.example.User" />
    </data>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Other views and UI elements specific to layout_name.xml -->

        <!-- Include the contact_info.xml layout -->
        <include
            layout="@layout/contact_info"
            bind:user="@{user}" />
    </RelativeLayout>
</layout>

<!-- contact_info.xml -->
<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="user"
            type="com.example.User" />
    </data>

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

        <!-- Include user-specific data from the variable -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.name}" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.email}" />
    </LinearLayout>
</layout>

데이터 바인딩은 include를 직접 자식으로 사용하는 merge 요소를 지원하지 않음.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:bind="http://schemas.android.com/apk/res-auto">
   <data>
       <variable name="user" type="com.example.User"/>
   </data>
   <merge><!-- Doesn't work -->
       <include layout="@layout/name"
           bind:user="@{user}"/>
       <include layout="@layout/contact"
           bind:user="@{user}"/>
   </merge>
</layout>