[Android] DataBinding 동작 원리 파헤치기

Android

[Android] DataBinding 동작 원리 파헤치기

yujinius 2024. 11. 10. 23:17

안드로이드 DataBinding 동작 원리 파헤치기

DataBinding이란 무엇인가?
DataBinding 설정하기
DataBinding 컴파일 과정 이해
DataBinding 실습: 단방향 바인딩
DataBinding 실습: 양방향 바인딩
DataBinding과 ViewBinding의 구조 및 차이
BindingAdapter로 기능 확장하기
Observable과 LiveData를 통한 자동 UI 업데이트
마무리 및 결론

1. DataBinding이란 무엇인가?

DataBinding은 Android Jetpack 라이브러리 중 하나로, XML 레이아웃과 데이터 객체를 연결하여 UI와 데이터 간의 결합을 자동으로 관리한다. DataBinding을 사용하면 데이터 변경 시 UI가 자동으로 업데이트되며, 양방향 바인딩을 통해 UI 입력 값이 데이터 객체에 자동 반영될 수 있다. 이는 기존 findViewById 방식의 불편함을 줄이고, 코드의 간결성을 높이며, 명령형 코드를 줄여 UI와 데이터가 자동 동기화되도록 한다.

2. DataBinding 설정하기

DataBinding을 사용하려면 먼저 프로젝트의 build.gradle 파일에서 설정을 활성화하고, XML 레이아웃에 <layout> 태그를 추가해야 한다.

1. build.gradle 설정

모듈 수준의 build.gradle(:app) 파일에서 DataBinding을 활성화한다. buildFeatures 블록에서 dataBinding을 true로 설정하면, 프로젝트가 빌드될 때마다 DataBinding을 지원하는 클래스들이 자동으로 생성된다.

android {
    ...
    buildFeatures {
        dataBinding = true
    }
}

위와 같이 설정을 추가한 후, 프로젝트를 빌드해야 한다. 이 과정을 통해 레이아웃 XML 파일에 대응되는 바인딩 클래스가 자동으로 생성된다.

2. 레이아웃 파일 준비

DataBinding을 적용할 XML 파일의 루트 요소를 <layout> 태그로 감싸야 한다. 이 태그 안에 <data> 섹션을 추가하여, 바인딩에 사용할 변수를 정의할 수 있다. 여기에서는 activity_main.xml 파일을 예로 들겠다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 데이터 바인딩에서 사용할 변수를 정의 -->
    <data>

        <variable
            name="user"
            type="com.yujin45.androidstudy.User" />
    </data>

    <LinearLayout
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- User 객체의 name 속성을 바인딩하여 표시 -->
        <TextView
            android:id="@+id/userName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.name}"
            android:textSize="18sp" />

        <!-- User 객체의 number 속성을 바인딩하여 표시 -->
        <TextView
            android:id="@+id/userNumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{Integer.toString(user.number)}"
            android:textSize="18sp" />

        <!-- 업데이트 버튼 추가 -->
        <Button
            android:id="@+id/updateButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Update User" />
    </LinearLayout>
</layout>

위 코드에서 <data> 태그 안의 <variable> 태그를 통해 User 클래스를 정의하고, name과 number 속성을 TextView에 바인딩하여 표시한다. 이렇게 하면, User 객체가 업데이트될 때마다 TextView도 자동으로 업데이트된다.

3. User 클래스 정의

현재 User 클래스는 다음과 같이 정의되어 있다.

package com.yujin45.androidstudy

data class User(
    var name: String,
    var number: Int
)

이러한 정의에서는 User 객체의 속성이 변경되더라도 UI가 자동으로 업데이트되지 않는다.
우선은 더 살펴보도록 하자.

4. Activity에서 DataBinding 객체 생성하기

DataBindingUtil을 사용하여 Activity에 바인딩 객체를 생성하고, XML에서 정의한 User 객체를 설정한다.

package com.yujin45.androidstudy

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.yujin45.androidstudy.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

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

        // 바인딩 객체 생성 및 레이아웃 설정
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        // User 객체 생성 및 바인딩 설정
        val user = User("Yujin", 45)
        binding.user = user

        // 버튼 클릭 시 User 정보 업데이트
        binding.updateButton.setOnClickListener {
            user.name = "Updated Name"
            user.number = 46
            //binding.invalidateAll() // UI를 수동으로 업데이트
        }
    }
}

