안드로이드 DataBinding 사용 방법

안녕하세요
이번 시간에는 DataBinding에 대한 글을 업로드하려 합니다.

DataBinding은 요즘 많이 사용하는 MVVM패턴의 기초되는 내용입니다.

그럼 시작하겠습니다.

버튼을 만들고 그 버튼을 클릭하면 버튼의 text값을 변경하는 앱을 만들었다고 가정해 봅시다.

layout에서 버튼을 만들어주고 id 값을 설정해 줍니다.
이후 Main에서 findViewByid를 통해 버튼을 선언해 주고 버튼을 클릭하면 setText()를 통해서 버튼의 text값을 변경할 것입니다.


문제없이 정상적으로 출력될 것입니다.
하지만 만약에 버튼이 100개 라면 100개를 모두 선언해야 사용할 수 있습니다.
이러한 방법은 비효율 적입니다.

DataBinding은 findViewByid를 대체하는 기술입니다.

findViewByid는 우리 화면에 보이는 view객체를 참조해서 그 객체를 제어합니다.
예를 들어 setText(), setImageResource()등이 있죠

DataBinding은 객체를 참조하는 것이 아닌 객체에 담길 변수를 변경해 이벤트를 처리합니다.

코드와 함께 설명해드리겠습니다.

우선 gradle(Module)에 아래와 같은 내용을 추가해 줍니다.

buildFeatures {
    dataBinding = true
}

만약 안드로이드 스튜디오 4.0 이하일때는 

아래와 같은 내용을 추가해주세요

 dataBinding {
    	enabled= true
    }

DataBinding의 레이아웃 xml 은 최상단이 <layout>으로 감싸져야 합니다.
그리고 그 안에 <data> 요소와 우리가 화면을 구성하는 <LinearLayout>, <RelativeLayout>등으로 나뉘어있습니다.
코드를 보면 이해하기 쉬울 겁니다.

<?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">
    <data>
        <import type="android.view.View" />
        <variable
            name="user"
            type="com.psw.databind.User" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
             android:padding="8dp"
            android:text="@{user.name}"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="@{String.valueOf(user.age)}"/>

        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="좋아요"
            android:checked="@{user.fav}"
            android:onCheckedChanged="@{user::changeFav}"
            />
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="change name"
            android:onClick="@{user::changeName}"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="increase age"
            android:onClick="@{user::increaseAge}"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="change favorite"
            android:backgroundTint="@color/teal_700"
            android:onClick="@{user::toggleFav}"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:backgroundTint="#FFFF3300"
            android:text="change name by lamda functioin"
            android:onClick="@{ (v)-> user.changeName() }"/>

    </LinearLayout>
</layout>

 

<data>
    <import type="android.view.View" />
    <variable
        name="user"
        type="com.psw.databind.User" />
</data>

com.psw.databind.User를 user에 이름으로 사용하겠다는 뜻입니다.

이후 User객체를 만들어 주겠습니다.

public class User {
    public ObservableField<String> name= new ObservableField<>();
    public ObservableInt age= new ObservableInt();
    public ObservableBoolean fav= new ObservableBoolean();



    public User(String name, int age, boolean fav) {
        this.name.set(name);
        this.age.set(age);
        this.fav.set(fav);
    }
    public void changeName(View view){
        name.set("PSW");
    }
    public void increaseAge(View view){
        age.set(age.get()+1);
    }
    public void toggleFav(View view){
        fav.set(!fav.get());
    }
    public void changeFav(CompoundButton view, boolean isChecked){
        fav.set(isChecked);
        Toast.makeText(view.getContext(), "fav : " + fav.get(), Toast.LENGTH_SHORT).show();
    }
    public void changeName(){
        this.name.set("PSW123");
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity {
    public ActivityMainBinding mainBinding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mainBinding= DataBindingUtil.setContentView(this, R.layout.activity_main);

        User user = new User("psw", 25, true);

        mainBinding.setUser(user);

    }
}

앱을 실행하면 4개의 버튼과 User user = new User("psw", 25, true) User에 데이터를 입력해준 값이 출력될 것입니다.

첫 번째 버튼을 눌러보겠습니다.
그러면 소문자인 psw가 대문자 PSW로 변경된 것을 확인할 수 있습니다.

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
     android:padding="8dp"
    android:text="@{user.name}"/>

User에 name의 값을 text로 사용하고 있습니다.
User user = new User("psw", 25, true)이 부분에서 psw 가 출력된 것입니다.

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="change name"
    android:onClick="@{user::changeName}"/>

버튼을 누르면 changeName() 함수가 실행됩니다.

public void changeName(View view){
    name.set("PSW");
}

name에 대문자 PSW를 변수로 넣어준 것입니다.

findViewById를 사용하면 앱이 무거워진다고 들었습니다.
DataBinding를 이용해서 데이터를 처리하는 부분을 한 곳에 모아둘 수 있습니다. 그러면 나중에 유지보수 면에서 편리함을 느낄 수 있을 겁니다.

저도 아직 100% DataBinding을 이해하진 못했습니다. 그래서 설명보단 어떻게 사용하는지에 대해 초점을 두고 글을 작성했습니다. 다음 글에서 LiveData에 대해 업로드하겠습니다.
이후 개념적인 부분을 추가해서 업로드하겠습니다.
수고하셨습니다!