3. Architecture Component UI Layer Data Binding_2

레이아웃 및 바인딩 표현식

표현식 언어를 사용하면 뷰에 의해 전달된 이벤트를 처리하는 표현식을 작성할 수 있다.

데이터 바인딩 라이브러리는 레이아웃의 뷰를 데이터 객체와 결합하는 데 필요한 클래스로 자동 생성한다.

 

데이타 바인딩 레이아웃 파일은 약간 차이가 있으며 layout의 루트 태그로 시작하고 data 요소 및 view 루트 요소가 뒤따른다. 이 view 요소는 결합되지 않은 레이아웃 파일에 루트가 있는 요소이다.

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

data 내의 user 변수는 이 레이아웃 내에서 사용할 수 있는 속성을 설명한다.

<variable name="user" type="com.example.User" />
    

레이아웃 내의 표현식은 '@{}' 구문을 사용하여 특정 속성에 작성된다. 여기서 TextView 텍스트는 user 변수의 firstName 속성으로 설정된다.

<TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@{user.firstName}" />
    

* 레이아웃 표현식은 Unit Test가 불가능하고 IDE 지원이 제한적이므로 작고 단순하게 유지해야 한다. 커스텀 바인딩 어댑터를 사용하면 레이아웃 표현식을 단순화 할 수 있다.

데이터 객체

User 항목을 설명하기 위해 간단한 기존 객체가 있다고 가정해 보자.

    data class User(val firstName: String, val lastName: String)

    

이 유형의 객체에는 변경되지 않는 데이터가 있다. 어플리케이션에는 한 번 읽은 이후에 변경되지 않는 데이터가 있는 게 일반적이다. 또한 다음 예와 같이 자바의 접근자 메서드 사용과 같이 일련의 규칙을 준수하는 객체를 사용할 수 있다.

 

    public class User {
      private final String firstName;
      private final String lastName;
      public User(String firstName, String lastName) {
          this.firstName = firstName;
          this.lastName = lastName;
      }
      public String getFirstName() {
          return this.firstName;
      }
      public String getLastName() {
          return this.lastName;
      }
    }

    

데이터 바인딩 관점에서 이러한 두 클래스는 동등하다. android:text 속성에 사용된 @{user.firstName} 표현식은 전자 클래스의 firstName 필드 및 후자 클래스의 getFirstName() 메소드에 엑세스 한다. 또는 firstName() 메소드가 있다면 이 메소드로 확인된다.

 

데이터 바인딩

각 레이아웃 파일의 결합 클래스가 생성된다. 기본적으로 클래스 이름은 레이아웃 파일 이름을 기반으로 하여 파스칼 표기법으로 변환하고 Binding 접미사를 추가한다. 위 레이아웃 파일 이름은 activity_maiin.xml이므로 생성되는 클래스는 ActivityMainBinding이다.

이 클래스는 레이아웃 속성(Ex: user 변수)에서 레이아웃 뷰까지 모든 결합을 보유하며 결합 표현식의 값을 할당하는 방법을 알고 있다. 권장되는 바인딩 생성 방법은 다음과 같다.

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val binding: ActivityMainBinding = DataBindingUtil.setContentView(
                this, R.layout.activity_main)

        binding.user = User("Test", "User")
    }

    

런타임 시 앱의 UI에는 테스트 사용자가 표시된다. 또는 다음과 같이 LayoutInflater를 사용하여 뷰를 가져올 수 있다.

    val binding: ActivityMainBinding = ActivityMainBinding.inflate(getLayoutInflater())

    

Fragment, ListView 또는 RecyclerView 어댑터 내에서 데이터 바인딩 항목을 사용하고 있다면 다음과 같이 바인딩 클래스 또는 DataBindingUtil 클래스의 inflate() 메소드를 사용할 수 있다.

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

    

표현식 언어

일반적인 기능

표현식 언어는 관리형 코드에서 볼 수 있는 표현식과 매우 비슷하다. 표현식 언어에서는 다음 연산자와 키워드를 사용할 수 있다.