위 코드에서 MainActivity에서 User 객체를 생성하여 바인딩 객체의 user 속성에 할당한다.
또한, 버튼 클릭 시 User 객체의 name과 number를 업데이트하도록 설정했다.

4. 수동 UI 업데이트의 필요성

현재 상태에서는 User 객체의 속성을 변경해도 UI가 자동으로 업데이트되지 않는다. 이는 User 클래스가 데이터 변경을 감지하여 UI에 알리는 메커니즘이 없기 때문이다.
따라서, 버튼 클릭 시 User 객체의 속성을 변경한 후 binding.invalidateAll() 메서드를 호출하여 수동으로 UI를 업데이트해야 한다

binding.updateButton.setOnClickListener {
    user.name = "Updated Name"
    user.number = 46
    binding.invalidateAll() // UI를 수동으로 업데이트
}

이렇게 하면, User 객체의 속성 변경 후 invalidateAll()을 호출하여 바인딩된 모든 UI 요소를 다시 그리게 된다.

5. BaseObservable을 사용하여 자동 UI 업데이트 구현

UI가 데이터 변경에 따라 자동으로 업데이트되도록 하려면, User 클래스에 BaseObservable을 상속하고, 각 속성에 @Bindable 어노테이션을 추가한 후, setter에서 notifyPropertyChanged()를 호출해야 한다.

package com.yujin45.androidstudy

import androidx.databinding.BaseObservable
import androidx.databinding.Bindable
import com.yujin45.androidstudy.BR

class User(
    name: String,
    number: Int
) : BaseObservable() {

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

    @get:Bindable
    var number: Int = number
        set(value) {
            field = value
            notifyPropertyChanged(BR.number)
        }
}

이렇게 수정한 후에는 binding.invalidateAll()을 호출하지 않아도, User 객체의 속성이 변경될 때마다 UI가 자동으로 업데이트된다.

3. DataBinding 컴파일 과정 이해

DataBinding을 사용하면 컴파일 시점에 여러 자동 생성 파일이 생성된다. 이 과정에서 DataBinding은 XML 레이아웃 파일에 접근할 수 있는 바인딩 클래스와 함께 BR 클래스와 DataBindingTrigger 클래스를 생성하며, ViewBinding과 달리 ViewDataBinding을 기반으로 한다. 아래에서 이러한 각 요소가 어떻게 컴파일 과정에서 생성되고, 어떤 역할을 하는지 알아보겠다.

1. 바인딩 클래스의 생성 위치 및 `ViewDataBinding`의 역할

DataBinding을 활성화한 후 프로젝트를 빌드하면, XML 레이아웃 파일마다 이에 대응하는 바인딩 클래스가 자동으로 생성된다. 예를 들어, activity_main.xml이라는 레이아웃 파일이 있을 때 ActivityMainBinding이라는 바인딩 클래스가 생성되며, 이는 다음 경로에 위치하게 된다:
build/generated/data_binding_base_class_source_out/.../databinding/ActivityMainBinding.java
이 클래스는 ViewDataBinding을 상속한다. ViewDataBinding은 데이터와 UI 요소를 연결하고, 속성의 변경을 감지해 UI에 자동으로 반영할 수 있는 기능을 제공한다.
반면 ViewBinding은 단순히 XML 레이아웃의 View 요소에 대한 참조를 제공하는 ViewBinding 인터페이스를 구현하며, 데이터와 UI 간의 동기화 기능은 포함하지 않는다.
ViewDataBinding은 DataBinding의 핵심 클래스로서, Observable과 LiveData를 활용한 데이터 변경 감지와 자동 UI 업데이트 등의 고급 기능을 제공한다. 이로 인해 DataBinding 클래스들은 모두 ViewDataBinding을 상속받아 데이터 바인딩 기능을 지원한다.

2. `BR` 클래스의 역할

https://developer.android.com/topic/libraries/data-binding/generated-binding

