안드로이드 DataBinding 사용 예제

이번 글에서는 안드로이드 DataBinding에 대해 작성해보도록 하겠습니다.

 

DataBinding이란?

데이터 바인딩이 무엇인지는 안드로이드 공식문서를 통해 알 수 있습니다. 공식문서에서 데이터바인딩이란

 

"데이터 결합 라이브러리는 프로그래매틱 방식이 아니라 선언적 형식을 사용하여 레이아웃의 UI 구성요소를 앱의 데이터 소스에 결합할 수 있는 지원 라이브러리입니다."

 

라고 하고 있습니다. 그럼 프로그래매틱 방식은 뭐고 선언적 형식은 뭔지에 대해 궁금하실텐데요. 프로그래매틱방식은 기존에 안드로이드 개발을 하면서 findViewById를 사용해서 UI를 구성하는 방식을 의미합니다. 

 

예제를 보면서 설명드리도록 하겠습니다.

위 사진은 textView 에 이름을 띄어주는 코드입니다.

위 방식을 프로그래매틱 방식이라고 말합니다.

 

이제 데이터바인딩을 사용하는 것을 보여드리도록 하겠습니다.

 

build.gradle.kts (앱 수준)

buildFeatures {
    dataBinding = true
}

 

MainActivity.kt

var name = "Taron"
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
    binding.textView.text = name
}

 

findVIewById가 없어진걸 볼 수 있습니다.

하지만 데이터바인딩은 xml과 데이터를 결합해서 사용하는 방식입니다. 그래서 이제 xml과 데이터를 결합해서 사용하는 것을 보여드리겠습니다.

 

MainActivity.kt

private lateinit var binding: ActivityMainBinding
private lateinit var dataClass : DataClass
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
    dataClass = DataClass("Taron","20")
    binding.data = dataClass
}

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="data"
            type="com.example.practiceproject.DataClass" />
    </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/textView"
            android:layout_width="231dp"
            android:layout_height="72dp"
            android:textSize="25dp"
            android:text="@{data.name}"

            android:gravity="center"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="232dp"
            android:layout_height="62dp"
            android:text="@{data.age}"
            android:textSize="25dp"
            android:gravity="center"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.502"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView"
            app:layout_constraintVertical_bias="0.033" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

DataClass.kt

data class DataClass(var name : String,var age : String)

 

위 코드를 보면 코드상에서 직접적으로 UI에 관여한게 아닌 데이터를 변경해주고 xml 에서 데이터를 참조해서 데이터를 출력하는 것을 확인 할 수 있습니다.

 

출력 화면

 

코드상으로 UI을 조작하지 않아도 xml 에서 데이터를 참조해 UI를 구성하는것을 확인 할 수 있습니다.

 

오늘은 데이터 바인딩에 대해 작성해보았습니다. 공부하는데 도움이 되었으면 좋겠습니다. 감사합니다.