DataBinding 사용하기

Data Binding이란?

이미 많은 사람들이 XML을 사용하면서 Data Binding이라는 것을 사용하고 있습니다.

 

Data Binding은 XML파일의 Data를 코드를 짜는 곳에서 결합(Binding)시킬 수 있도록 하는

Jetpack에서 지원하는 기능 중 하나입니다.

 

Data Binding은 실질적인 로직들과 XML을 아주 편리하게 연결해 주기 때문에 

FindViewById로 하나하나 연결해줄 필요가 없어

코드를 작성할 때 글루코드를 줄일 수 있도록 도움을 주는 

안드로이드 프로그래밍을 편리하게 도와주는 기능입니다.

 

 

글루코드란?
프로그램의 요구사항 구현에는 기여하지 않지만,
본래 호환성이 없는 부분끼리 결합하기 위해 작동하는 코드
- 제타위키

 

버튼을 클릭할 시에 EditText에 입력된 값을 확인하는

간단한 예제로 Data Binding의 사용법을 알아보겠습니다.

 

Data Binding 사용법

가장 먼저 build.gradle에 있는 app 수준 파일에 android 내부에

data Binding을 하기 위한 세팅코드를 입력해줘야 합니다.

android {   
	﹒﹒﹒
	buildFeatures {
        dataBinding = true
    }
}

 

그 이후 

상단바의 Sync Project with Gradle Files (코끼리 모양 버튼)이나 

Sync Now 버튼을 클릭하여 gradle을 적용시켜 줍니다.

 

그럼 오른쪽 아래 하단에 프로그래스바가 진행이 될 텐데

프로그래스바가 사라진다면 적용이 완료된 것입니다.

 

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">
    
    <Button
            android:id="@+id/sendBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="입력"
            app:layout_constraintStart_toEndOf="@+id/inputEv"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/inputEv"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.473"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

먼저 화면을 구성하기 위해 위와 같이 EditText와 Button이 있는 화면을 구성해 주었습니다.

 

그럼 이제 정말 DataBinding을 들어가 보겠습니다.

 

XML 설정하기

• Layout 태그 만들기
• 해당 태그에 디자인 요소 모두 옮기기
• data태그 생성하기
• variable 태그 생성하기
• variable 태그 입력하기

위와 같은 순서로 진행된다면 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="activity"
            type="com.test.myapplication.MainActivity" />
    </data>

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

        <Button
            android:id="@+id/sendBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="입력"
            android:onClick="@{activity::onClickButton}"
            app:layout_constraintStart_toEndOf="@+id/inputEv"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/inputEv"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.473"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

variable에 들어가는 내용은 name과 type으로

name에는 해당 XML을 선언할 변수명, type은 code를 구성하는 해당 소스의 폴더 위치를 입력합니다.

 

세팅한 XML의 Activity 설정하기

package com.test.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.View
import androidx.core.widget.doAfterTextChanged
import androidx.databinding.DataBindingUtil
import com.test.myapplication.databinding.ActivityMainBinding
import kotlinx.coroutines.flow.MutableStateFlow

class MainActivity : AppCompatActivity() {

    // 늦은 선언으로 Binding 변수 선언해주기
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // DataBinding 을 진행하는 부분
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.activity = this
         
        
        binding.sendBtn.setOnClickListener {
            Log.d("TAG", "onClickButton: ${binding.inputEv.text}")
        }
    }

}

 

Activity에서는 위의 코드와 같이 간단하게 binding 변수를 선언하고, 

binding 변수에 DataBindingUtil에 setContentView를 이용하여

자신을 나타내는 this와 해당 레이아웃의 아이디로 XML과 Activity를 Binding 해주는 것입니다.

 

그 이후 findByViewById로 사용했던 것처럼 setOnClickListener를 이용하여 클릭을 입력받는 방식입니다.

 

마무리

Data Binding은 위와 같이 굉장히 편리하고 사용하기 쉽다는 것을 알 수 있습니다.

아직 사용하면서 큰 이점을 느끼지 못하셨을 수도 있지만,

점차 사용하며 프로젝트가 커짐에 따라

Data Binding은 MVVM과 LiveData라는 것과 만날 때 더욱 편리하게 이용이 가능합니다.

 

하나씩 모든 컴포넌트를 연결할 필요가 없어 글루코드를 줄일 수 있고,

Data Binding은 구글에서도 권장하는 좋은 기능이기에 알아둘 필요가 있습니다.