생성된 바인딩 클래스 | Android Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. 생성된 바인딩 클래스 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 데이터 결합 라이브러리는 사용

developer.android.com

DataBinding을 사용하면 XML 레이아웃에서 사용되는 바인딩 변수들은 자동으로 BR 클래스에 등록된다. BR 클래스는 바인딩 변수에 ID를 부여하는 역할을 하며, 이러한 ID는 notifyPropertyChanged() 메서드를 통해 데이터 변경을 UI에 알릴 때 사용된다.
package com.yujin45.androidstudy; public class BR { public static final int _all = 0; public static final int name = 1; public static final int number = 2; public static final int user = 3; }
예를 들어, User 클래스의 name 속성에 @Bindable을 사용했다면, BR.name이라는 필드가 자동으로 생성된다. notifyPropertyChanged(BR.name)을 호출하면 name 속성의 변경 사항이 감지되어 UI가 업데이트된다.
BR 클래스는 DataBinding의 속성 변경 감지 기능을 지원하기 위한 필수 요소로, 모든 바인딩 변수에 대한 상수 값을 포함하여 데이터-UI의 원활한 상호작용을 돕는다.

3. `DataBindingTriggerClass`

DataBinding을 활성화하면 DataBindingTriggerClass.java라는 클래스가 data_binding_trigger 폴더에 생성된다.
현재 공식 Android 문서에서는 DataBindingTriggerClass와 @BindingBuildInfo 주석에 대한 상세한 설명을 제공하지 않는다. DataBinding의 내부 구현과 관련된 요소로, 개발자가 직접 수정하거나 접근할 필요는 없는 것 같다.

4. 왜 ViewBinding과 DataBinding 클래스가 모두 `databinding` 폴더 내에 생성되는가?

DataBinding과 ViewBinding 모두 Android의 빌드 시스템 내에서 자동으로 생성되는 바인딩 클래스라는 점에서 유사하다. 두 기능 모두 XML 레이아웃 파일과 UI 요소 간의 바인딩을 목적으로 하며, 빌드 과정에서 databinding 폴더 내에 생성된다. 이 폴더는 안드로이드 빌드 시스템이 바인딩 클래스를 관리하기 위한 전용 공간으로 할당된다.
DataBinding은 ViewDataBinding을 기반으로 데이터와 UI의 동기화를 자동화하며, 반면 ViewBinding은 ViewBinding을 기반으로 단순한 View 참조 기능만을 제공한다. 둘 다 databinding 폴더에 위치하지만, DataBinding의 바인딩 클래스는 보다 고급 기능을 포함한 형태
참고로 ViewBinding은 Android Gradle Plugin 3.6.0에서 도입되었으며, 이는 DataBinding의 복잡성을 줄이고 단순한 View 참조를 위한 대체 수단으로 개발되었다.

4. DataBinding 실습: 단방향 바인딩

단방향 바인딩에서는 데이터가 UI에만 반영되며, UI에서 발생한 변경은 데이터에 반영되지 않는다. 이 방식은 데이터 변경을 UI에 반영하는 간단한 방법이다.
아래는 단방향 바인딩을 사용한 실습이다. 이 실습에서는 EditText에서 값을 수정하더라도 데이터가 업데이트되지 않으며, Button 클릭 시 내부 데이터가 변경되면 UI에 반영되는 상황을 확인할 수 있다.

1. User 클래스 생성

먼저 User 클래스를 생성한다. 이 클래스는 BaseObservable을 상속받고, @Bindable 어노테이션을 사용하여 데이터 변경 시 UI를 업데이트할 수 있게 만든다.

package com.yujin45.androidstudy

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

class User : BaseObservable() {
    @get:Bindable
    var name: String = "Yujin"
        set(value) {
            field = value
            notifyPropertyChanged(BR.name)
        }
}

2. activity_main.xml 파일에서 단방향 바인딩 설정

activity_main.xml 파일에서 단방향 바인딩을 사용하여 User 객체의 name 속성을 TextView에 바인딩하고, EditText에서 수정한 값은 데이터에 반영되지 않음을 확인할 수 있다. Button 클릭 시 데이터가 변경되면 UI에 반영된다.

