( Android ) Data Binding 사용하기

Data Binding 이란?

사전적 의미는 아래와 같다.

Data : 데이터

Binding : 묶음

즉, 데이터를 묶는다는 것

데이터를 뭘 묶는다는건가?

xml 의 컴포넌트 요소들과 java를 묶어주는 것.

Without Data Binding ......

기존에 데이터 바인딩없이는 아래와 같이 썼을 것이다.

xml

<Button
    android:id="@+id/btn_1"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    ...
    />
<Button
    android:id="@+id/btn_2"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

...
/>
<Button
    android:id="@+id/btn_3"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

...
/>

java

mBtn1 = (Button) findViewById(R.id.btn_1);
mBtn2 = (Button) findViewById(R.id.btn_2);
mBtn3 = (Button) findViewById(R.id.btn_3);
// ... endless findViewById...

xml 에서 선언하고.. java 에서 findviewbyid 로 찾고...

선언하고..찾고..매칭시켜주고...

선언하고..찾고...

With Data Binding !!

데이터 바인딩을 이용하면 아래와 같이 강력하게 이용할 수 있다.

xml

<Button
    android:id="@+id/btn_1"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    ..
    />
<Button
    android:id="@+id/btn_2"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
..
/>
<Button
    android:id="@+id/btn_3"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
..
/>

java

ActivityMainBinding binding;

binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
binding.setActivity(MainActivity.this);

이후, binding 의 멤버 변수로 꺼내쓸 수 있다.

아래와 같이..

 

xml 컴포넌트가 많아지면 많아질수록.. 

Android Databinding 라이브러리는 더 큰 효과를 낼 것이다.

어떻게 쓰는가?

그렇다면, 데이터 바인딩을 이용하기 위해선 어떻게 하면 될까?

Step 1. Gradle 등록

간단하다. 

Gradle (app) 의 android 섹션에 아래와 같이 Databinding 옵션만 추가해주면 된다.

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

Step 2. xml 최상위 wrapper 를 layout 으로 감싸기

기존의 xml 의 이런 형식에서,

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="ywlee.com.databindingexample.MainActivity"

    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/main_txv_binding_test"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/main_btn_binding_test"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:layout_constraintTop_toBottomOf="@id/main_txv_binding_test"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        android:text="Test"
        />
</android.support.constraint.ConstraintLayout>

아래와 같이 변경해 주기만 하면 된다.

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="ywlee.com.databindingexample.MainActivity" >
<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/main_txv_binding_test"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/main_btn_binding_test"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:layout_constraintTop_toBottomOf="@id/main_txv_binding_test"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        android:text="Test"
        />
</android.support.constraint.ConstraintLayout>

</layout>

기존의 xml 소스에 layout 으로 감싸주기만 하면, 

우리의 android studio 는 자동으로 Binding Class 를 생성해 줄것이다.

우리는 생성된 이 클래스를 java 에서 사용하기만 하면 된다.

Step 3. Java 에서의 사용

package ywlee.com.databindingexample;

import android.app.Activity;
import android.databinding.DataBindingUtil;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;

import ywlee.com.databindingexample.databinding.ActivityMainBinding;

public class MainActivity extends Activity {
    ActivityMainBinding binding;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // DataBinding 은 setContentView 가 필요없다.
//        setContentView(R.layout.activity_main);

        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        binding.setActivity(MainActivity.this);

        // 개쩜..바로 사용할수 있음..dddd
        binding.mainTxvBindingTest.setText("Test");
    }

    public void onButtonClick() {
        binding.mainTxvBindingTest.setText("clicked");
        binding.mainTxvBindingTest.setTextColor(Color.parseColor("#ff0000"));
    }
}

xml 의 이름이 activity_main.xml 이었기 때문에, 

Binding Class 는 ActivityMainBinding 이 되었다.

우리는 이 Class 를 멤버변수로 선언하여 사용하기만 하면된다.

Github

https://github.com/ywlee861009/Android-DataBinding-Example.git