android:text="@{String.valueOf(index + 1)}"
    android:visibility="@{age > 13 ? View.GONE : View.VISIBLE}"
    android:transitionName='@{"image_" + id}'
    

누락된 연산자

관리형 코드에서 사용할 수 있는 표현식 구문에서 누락된 연산자는 다음과 같다.

Null 병합 연산자

null 병합 연산자(??)는 왼쪽 피연산자가 null이 아니면 왼쪽 피연산자를 선택하고 null이면 오른쪽 피연산자를 선택한다.

android:text="@{user.displayName ?? user.lastName}"
    

상기 연산의 기능은 다음과 같다.

android:text="@{user.displayName != null ? user.displayName : user.lastName}"
    

속성 참조

표현식은 다음 형식을 사용해 클래스의 속성을 참조할 수 있으며 이 형식은 fields, getters 및 ObservableField 객체에서도 동일하다.

android:text="@{user.lastName}"
    

Null Pointer Exception 방지

생성된 데이터 바인딩 코드는 자동으로 null 값을 확인하고 Null Pointer Exception을 방지한다. 예를 들어 @{user.name 표현식에서 user가 null이면 user.name에 null이 기본값으로 할당된다. age의 유형이 int 인 user.ag를 참조하면 데이터 바인딩은 0의 기본값을 사용한다.

View 참조

표현식은 다음 구문을 사용하여 ID로 레이아웃의 다른 뷰를 참조할 수 있다.

android:text="@{exampleText.text}"
    

다음 예는 TextView View 또는 동일한 레이아웃의 EditText 뷰를 참조한다.

<EditText
        android:id="@+id/example_text"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"/>
    <TextView
        android:id="@+id/example_output"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{exampleText.text}"/>
    

컬렉션

list, map, sparse, array와 같은 일반 컬렉션에는 편의상 [] 연산자를 사용하여 엑세스 할 수 있다.

<data>
        <import type="android.util.SparseArray"/>
        <import type="java.util.Map"/>
        <import type="java.util.List"/>
        <variable name="list" type="List&lt;String>"/>
        <variable name="sparse" type="SparseArray&lt;String>"/>
        <variable name="map" type="Map&lt;String, String>"/>
        <variable name="index" type="int"/>
        <variable name="key" type="String"/>
    </data>
    …
    android:text="@{list[index]}"
    …
    android:text="@{sparse[index]}"
    …
    android:text="@{map[key]}"
    

또한 object.key 표기법을 사용하여 맵의 값을 참조할 수 있다. 

Ex) 상기 에에서 @{map[key]}는 @{map.key}로 대체할 수 있다.

문자열 리터럴

표현식은 다음 구문을 사용하여 앱 리소스를 참조할 수 있다.

android:padding="@{large? @dimen/largePadding : @dimen/smallPadding}"
    

다음과 같이 매개변수를 제공하여 형식 문자열과 복수형을 평가할 수 있다.

android:text="@{@string/nameFormat(firstName, lastName)}"
    android:text="@{@plurals/banana(bananaCount)}"
    

다음과 같이 속성 참조 및 뷰 참조를 리소스 매개변수로 전달할 수 있다.

android:text="@{@string/example_resource(user.lastName, exampleText.text)}"
    

복수형이 여러 매개변수를 사용하면 다음과 같이 모든 매개변수를 전달해야 한다.

      Have an orange
      Have %d oranges

    android:text="@{@plurals/orange(orangeCount, orangeCount)}"
    

이벤트 처리

데이터 바인딩을 사용하면 뷰엣서 전달되는 표현식 처리 이벤트를 작성할 수 있다.

이벤트 속성 이름은 몇가지 예외를 제외하고 리스너 메서드의 이름에 따라 결정된다.

Ex) View.onClickListener에는 onClick() 메소드가 있으므로 이 이벤트 속성은 android:onClick이다.

클릭 이벤트는 충돌을 방지하기 위해 android:onClick 이외의 다른 속성이 필요한 특수한 이벤트 핸들러가 있다. 

다음 메커니즘을 사용하여 이벤트를 처리할 수 있다.