<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>
        <variable
            name="user"
            type="com.yujin45.androidstudy.User" />
    </data>

    <LinearLayout
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- 단방향 바인딩을 사용하여 User 객체의 name을 표시 -->
        <TextView
            android:id="@+id/userName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.name}"
            android:textSize="18sp" />

        <!-- EditText에서 값을 수정하더라도 데이터에 반영되지 않음 -->
        <EditText
            android:id="@+id/userNameInput"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.name}" />

        <Button
            android:id="@+id/updateButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Update User" />
    </LinearLayout>
</layout>

3. MainActivity에서 DataBinding 객체 생성 및 버튼 클릭 시 데이터 업데이트

MainActivity에서 User 객체를 생성하여 바인딩 객체에 연결한다. 또한, 버튼 클릭 시 user.name을 업데이트하는 코드가 포함된다. EditText에서 값이 수정되어도 User 객체에 반영되지 않으며, 버튼 클릭 시 User 객체의 name이 변경되면 UI에 반영된다.

package com.yujin45.androidstudy

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.yujin45.androidstudy.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

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

        // 바인딩 객체 생성 및 레이아웃 설정
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        // User 객체 생성 및 바인딩 설정
        val user = User()
        binding.user = user

        // 버튼 클릭 시 User 정보 업데이트
        binding.updateButton.setOnClickListener {
            // 이름을 업데이트 (데이터가 바뀌면 UI도 자동으로 업데이트됨)
            user.name = "Updated Name"
        }
    }
}

4. 실습 결과

EditText에서 값을 수정하면 데이터에 반영되지 않음:
- EditText에서 텍스트를 입력해도, user.name 값에는 변경이 반영되지 않는다.
- 단방향 바인딩에서는 UI에서 발생한 값 변경은 데이터 객체에 반영되지 않는다.
Button 클릭 시 User 객체의 name 변경이 UI에 반영됨:
- 버튼을 클릭하면 user.name 값이 "Updated Name"으로 변경되고, UI의 TextView가 이 값을 반영한다.
- 단방향 바인딩에서는 데이터의 변경이 UI에 자동으로 반영되지만, UI에서 발생한 변경은 데이터에 반영되지 않는다.

5. 결론

단방향 바인딩에서는 데이터 객체가 변경되면 UI가 자동으로 업데이트되지만, UI에서 발생한 값 변경은 데이터에 반영되지 않는다. EditText에서 값을 수정하더라도 데이터 객체에 반영되지 않으며, 버튼 클릭 시 데이터가 변경되면 UI에 자동으로 반영된다. 이를 통해 단방향 바인딩과 양방향 바인딩의 차이를 명확히 이해할 수 있다.

5. DataBinding 실습: 양방향 바인딩

양방향 바인딩을 사용하면 데이터와 UI가 서로 동기화된다.
양방향 바인딩에서는 UI에서 발생한 변경 사항이 데이터 객체에 자동으로 반영되며, 데이터 객체의 변경도 UI에 반영된다. 이번 실습에서는 단방향 바인딩과 비교하여, EditText에서 값을 수정하면 데이터 객체에 반영되고, Button 클릭 시 데이터가 업데이트되면 UI도 자동으로 업데이트되는 양방향 바인딩을 구현해 보겠다.

1. User 클래스 수정 (BaseObservable 상속 및 @Bindable 사용)

먼저 User 클래스에 BaseObservable을 상속받고, @Bindable 어노테이션을 추가하여, 데이터가 변경될 때 UI에 자동으로 반영될 수 있도록 한다. @get:Bindable을 사용하여 name 속성에 대한 바인딩을 추가한다. 이때, 데이터가 변경되면 notifyPropertyChanged(BR.name)를 호출하여 UI에 변경 사항을 알린다.

package com.yujin45.androidstudy

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

class User : BaseObservable() {
    @get:Bindable
    var name: String = "Yujin"
        set(value) {
            field = value
            notifyPropertyChanged(BR.name)
        }
}

2. activity_main.xml 파일에서 양방향 바인딩 설정

