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

Data Binding ?

bind : 묶다

데이터를 묶는다?

이렇게 말하면 감이 잘 안올 것이다.

안드로이드에서 데이터 바인딩이란 ? UI 요소와 데이터를 선언적 형식으로 결합할 수 있게 도와주는 라이브러리이다.

 

전에는 해당 클래스에서 findViewById 를 해주어 해당 UI의 텍스트를 변경해주거나,

뷰바인딩을 사용하여 binding.text 해서 UI의 데이터에 접근하였다.

 

그런데, data binding을 사용하게 되면 직접 호출하지 않고

레이아웃 파일에서 직접 데이터를 할당해줄 수 있다!!!!!

장점

1. 클래스에서 호출하지 않고, xml파일에서 데이터변경이 가능하다!
2. 리사이클러뷰를 사용할 때 각각의 item 을 지정해주는 것이 가능하다!(매우매우 효율적)
3. data가 바뀌면 자동으로 view가 변경된다.
4. 코드 가독성이 좋아지고, 직접 호출하는 것보다 코드량이 줄어든다.

특히, MVP, MVVM 패턴을 구현하기 위해 유용하게 사용된다!!

 

장점 2번을 활용한 실습을 진행해보자!!

 

1. 데이터바인딩을 사용하기 위해 Gradle파일에 다음을 추가해주자

//데이터 바인딩 사용
dataBinding {
    enabled = true
}

2. 데이터바인딩을 적용할 xml파일에 가서 Layout태그와 data태그를 추가해주자!

리사이클러뷰 item에 적용할 것이니 item.xml파일에 가서 추가하자!

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="preferDiaryItem"
            type="com.cookandroid.teamproject1.home.model.ResponseAllDiaryData.Result" />
    </data>

처음에 layout을 추가 안했더니 에러가나서 구글링을 해보니 layout태그로 감싸고 진행해야 한다고 한다..

그리고 data태그에 적절한 이름을 추가하고, 서버에서 받아올 데이터파일을 import해주자!

서버에서 받아올 Data.Result 데이터

3. 리사이클러뷰에 사용한 어댑터 클래스에서 받아온 데이터리스트를 위에서 지어준 preferDiaryItem하고 bind해준다.

inner class Holder(val binding : ItemHomeRandomBinding) : RecyclerView.ViewHolder(binding.root){
    fun bind(preferDiary: ResponseAllDiaryData.Result){
        binding.preferDiaryItem = preferDiary
    }
}

그럼 preferDiaryItem에 받아온 데이터들을 모두 bind해주었다.

 

4. bind를 통해 xml에 데이터를 저장하였으니 이제 xml파일에서 데이터를 불러오자!!

<TextView
    android:id="@+id/item_home_random_img_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="14dp"
    android:fontFamily="@font/notosans"
    android:text="@{preferDiaryItem.diaryTitle}"
    android:textColor="@color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="@id/item_home_random_img_nickname" />

<TextView
    android:id="@+id/item_home_random_img_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="8dp"
    android:fontFamily="@font/notosans"
    android:text="@{preferDiaryItem.startDate}"
    android:textColor="@color/white"
    android:textSize="10sp"
    app:layout_constraintBottom_toBottomOf="@id/item_home_random_img_location"
    app:layout_constraintRight_toRightOf="@id/item_home_random_img" />

이렇게 중간에 @와 아까 네이밍해준 preferDiaryItem.해당변수이름 적어주면 끝!!

서버에서 받아온 데이터를 하나하나 bind를 통해 setText안해주어도

해당 xml파일에서 쉽게 변경할 수 있다!!!!!

 

데이터바인딩을 통해 코드 몇 줄은 줄일 수 있고, 가독성도 좋아지니 꼭 사용해보자~!!