1. 메소드 참조: 표현식에서 리스너 메소드의 서명과 일치하는 메소드를 참조할 수 있다. 표현식이 메소드 참조로 계산되면 데이터 바인딩은 리스너에서 메소드 참조 및 소유자 객체를 래핑하고 타겟 뷰에서 이 리스너를 설정한다.표현식이 null로 계산되면 데이터 바인딩은 리스너를 생성하지 않고 대신 null 리스너를 설정한다.

2. 리스너 결합: 이벤트가 발생할 때 계산되는 람다 표현식이다. 데이터 바인딩은 항상 리스너를 생성하여 뷰에서 설정한다. 이벤트가 전달되면 리스너는 람다 표현식을 계산한다.

메소드 참조

이벤트는 android:onClick이 Acitivty 메소드에 할당되는 방식과 유사하게 핸들러 메소드에 직접 결합될 수 있다. View onClick 속성과 비교했을 때 한 가지 주요 이점은 표현식이 컴파일 타임에 처리되는 것이다. 따라서 메소드가 없거나 서명이 올바르지 않으면 컴파일 타임 오류가 발생한다.

메소드 참조와 리스너 결합의 주요 차이점은 실제 리스너 구현이 이벤트가 트리거 될 때가 아니라 데이터가 결합될 때 생성된다는 점이다. 이벤트가 발생할 때 표현식을 계산하려면 리스너 결합을 사용해야 한다.

핸들러에 이벤트를 할당하려면 호출할 메소드 이름이 될 값을 사용하여 일반 결합 표현식을 사용해야 한다.

Ex) 다음과 같은 레이아웃 데이터 객체 예를 확인해 보자

    class MyHandlers {
        fun onClickFriend(view: View) { ... }
    }

    

결합 표현식은 다음과 같이 뷰의 클릭 리스너를 onClickFriend() 메소드에 할당할 수 있다.

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

* 표현식의 메소드 Signature는 리스너 객체에 있는 메소드의 서명과 정확히 일치해야 한다.

리스너 바인딩

리스너 바인딩은 이벤트가 발생할 때 실행되는 결합 표현식이다. 리스너 바인딩은 메소드 참조와 비슷하다. 하지만 리스너 바인딩을 사용하면 임의의 데이터 바인딩 표현식을 실행할 수 있다. 

메소드 참조에서 메소드의 매개변수는 이벤트 리스너의 매개변수와 일치해야 한다. 리스너 바인딩에서는 반환 값만 리스너의 예상 반환 값과 일치해야 한다.(void가 예상되지 않는 한).

Ex) onSaveClick() 메소드가 있는 다음 presenter 클래스를 확인해보자

    class Presenter {
        fun onSaveClick(task: Task){}
    }

    

그러면 다음과 같이 클릭 이벤트를 onSaveClick() 메소드에 결합할 수 있다.

<?xml version="1.0" encoding="utf-8"?>
    <layout xmlns:android="http://schemas.android.com/apk/res/android">
        <data>
            <variable name="task" type="com.android.example.Task" />
            <variable name="presenter" type="com.android.example.Presenter" />
        </data>
        <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent">
            <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:onClick="@{() -> presenter.onSaveClick(task)}" />
        </LinearLayout>
    </layout>
    

표현식에 콜백을 사용하면 데이터 바인딩은 필요한 리스너를 자동으로 생성하여 이벤트에 등록한다. 뷰에서 이벤트가 발생하면 데이터 바인딩은 주어진 표현식을 계산한다. 일반 결합 표현식에서와 같이 이러한 리스너 표현식이 계산되는 동안 계속 데이터 바인딩의 null 및 스레드 안전성이 확보된다.

위 예는 onClick(View)에 전달되는 view 파라미터가 정의되지 않았다. 리스너 결합에서는 두 가지 방식으로 리스너 매개변수를 선택할 수 있다. 즉, 메소드의 모든 파라미터를 무시하거나 모든 파라미터의 이름을 지정할 수 있다. 파라미터 이름 지정을 선택하면 표현식에 파라미터를 사용할 수 있다.