activity_main.xml에서 양방향 바인딩을 사용하려면 @{} 대신 @={}를 사용해야 한다. EditText의 android:text 속성에 @={user.name}를 설정하여, UI에서 값을 수정하면 user.name에 자동으로 반영되도록 한다. 또한, 버튼 클릭 시 user.name을 변경하면 UI에 그 값이 반영된다.
@={} 구문을 사용하여 양방향 바인딩을 설정하면, EditText에서 수정한 값이 데이터 객체에 반영되고, 데이터가 변경되면 UI가 자동으로 업데이트된다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>
        <variable
            name="user"
            type="com.yujin45.androidstudy.User" />
    </data>

    <LinearLayout
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- 양방향 바인딩을 사용하여 User 객체의 name을 표시 및 수정 -->
        <TextView
            android:id="@+id/userName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@={user.name}"
            android:textSize="18sp" />

        <!-- EditText에서 값을 수정하면 데이터에 반영됨 -->
        <EditText
            android:id="@+id/userNameInput"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@={user.name}" />

        <Button
            android:id="@+id/updateButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Update User" />
    </LinearLayout>
</layout>

3. MainActivity에서 양방향 바인딩 동작 확인

MainActivity에서 User 객체를 생성하여 바인딩 객체에 연결한다. 또한, 버튼 클릭 시 user.name을 업데이트하는 코드가 포함된다. 양방향 바인딩을 사용하면 EditText에서 수정된 값이 데이터 객체에 반영되고, 버튼 클릭 시 데이터 객체의 값이 UI에 반영된다. 이를 통해 데이터와 UI 간의 자동 동기화가 이루어짐을 확인할 수 있다.

package com.yujin45.androidstudy

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.yujin45.androidstudy.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

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

        // 바인딩 객체 생성 및 레이아웃 설정
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        // User 객체 생성 및 바인딩 설정
        val user = User()
        binding.user = user

        // 버튼 클릭 시 User 정보 업데이트
        binding.updateButton.setOnClickListener {
            // 이름을 업데이트 (데이터가 바뀌면 UI도 자동으로 업데이트됨)
            user.name = "Updated Name"
        }
    }
}

위 코드에서 user.name은 EditText에서 변경될 때마다 자동으로 데이터 객체에 반영되며, 버튼을 클릭하면 user.name이 변경되고 그 값이 UI에 반영된다.

4. 양방향 바인딩 실습 결과

EditText에서 값 수정 시 데이터 객체에 반영
- @={user.name} 형식으로 설정한 양방향 바인딩을 사용하면, EditText에서 값이 수정될 때마다 데이터 객체의 name 속성에 자동으로 반영된다. 즉, UI에서 발생한 값의 변경이 데이터 객체에 실시간으로 반영된다.
버튼 클릭 시 데이터 객체의 값이 UI에 반영
- 버튼을 클릭하면 user.name의 값이 "Updated Name"으로 변경되고, 이 값은 UI의 TextView와 EditText에 자동으로 반영된다. 데이터 객체의 변경이 UI에 실시간으로 반영된다.

5. 단방향 바인딩과의 차이점

단방향 바인딩에서는 데이터가 UI에만 반영되며, UI에서 발생한 변경은 데이터에 반영되지 않는다.
양방향 바인딩에서는 UI와 데이터 객체가 서로 연결되어 있어, UI에서의 변경 사항이 데이터에 반영되고, 데이터의 변경이 UI에 반영된다. 이를 통해 UI와 데이터 간의 상호작용을 더욱 직관적으로 관리할 수 있다.

양방향 바인딩은 데이터와 UI 간의 동기화가 필요한 경우에 유용하게 사용되며, 사용자 인터페이스에서 발생한 변경을 자동으로 데이터에 반영할 수 있게 돕는다.

6. DataBinding과 ViewBinding의 구조 및 차이

ViewBinding과 DataBinding은 모두 Android에서 XML 레이아웃과 UI 요소를 연결하는 기능을 제공하지만, 그 목적과 구조에서 중요한 차이가 있다.

1. ViewBinding

