[Android] Data Binding Library (데이터 바인딩)

1. Data Binding이란?

---

Data Binding이란 선언방식으로 레이아웃의 UI 구성요소를 앱의 데이터 소스와 결합할 수 있게 지원해 주는 라이브러리이다

레이아웃은 findViewById()를 호출하여 결합하지만 레이아웃 파일에서 구성요소를 결합하면

엑티비티에서 많은 UI 프레임워크 호출을 하지 않고 앱 성능이 향상되며 메모리 누수 및 null 포인터 예외를 방지할 수 있다

데이터 바인딩은 데이터 변경을 쉽게 식별하기 위한 클래스 및 메서드를 제공한다

기본 데이터 소스가 변경될 때 UI 새로고침에 관해 신경 쓰지 않아도 됩니다. 변수 또는 속성을 식별 가능하게 만들며 라이브러리를 통해 객체, 필드 또는 컬렉션을 식별 가능하게 만들 수 있다

데이터 결합 라이브러리는 레이아웃의 변수 및 뷰에 액세스하는 데 사용되는 결합 클래스를 생성합니다

데이터 결합 라이브러리는 속성의 데이터 변경사항을 받는 동시에 속성의 사용자 업데이트를 수신 대기하는 양방향 데이터 결합을 지원한다

 

https://developer.android.com/topic/libraries/data-binding?hl=ko 

데이터 결합 라이브러리  |  Android 개발자  |  Android Developers

2. build.gradle (Module)

---

android {
    //Android Studio 4.0 버전 이상일때,
    buildFeatures {
        dataBinding = true
    }
    
    //Android Studio 4.0 버전 미만일때,
    dataBinding {
    	enabled= true
    }
}

build.gradle(Module: app)에서 DataBinding을 허용한다

3. 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>
        <import type="android.view.View"/>

        <variable
            name="viewModel"
            type="com.example.myviewbinding.TestDataClass" />
    </data>

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

        <Button
            android:id="@+id/my_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:text="dialog"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/my_edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:text="@{viewModel.test_Text}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/my_button" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

DataBinding을 사용하기 위해서는 전체 xml 코드를 layout을 감싸줘야 한다

직접 작성하는 방법도 있고 가장 상위의 레이아웃을 클릭 한후 (mac: option+Enter, Windows: alt+Enter)를 누르면 선택창에 Convert to data binding layout이 나오는데 클릭하면 자동으로 작성해 준다

    <data>
        <import type="android.view.View"/>

        <variable
            name="viewModel"
            type="com.example.myviewbinding.TestDataClass" />
    </data>

data 요소 내에서 여러 variable를 선언할 수 있는데, XML에서 사용할 변수라고 생각하면 됩니다. 즉, variable 요소는 레이아웃 파일 내 표현식에 사용될 프로퍼티입니다. 아래는 user, image 및 note라는 variable을 선언한 예제입니다.

생성된 바인딩 클래스에는 각 variable에 대한 setter와 getter가 정의되어 있습니다. variable에 대해서 setter가 호출되기 전까지는 default 값을 사용합니다. 예를 들어 참조 타입은 null과 같은 값을 가지고 있습니다.

최상위 태그를 <layout>으로 지정한 데이터 바인딩이 적용된 XML에서 Context 객체에 접근할 수 있습니다. 즉 Variable로 선언하지 않고도 사용할 수 있는데, 이는 루트 뷰의 getContext() 메서드에서 가져온 Context 객체입니다.

<data>
    <import type="android.view.View"/>
</data>

<TextView
   android:text="@{user.lastName}"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:visibility="@{user.isAdult ? View.VISIBLE : View.GONE}"/>

참조한 클래스는 바인딩 표현식(@{})안에서 위와 같이 사용할 수 있습니다. 위의 예제는 View 클래스의 상수에 해당하는 VISIBLE과 GONE을 사용하고 있습

import

import는 레이아웃 파일 안에서 클래스에 대해 쉽게 참조할 수 있도록 도와줍니다. data 태그 내에서 선언하며, 만약 레이아웃 파일 내에서 View 클래스를 참조한다고 가정하면 아래와 같이 사용할 수 있습니다. 즉, 코드에서 import를 통해 클래스를 쉽게 참조하는 것처럼, View에서도 코드와 같은 방식으로 호출하는 것입니다.

 

3. Kotlin 파일

---

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

        var testButton: Button = findViewById(R.id.my_button)
        testButton.setOnLongClickListener(object :View.OnLongClickListener {
            override fun onLongClick(p0: View?): Boolean {
                return true
            }
        })

        testButton.setOnLongClickListener {
            true
        }

        var testEditText: EditText = findViewById(R.id.my_edittext)

        testEditText.setOnFocusChangeListener(object : View.OnFocusChangeListener {
            override fun onFocusChange(v: View?, hasFocus: Boolean) {
                if(hasFocus) {
                    //method
                }
            }
        })

        testEditText.setOnFocusChangeListener { v, hasFocus ->
            if(hasFocus){
                //method
            }
        }


    }
}

 

 

 

 

data class TestDataClass(
    var Test_Text: String,
    var Test_Text2: String,
    var Test_Text3: String
)