Ex) 상기 표현식을 다음과 같이 작성할 수 있다.

android:onClick="@{(view) -> presenter.onSaveClick(task)}"
    

또는 표현식에서 파라미터를 사용하려는 경우 다음과 같이 작성할 수 있다.

    class Presenter {
        fun onSaveClick(view: View, task: Task){}
    }

    

android:onClick="@{(theView) -> presenter.onSaveClick(theView, task)}"
    

다음과 같이 둘 이상의 파라미터와 함께 람다 표현식을 사용할 수 있다.

    class Presenter {
        fun onCompletedChanged(task: Task, completed: Boolean){}
    }

    

<CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content"
          android:onCheckedChanged="@{(cb, isChecked) -> presenter.completeChanged(task, isChecked)}" />
    

수신 대기 중인 이벤트가 void가 아닌 유형의 값을 반환하면 표현식도 같은 유형의 값을 반환해야 한다. 

ex) LongClick 이벤트를 수신 대기하려면 표현식에서 Boolean을 반환해야 한다.

    class Presenter {
        fun onLongClick(view: View, task: Task): Boolean { }
    }

    

android:onLongClick="@{(theView) -> presenter.onLongClick(theView, task)}"
    

null 객체로 인해 표현식을 계산할 수 없으면 데이터 바인딩은 각기 해당하는 유형의 기본값을 반환한다.

Ex) 참조 유형은 null을, int는 0을 boolean은 false를 기본값으로 반환한다.

 

조건자와 함께 표현식(ex: 삼항연산자을 사용해야 한다면 void를 기호로 사용할 수 있다.

android:onClick="@{(v) -> v.isVisible() ? doSomething() : void}"
    

복잡한 리스너 방지

리스너 표현식은 매우 강력하다. 리스너 표현식을 사용하면 코드를 매우 쉽게 읽을 수 있다. 반면, 복잡한 표현식이 포함된 리스너를 사용하면 레이아웃을 읽고 유지하기 어려워진다. 이러한 표현식은 사용 가능한 데이터를 UI에서 콜백 메소드로 전달하는 것만큼 간단해야 한다. 리스너 표현식에서 호출한 콜백 메소드 내에 비즈니스 로직을 구현해야 한다.

 

즉, 리스너 표현식은 간결하게, 무거운 경우 콜백을 받아 비즈니스 로직 구현

가져오기, 변수 및 포함

데이터 바인딩 라이브러리는 가져오기(Imports), 변수(Variables) 및 포함(Includes)과 같은 기능을 제공한다. 가져오기를 사용하면 레이아웃 파일 내에서 클래스를 쉽게 참조할 수 있다. 변수를 사용하면 결합 표현식에 사용할 수 있는 속성을 설명할 수 있다. 포함을 사용하면 앱 전체에 복잡한 레이아웃을 재사용할 수 있다.

 

Imports(가져오기)

가져오기를 사용하면 관리형 코드에서와 같이 레이아웃 파일 내에서 클래스를 쉽게 참조할 수 있다. data 요소 내에서 0개 이상의 import 요소를 사용할 수 있다.

Ex) 다음은 View 클래스를 레이아웃 파일로 가져온다.

 

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

View 클래스를 가져오면 결합 표현식에서 참조할 수 있다.

Ex) 다음은 View 클래스의 VISIBILE 및 GONE 상수를 참조하는 방법이다.

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

유형 별칭

클래스 이름 충돌이 발생하면 클래스 중 하나의 이름을 별칭으로 바꿀 수 있다. 

Ex) 다음은 com.example.real.estate 패키지이 View 클래스 이름을 Vista로 바꾼다.

<import type="android.view.View"/>
    <import type="com.example.real.estate.View"
            alias="Vista"/>
    

이제 Vista를 사용하여 com.example.real.estate.View를 참조할 수 있다. 그리고 레이아웃 파일 내에서 android.view.View를 참조하는 데 View를 사용할 수 있다.

 

다른 클래스 가져오기

