Android Jetpack: Data Binding 사용하기
CODEPHOBIA > Tech

Android Jetpack: Data Binding 사용하기


 

이 문서는 Android Jetpack:Empower your UI with Android Data Binding 을 번역했습니다.

 

Data Binding 라이브러리는 레이아웃의 UI 요소에 선언적으로 데이터 소스를 바인딩할 수 있도록 도와주는 라이브러리입니다.

레이아웃은 종종 액티비티 안에서 UI 프레임워크의 메서드들을 호출하는 코드로 선언됩니다.  예를 들자면 다음과 같은 코드는 TextView 위젯을 찾기 위해 findViewById() 를 호출하고 이를 viewModel 의 email 속성에 바인딩합니다.

 

TextView txtView = findViewById(R.id.text_demo);
txtView.setText(viewModel.getEmail());

 

일전의 포스트에서는 Android Jetpack 을 이용해 군더더기 코드를 제거하고 개발 생산성을 높이는 것에 대해서 광범위하게 다뤘습니다. Data Binding 은 Android Jetpack 의 컴포넌트들 중 하나로 개발자들이 선언적으로 관찰 가능한 데이터를 UI 요소에 바인딩할 수 있도록 해줍니다. 이는 액티비티 내에서 많은 UI 프레임워크 메서드 호출을 제거해주고 단순하게 만들어 유지보수를 쉽게 할 수 있도록 도와줍니다.

기본적인 데이터 바인딩 호출에 대해 살펴봅시다.

 

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

 

이처럼 코드 한 줄로 userName 을 TextView 에 바인딩할 수 있습니다.

 

DataBinding 시작하기

Data Binding 라이브러리는 유연성과 넓은 호환성을 제공합니다. 이 라이브러리는 support 라이브러리로 안드로이드 4.0(API level 14) 이상에서 사용할 수 있습니다.

Data Binding 을 사용하기 위해서는 Android Plugin for Gradle 1.5.0-alpha1 이상이 필요합니다.

안드로이드 스튜디오에서 Data Binding 을 이용하기 위해서는 다음 단계를 따릅니다.

1. Android SDK manager 의 Support Repository 에서 라이브러리를 다운받습니다.

2. 우리의 앱이 Data Binding 을 사용할 수 있도록 모듈의 build.gradle 파일에 다음과 같은 설정을 추가합니다.

 

// enable data binding for app here
android {
    ...
    dataBinding {
        enabled = true
    }
}

 

안드로이드 스튜디오의 Data Binding 지원

안드로이드 스튜디오는 Data Binding 코드를 위한 몇 가지 에디터 기능을 지원합니다.  예를 들면 Data Binding 표현을 위해 다음과 같은  것들을 제공합니다.

  • 문법 강조
  • 코드 추적
  • XML 자동완성
  • 문법 오류 표시

기본값이 제공된다면 레이아웃 에디터의 Preview 패널은 Data Binding 표현의 기본값을 보여줍니다.  예로, 다음과 같이 코드를 작성하면 미리보기의 TextView 위젯에는 default_value 의 값을  보여줍니다.

 

<TextView android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@{person.country, default=default_value}"/>

 

앱 개발 시 디자인 단계에서만 기본값을 보여주기를 원한다면 default 대신 tools 속성을 이용할 수 있습니다.

 

레이아웃과 바인딩 표현

표현 언어는 뷰에 일어나는 이벤트들을 제어할 수 있는 표현들을 제공합니다.  Data Binding 라이브러리는 데이터 객체를  레이아웃의 뷰에 바인딩하기 위해 필요한 클래스를 자동으로 생성해줍니다.

Data Binding 레이아웃 파일은 다음과 같이 루트 태그로 layout 을 사용하며, 자식으로 data 요소와 루트 뷰 요소를 작성하기에 기존의 레이아웃 파일과는 약간의 차이점이 있습니다. 뷰 요소는 기존의 레이아웃 파일에서 루트 태그에 해당하는 부분입니다.

 

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
   <data>
       <variable name="person" type="com.example.Person"/>
   </data>
   <LinearLayout
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <TextView android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="@{person.firstName}"/>
       <TextView android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="@{person.lastName}"/>
   </LinearLayout>
</layout>

 

data 태그에 선언된 person 변수는 이 레이아웃에서 사용되는 속성을 의미합니다. 레이아웃 안에서 표현식들을 사용하기를 원한다면 “@{}” 와 같은 문법을 이용해 속성을 이용할 수 있습니다.

다음 코드에서는 TextView 의 text 가 person 변수의 firstName 으로 설정됩니다.

 

<variable name="person" type="com.example.Person" />
<TextView android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@{person.firstName}" />

 

그러면 우리의 레이아웃에 목업 데이터를 바인딩해봅시다.

이를 위해서는 먼저 Person 클래스가 필요합니다.

 

public class Person {
  public final String firstName;
  public final String lastName;
  public Person(String firstName, String lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
  }
}

 

기본적으로 바인딩 클래스는 레이아웃 파일마다 생성되며 이 클래스명은 레이아웃 파일의 이름을 Parcal case 로 변환하여 Binding 접미사를 붙여 만들어집니다. 앞의 레이아웃 파일은 activity_main.xml 이며, 생성된 클래스는 MainActivityBinding 이 됩니다. 이 클래스는 레이아웃의 속성(위의 코드에서는 person)과 내부의 뷰에 대한 바인딩을 가지고있으며 바인딩 표현식에 대한 값들을 어떻게 할당하는지 알고있습니다. 우리의 바인딩을 생성하는 모범 사례는 다음과 같이 레이아웃을 올리는 동안에 실행하는 것입니다.

 

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   MainActivityBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
   Person person = new person("Test", "Person");
   binding.setPerson(person);
}

 

LayoutInflater 를 이용하면 뷰를 얻어올 수 있습니다.

 

MainActivityBinding binding = MainActivityBinding.inflate(getLayoutInflater());

 

만약 Fragment 나 ListView, RecyclerView adapter 등에서 Data Binding 을 사용한다면 바인딩 클래스나 DataBindingUtil 클래스의 inflate() 메서드를 사용할 수 있습니다.

 

ListItemBinding binding = ListItemBinding.inflate(layoutInflater, viewGroup, false);
// or
ListItemBinding binding = DataBindingUtil.inflate(layoutInflater, R.layout.list_item, viewGroup, false);

 

시원한 바나나들! (Cool bananas! – 축하, 찬사, 동의 등에 사용되는 문구. 일반적으로 열정적 인 찬사를 전달합니다.)