ViewBinding은 XML 레이아웃의 View 요소들을 참조하는 단순한 도구이다. ViewBinding은 각 레이아웃 XML 파일에 대응되는 클래스를 생성하며, 해당 XML 레이아웃 내의 모든 View 요소들에 대한 참조만을 제공한다. 주로 findViewById의 대체 방법으로 사용된다.
ViewBinding은 데이터를 바인딩하거나 UI의 변경 사항을 감지하지 않는다. 단순히 XML 파일의 View를 프로그램에서 쉽게 접근할 수 있도록 도와준다.

2. DataBinding

DataBinding은 UI와 데이터의 동기화를 지원하는 더 강력한 도구이다. DataBinding은 데이터와 UI 간의 연결을 관리하며, UI의 변경 사항을 자동으로 데이터 객체에 반영하거나 데이터의 변경 사항을 UI에 반영하는 양방향 바인딩을 제공한다.
또한, DataBinding은 BindingAdapter를 통해 커스텀 속성이나 동작을 View에 추가할 수 있다. ViewBinding과 달리 DataBinding은 UI와 데이터 간의 동기화를 포함한 기능을 제공한다.

3. 구조 차이

ViewBinding은 간단한 레이아웃 View 요소에 대한 참조를 제공하는 반면, DataBinding은 데이터 바인딩을 위한 변수를 정의하고, 이 변수를 UI에 바인딩하며, 데이터와 UI 간의 동기화를 관리한다.
DataBinding은 XML에서 정의된 변수들을 BR 클래스에서 관리하고, 데이터 변경 시 notifyPropertyChanged()를 통해 UI를 자동으로 업데이트하는 방식으로 동작한다. ViewBinding은 이러한 기능을 제공하지 않으며, 단지 View에 대한 참조만을 관리한다.

7. BindingAdapter로 기능 확장하기

BindingAdapter는 Android의 DataBinding 라이브러리에서 제공하는 기능으로, 뷰(View)의 속성에 대한 사용자 정의 동작을 정의할 수 있게 해준다. 이를 통해 XML 레이아웃에서 뷰의 속성을 바인딩할 때, 기본적으로 제공되지 않는 동작이나 복잡한 로직을 처리할 수 있다.

BindingAdapter 사용 예시:

예를 들어, ImageView에 URL을 통해 이미지를 로드하고자 할 때, @BindingAdapter를 사용하여 커스텀 속성을 정의할 수 있다.

BindingAdapter 정의:
- 위의 코드는 imageUrl이라는 속성을 정의하여, 해당 속성이 바인딩될 때 ImageView에 이미지를 로드하는 기능을 수행한다.
- ```
@BindingAdapter("imageUrl")
fun loadImage(view: ImageView, url: String?) {
    Glide.with(view.context)
        .load(url)
        .into(view)
}
```
XML 레이아웃에서 사용:
- 이렇게 XML에서 app:imageUrl 속성에 @{user.profileImageUrl}을 바인딩하면, user.profileImageUrl의 값이 변경될 때마다 ImageView에 해당 이미지가 자동으로 로드된다.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:imageUrl="@{user.profileImageUrl}" />

BindingAdapter의 주요 특징:

커스텀 속성 정의: 기본적으로 제공되지 않는 속성이나 복잡한 동작을 뷰에 추가할 수 있다.
UI 동작의 확장: 데이터 바인딩을 통해 UI의 동작을 더욱 세밀하게 제어할 수 있다.
재사용성: 한 번 정의한 BindingAdapter는 여러 레이아웃에서 재사용할 수 있어 코드의 중복을 줄일 수 있다.

주의사항:

BindingAdapter를 정의할 때는 해당 메서드가 @BindingAdapter 어노테이션을 통해 바인딩될 속성과 정확히 일치하는지 확인해야 한다. 또한, 메서드의 매개변수 순서와 타입이 올바르게 설정되어야 한다.
BindingAdapter를 활용하면 DataBinding의 기능을 확장하여, UI와 데이터 간의 상호작용을 더욱 효율적으로 관리할 수 있다.

8. Observable과 LiveData를 통한 자동 UI 업데이트

Observable과 LiveData는 DataBinding에서 UI의 자동 업데이트를 지원하는 중요한 메커니즘이다. 데이터가 변경될 때 UI가 자동으로 반영되도록 설정할 수 있다.

1. Observable

