[데이터 바인딩] DataBinding 사용하기

시작하기

데이터 바인딩을 사용하기 앞서 빌드 환경을 구축한다.

0. 코틀린 프로젝트를 사용하는 경우 kapt 플로그인을 추가한다.

/* build.gradle (:app) */
apply plugin: 'kotlin-kapt'

1. dataBinding 요소를 추가한다.

/* build.gradle (:app) */
android {
    ...
    dataBinding {
        enabled = true
    }
}

데이터 객체 생성

데이터 바인딩에 사용될 객체를 정의한다.

package com.sungje365.databindingtest.data.model

data class User(
    val firstName: String,
    val lastName: String
)

레이아웃 및 결합 표현식 작성

데이터 바인딩 레이아웃은 <layout> 의 루트 태그로 시작하며 <data> 요소와 view 루트 요소가 포함된다. <data> 요소는 레이아웃 내부에서 사용하는 속성을 정의할 수 있다.

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

    <data>
        <variable
            name="user"
            type="com.sungje365.databindingtest.data.model.User" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        ... >

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

        <TextView
            ...
            android:text="@{user.lastName}"
            ... />

        <TextView
            ...
            android:text="@{user.firstName + ' ' + user.lastName}"
            ... />

        <Button
            android:id="@+id/btn_main_change"
            ... />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

데이터 바인딩

각 레이아웃 파일은 자동으로 결합 클래스가 생성된다. 예를 들어 activity_main.xml은 ActivityMainBinding 클래스가 생성되는 것이다. 해당 클래스는 레이아웃 속성(data)에서 뷰까지 모든 결합을 보유하고 있다.

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

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

        binding.user = User("GilDong", "Hong")

        binding.btnMainChange.setOnClickListener {
            binding.user = User("John", "Doe")
        }
    }
}

Full Source

build.gradle (:app)

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-kapt'

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.3"

    defaultConfig {
        applicationId "com.sungje365.databindingtest"
        minSdkVersion 23
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    dataBinding {
        enabled = true
    }
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.5.0'
    implementation 'androidx.appcompat:appcompat:1.3.0'
    implementation 'com.google.android.material:material:1.3.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
}

activity_main.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"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="user"
            type="com.sungje365.databindingtest.data.model.User" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".ui.view.MainActivity">

        <TextView
            android:id="@+id/tv_main_firstname"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            android:text="@{user.firstName}"
            android:textSize="24sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tv_main_lastname"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginTop="8dp"
            android:text="@{user.lastName}"
            android:textSize="24sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv_main_firstname" />

        <TextView
            android:id="@+id/tv_main_fullname"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginTop="8dp"
            android:text="@{user.firstName + ' ' + user.lastName}"
            android:textSize="24sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv_main_lastname" />

        <Button
            android:id="@+id/btn_main_change"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:text="@string/all_change"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

User.kt

package com.sungje365.databindingtest.data.model

data class User(
    val firstName: String,
    val lastName: String
)

MainActivity.kt

package com.sungje365.databindingtest.ui.view

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import androidx.databinding.DataBindingUtil
import com.google.android.material.snackbar.Snackbar
import com.sungje365.databindingtest.R
import com.sungje365.databindingtest.data.model.User
import com.sungje365.databindingtest.databinding.ActivityMainBinding

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

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

        binding.user = User("GilDong", "Hong")

        binding.btnMainChange.setOnClickListener {
            binding.user = User("John", "Doe")
        }
    }
}