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! – 축하, 찬사, 동의 등에 사용되는 문구. 일반적으로 열정적 인 찬사를 전달합니다.)

DataBinding 시작하기

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

레이아웃과 바인딩 표현

Leave a Comment Cancel Reply