Observable은 데이터 객체가 변경될 때 이를 UI에 자동으로 반영할 수 있도록 해준다. BaseObservable을 상속하고, @Bindable을 사용하여 속성을 정의하며, notifyPropertyChanged()를 호출하여 UI에 데이터 변경 사항을 알린다.

class User : BaseObservable() {
    @get:Bindable
    var name: String = "Yujin"
        set(value) {
            field = value
            notifyPropertyChanged(BR.name)
        }
}

Observable은 주로 DataBinding에서 데이터 객체와 UI 간의 동기화를 자동으로 처리하는 데 사용된다.

2. LiveData

LiveData는 Android Architecture Components의 일부로, UI에 연결된 데이터를 관리하고 자동으로 UI를 업데이트하는 기능을 제공한다. LiveData는 데이터가 변경되면 이를 구독한 UI 요소에 자동으로 업데이트를 반영한다.

class UserViewModel : ViewModel() {
    val userName = MutableLiveData<String>("Yujin")
}

LiveData는 UI의 관찰 가능한 데이터를 관리하며, UI 생명 주기를 인식하여 메모리 누수를 방지하고, UI와 데이터의 동기화를 자동으로 처리한다.

2024.11.17 update ▼

https://yujinius45.tistory.com/133

[Android] ViewBinding과 DataBinding 비교 - 글자 수에 따라 텍스트 색상 변경하기

안드로이드 개발에서 ViewBinding과 DataBinding은 UI와 코드의 결합 방식을 개선해 주는 중요한 바인딩 기술이다. 두 방법을 비교하기 위해 사용자가 EditText에 입력한 글자 수에 따라 TextView의 색상이

yujinius45.tistory.com

https://yujinius45.tistory.com/132

[Android] LiveData와 DataBinding의 양방향 바인딩 시 발생하는 오류 해결하기

문제 상황안드로이드 개발에서 LiveData와 DataBinding을 결합해 양방향 바인딩을 구현하려고 할 때 아래와 같은 오류가 발생할 수 있다.The expression 'userViewModelInputText.getValue()' cannot be inverted, so it canno

yujinius45.tistory.com

9. 마무리 및 결론

DataBinding은 UI와 데이터 간의 동기화를 자동으로 처리해 주는 강력한 도구이며, 양방향 바인딩을 통해 UI와 데이터가 실시간으로 상호작용할 수 있게 돕는다. 단방향 바인딩은 UI에서 데이터로의 반영만 이루어지며, UI에서 발생한 변경은 데이터에 반영되지 않는다. 양방향 바인딩을 사용하면 UI와 데이터 간의 양방향 동기화가 가능해져, 더욱 직관적인 방식으로 UI를 관리할 수 있다.
또한, BindingAdapter와 LiveData, Observable을 활용하여 UI를 더욱 동적으로 확장하고, 데이터 변경에 따른 자동 UI 업데이트를 처리할 수 있다. DataBinding을 사용하면서 발생할 수 있는 다양한 문제를 해결할 수 있는 방법들을 학습하며, 더욱 효율적이고 관리하기 쉬운 코드를 작성할 수 있게 된다.

'Android' 카테고리의 다른 글

[Android] com.android.adblib.tools.EmulatorCommandException: Whitespace not allowed in path string 에러 해결 (1)	2024.11.16
[Android] Unresolved reference: BR.isTextLongEnough 에러 해결 (1)	2024.11.16
[Android] 안드로이드 ViewBinding 완벽 가이드: 개념, 도입 배경, 사용법, 동작 방식 및 컴파일 위치 (9)	2024.11.09
[Android] ViewBinding 동작 원리 파헤치기 (4)	2024.11.09
[Android] findViewById 동작 원리 파헤치기 (1)	2024.11.09

현재글[Android] DataBinding 동작 원리 파헤치기

행복한 내 이야기

Livedata, SQLite, java, kotlin, composable, 코루틴, bindingadapter, 리팩토링, 티스토리챌린지, OS, viewBinding, compose, 코테, 프로그래머스, DataBinding, 자바, ViewModel, Android, 오블완, recomposition,

Today :
Yesterday :

행복한 내 이야기