[Android] Databinding 🔗

Intro

데이터바인딩을 공부한다면, Jetpack과 AAC를 들어본 적 있을 것이다.
Jetpack은 2018년 구글 IO행사에서 발표된 안드로이드 앱 개발 패키지 묶음 입니다.
Databinding은 JetPack의 구성 요소 중 아키텍처와 관련된 AAC부분에 속한다.
이름 그대로 뷰에 데이터를 묶어주는 역할을 하는 AAC 기법의 하나.
데이터 바인딩 을 정리하자.

---

📝 Android Developers 공식 문서를 번역합니다.

Reference : https://developer.android.com/topic/libraries/data-binding

---

DataBinding

The Data Binding Library is a support library that allows you to bind UI components in your layouts to data sources in your app using a declarative format rather than programmatically.

Google에선 데이터바인딩에 대해 위와 같이 설명하였다.
데이터바인딩 라이브러리는 프로그래밍 방식이 아닌 선언적인 형식을 사용하여 레이아웃의 UI 구성요소에 앱의 데이터 소스를 바인딩 할 수 있는 라이브러리이다.

레이아웃은 종종 UI 프레임워크 메소드라고 불리우는 액티비티내에서 정의되기도한다.

아래의 예제를 보자.

findViewById()를 이용하여 UI 구성요소인 Textview를 찾고 viewmodel변수의 속성인 userName을 바로 바인딩 시킨다.

findViewById<TextView>(R.id.sample_text).apply {
    text = viewModel.userName
}

다른 예제를 보자.

데이터바인딩 라이브러리를 사용하여 Layout file에 직접 위젯에 text를 넣는 방법을 보여준다.
이 방법은 위에서 본 코드를 없앨 수 있다.
대신, @{} 👈🏻 이러한 syntax를 사용하여 나타낼 수 있다.

<TextView
    android:text="@{viewmodel.userName}" />

Benefits of Use

• 바인딩 컴포넌트는 액티비티에서 적혀지게 되었던 UI 프레임워크와 관련된 많은 코드를 줄일 수 있고, 더 간단하게 혹은 더 쉽게 유지 보수 할 수 있다.
• NPE과 메모리 누수를 막는데 도움을 주는 등 앱의 성능을 높일 수 있다.

---

🚸 데이터 바인딩을 주의해서 쓰자.

구글 공식 사이트에 나와있는 것 처럼, 단순히 findViewById()를 대체하기 위한 목적이라면 dataBinding보단 ViewBinding을 권하고 있다.
(뷰바인딩이 나온 목적이 대부분의 개발자들이 데이터바인딩을 findViewById()대체 수단으로 사용하고 있기에 나왔다고 하였다.)

혹시, ViewBinding과 DataBinding의 차이가 궁금하다면
다음의 포스트를 보자. 👉🏻 ViewBinding VS DataBinding이야기

---

Using the DataBinding Library

사용에 앞서, 모든 라이브러리가 그렇듯 세팅을 해야할 것이다.
build.gradle파일에

android{
.
.
.
  dataBinding{ 
      enabled = true 
  }
}

이렇게 한 줄 추가해주자.

👋 혹시.. gradle버전이

classpath "com.android.tools.build:gradle:4.1.0"

이렇게 3.6버전을 넘어간다면

android{
.
.
.
    buildFeatures {
            dataBinding = true
	}
}

이런 식으로 추가해줘야 할 것이다.

Layout에 Binding표현을 넣자.

일반적으로 xml file을 열어보면

<ConstraintLayout...
        xmlns:app="http://schemas.android.com/apk/res-auto">
    <!-- UI layout's root element -->
<ConstraintLayout/>

이런식으로 구성되어 있을 것이다.
그럼 레이아웃 파일의 루트 태그에 Layout을 추가해야 한다.
추가한 아래의 예시를 보자.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="viewmodel"
            type="com.myapp.data.ViewModel" />
    </data>
    <android.support.constraint.ConstraintLayout 		
        android:layout_width="match_parent" 		
        android:layout_height="match_parent"> 
        
    	<TextView 			
          android:id="@+id/tv_start"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@{viewmodel.data}"
          tools:layout_editor_absoluteX="0dp"
          tools:layout_editor_absoluteY="0dp" />
</android.support.constraint.ConstraintLayout>


</layout>

😹 data는 갑자기 왜 생겼냐고?

위의 예시에서 data 태그는 뷰모델을 객체화 시켜서 사용할 수 있게한다.
'viewmodel'의 객체명으로 도트 연산자를 통해 클래스의 변수나 메소드에 접근 할 수 있다.
위의 예제에서 viewmodel에 선언된 data값을 가져와서 tv_start에 바인딩 시켜준다.
클래스 객체화로 레이아웃에서 위젯의 설정값을 변경함으로써 소스코드를 줄일 수 있는 것이다.

Binding Class 네이밍 변경

레이아웃의 루트 태그를 이용해서 변경하면 레이아웃 파일 이름을 기준으로 파스칼 표기법에 따라 바인딩 파일이 생성된다.
[레이아웃명]Binding 👈🏻 이러한 형식으로 생겼다.
ex) activity_main.xml 👉🏻 ActivityMainBinding 이렇게 된다.
근데 이러한 이름 표기법이 좀 별로 일 수 있다. 엄청나게 긴 클래스 이름이면?
그래서 커스텀이 가능하다.

<data
	class="Main">        
</data>

위와 같이 class="바꿀 이름"을 넣어서 바인딩 시킬 수 있다.
헷갈리지 않게 잘 네이밍할 필요가 있겠다.

---

Work with Obsrevable data Objects

👀 관찰가능한 데이터 객체와 쓰기 좋다.

• DataBinding Library는 데이터의 변경 사항을 쉽게 관찰할 수 있는 클래스와 메서드를 기본으로 제공한다.
• 기본 데이터가 변경 될 때 UI 새로 고침에 대해 걱정할 필요가 없다.
• 변수 or 속성을 관찰 가능하게 만들 수 있다.
• 라이브러리르 사용하면 개체, 필드, 컬렉션을 관찰할 수 있다.

---

Two-way data binding

• 데이터바인딩 라이브러리는 양방향 데이터 바인딩이다.
• 이 유형의 바인딩에 사용되는 표기법은 속성에 대한 데이터 변경 사항을 수신하고 동시에 해당 속성에 대한 사용자 업데이트를 수신하는 기능을 지원한다.

---

Binding adapters

여기서 정말 기똥찬 기능이 하나 나온다.👍

• 모든 레이아웃 표현식마다, 해당 속성 또는 리스너를 설정하는데 필요한 framework 호출을 만드는 바인딩 어댑터가 존재한다.
• 예를 들자면, BindingAdapter는 setText() 메서드 호출하여 text속성을 설정하거나 setOnClickListener() 메서드를 호출하여 클릭 리스너 이벤트를 추가할 수도 있단거다.🙌
• android.databinding.adapter 패키지 내에서 사용 가능하다
• 다음과 같이 사용자 지정 어댑터도 충분히 만들 수 있다.

@BindingAdapter("app:goneUnless")
fun goneUnless(view: View, visible: Boolean) {
    view.visibility = if (visible) View.VISIBLE else View.GONE
}

레이아웃에선

<TextView
          layout_width="wrap_content"
          layout_height="wrap_content"
          ...
          app:goneUnless="@{true}" //이렇게 쓰면 된다.
          />

이 얼마나 쉽게 쓰이는가..🤩

---