[Android JetPack] DataBinding 알아보기

앞서 공부한 ViewModel, LiveData와 함께 유용하게 쓰이는 DataBinding에 대해 공부해 보겠습니다.

 

DataBinding이란?

과거 xml의 뷰에 접근하기 위해서는 findViewById()를 사용했습니다.

하지만 findViewById() 방식은 xml 파일이 많아질수록 뷰의 id가 중복되는 경우가 생기고 성능면에서 속도가 느리다는 단점이 있었습니다.

findViewById()의 단점을 보완하기 위해 ViewBinding 개념이 등장합니다.

ViewBinding 방식은 xml파일 각각을 컴파일 시 하나의 Binding 클래스로 생성한 후 해당 클래스에서 id를 찾는 방식입니다.

 

그리고 DataBinding은 위의 ViewBinding에서 나아가 xml 파일에서 뷰의 데이터를 처리해주는 방법입니다.

DataBinding의 장점은 다음과 같습니다.

 

• findViewById()를 호출하지 않고, xml의 뷰에 접근이 가능하다.
• observe를 이용해 실시간으로 뷰의 데이터 변경이 가능하다.
• 데이터를 처리하는 코드가 xml로 이동해 가독성이 좋아진다.
• View와 ViewModel을 분리해 MVVM 패턴 적용에 용이하다.

DataBinding은 ViewModel과 LiveData를 함께 사용할 때 사용성이 극대화되지만 이번 포스팅에서는 간단하게 데이터를 TextView에 출력하는 과정을 확인해 보겠습니다.

---

먼저 app/build.gradle을 세팅합니다.

android {
    ...
    buildFeatures {
        dataBinding true
    }
}

 

---

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

초기 xml 파일 형식입니다. 이 때는 MainActivity에서 Binding이 가능하지 않습니다. 

DataBinding이 가능한 형식으로 변경해 줍니다.

<androidx.constraintlayout.widget.ConstraintLayout> 이 부분에 커서를 두고 Alt + Enter를 눌러

'Convert to data binding layout' 을 클릭합니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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>

    </data>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

위와 같이 기존 레이아웃이 <layout> 태그로 묶이며 <data> 태그가 만들어집니다.

 

객체를 뷰에 binding 하기 위해 User라는 Data Class를 생성합니다.

data class User(
    var name : String,
    var age : Int,
    var info : String
)

그리고 MainActivity와 activity_main.xml을 수정합니다.

MainActivity

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        val user = User("오제이", 26, "안녕하세요")

        binding.user = user
    }
}

기존의 setContentView를 DataBindingUtil.setContentView()로 대체합니다.

User 객체를 생성한 후 xml의 <data>태그 안 <variable>에서 사용할 변수명과 연결해 줍니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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.myapplication.User" />
    </data>

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

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="240dp"
            android:text="@{user.name}"
            android:textColor="#000000"
            android:textSize="28sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:text="@{Integer.toString(user.age)}"
            android:textColor="#000000"
            android:textSize="28sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView1" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:text="@{user.info}"
            android:textColor="#000000"
            android:textSize="28sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

xml파일의 코드가 길어 보이지만 <data>태그와 TextView의 text 속성만 보도록 합시다.

 

<data>태그의 <variable>에서 xml 파일에서 사용할 데이터를 정의합니다.

name속성은 변수명, type속성은 경로를 의미합니다.

저는 User 객체의 데이터를 활용할 것이기 때문에 User 클래스의 경로로 user를 생성했습니다.

선언된 변수는 "@{...}" 꼴로 사용할 수 있습니다.

MainActivity에 작성될 코드가 xml 파일로 이동했기 때문에 MainActivity의 코드가 깔끔해진 것을 확인할 수 있습니다.

실행 결과

이번 포스팅에서는 DataBinding을 통해 아주 간단한 데이터를 출력해 보았습니다.