가져온 유형은 변수 및 표현식에서 유형 참조를 사용할 수 있다. 다음 예는 변수 유형으로 사용되는 User 및 List를 보여준다.

<data>
        <import type="com.example.User"/>
        <import type="java.util.List"/>
        <variable name="user" type="User"/>
        <variable name="userList" type="List&lt;User>"/>
    </data>
    

또한 가져온 유형을 사용하여 표현식의 일부를 변환할 수 있다.

Ex) 다음은 connection 속성을 User 유형으로 변환한다.

<TextView
       android:text="@{((User)(user.connection)).lastName}"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>
    

또한 표현식에서 정적 필드 및 메소드를 참조할 때 가져온 유형을 사용할 수 있다. 

Ex) MyStringUtils 클래스를 가져와서 capitalize 메소드를 참조한다.

<data>
        <import type="com.example.MyStringUtils"/>
        <variable name="user" type="com.example.User"/>
    </data>
    …
    <TextView
       android:text="@{MyStringUtils.capitalize(user.lastName)}"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>
    

 

변수

data 요소 내에서 여러 variable 요소를 사용할 수 있다. 각 variable 요소는 레이아웃 파일 내 결합 표현식에 사용될 레이아웃에 설정할 수 있는 속성을 설명한다.

Ex) 다음은 user, image 및 note 변수를 선언한다.

<data>
        <import type="android.graphics.drawable.Drawable"/>
        <variable name="user" type="com.example.User"/>
        <variable name="image" type="Drawable"/>
        <variable name="note" type="String"/>
    </data>
    

변수 유형은 컴파일 타임에 검사된다. 따라서 변수가 Observable을 구현하거나 식별 가능한 컬렉션이라면 그 사항이 유형에 반영되어야 한다.

변수가 Observable 인터페이스를 구현하지 않는 기본 클래스 또는 인터페이스라면 변수들이 식별되지 않는다.

다양한 구성(Ex: 가로모드, 세로모드)의 레이아웃 파일이 서로 다를 때 변수가 결합된다. 이러한 레이아웃 파일 간에 충돌하는 변수 정의가 있어서는 안된다.

생성된 바인딩 클래스에는 설명된 각 변수의 setter 및 getter가 있다. 변수는 setter가 호출될 때까지 기본 관리형 코드 값을 사용한다. 

Ex) 참조 유형은 null을, int는 0을, boolean은 false를 기본값으로 사용한다.

 

필요에 따라 결합표현식에 사용하기 위해 context라는 이름의 특수 변수를 생성한다. context의 값은 루트 뷰의 getContext() 메소드에서 가져온 Context 객체이다. context 변수는 이 이름을 사용하는 명시적 변수 선언으로 재정의된다.

 

포함

속성에 앱 네임스페이스 및 변수 이름을 사용함으로써 포함하는 레이아웃에서 포함된 레이아웃의 결합으로 변수를 전달할 수 있다. 

Ex) name.xml 및 contact.xml 레이아웃 파일로부터 포함된 user 변수를 보여준다.

<?xml version="1.0" encoding="utf-8"?>
    <layout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:bind="http://schemas.android.com/apk/res-auto">
       <data>
           <variable name="user" type="com.example.User"/>
       </data>
       <LinearLayout
           android:orientation="vertical"
           android:layout_width="match_parent"
           android:layout_height="match_parent">
           <include layout="@layout/name"
               bind:user="@{user}"/>
           <include layout="@layout/contact"
               bind:user="@{user}"/>
       </LinearLayout>
    </layout>
    

데이터 바인딩은 포함을 병합 요소의 직접 하위 요소로 지원하지 않는다.

Ex) 다음 레이아웃은 지원되지 않는다.

<?xml version="1.0" encoding="utf-8"?>
    <layout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:bind="http://schemas.android.com/apk/res-auto">
       <data>
           <variable name="user" type="com.example.User"/>
       </data>
       <merge><!-- Doesn't work -->
           <include layout="@layout/name"
               bind:user="@{user}"/>
           <include layout="@layout/contact"
               bind:user="@{user}"/>
       </merge>
    </layout>