[안드로이드] 데이터 바인딩(DataBinding)

DataBinding을 계속해서 데이터바인딩으로 지칭하겠습니다.

이번 포스팅은 안드로이드 아키텍처 컴포넌트 중 하나인 데이터 바인딩에 대해서 알아보겠습니다.

 

앞번 포스팅에서는 뷰 바인딩에 대해서 다뤄봤었는데요.

마지막에 뷰바인딩과 데이터바인딩의 차이도 한번 다뤄보겠습니다.

 

2024.01.22 - [안드로이드] - [Android] 안드로이드 아키텍처 컴포넌트 (Android Architecture Components) 간단 정리

[Android] 안드로이드 아키텍처 컴포넌트 (Android Architecture Components) 간단정리

2024.02.18 - [안드로이드] - [Android] 뷰 바인딩(ViewBinding)

[Android] 뷰 바인딩(ViewBinding)

 

 

뷰 바인딩에 대해서 공부했던 공식문서도 같이 첨부하겠습니다.

https://developer.android.com/topic/libraries/data-binding?hl=ko

데이터 결합 라이브러리  |  Android 개발자  |  Android Developers

 

---

 

목차

1. 데이터 바인딩이란
2. 사용법+예제
3. 데이터바인딩은 왜 사용할까요?
4. 데이터바인딩과 뷰바인딩 비교

---

1. 데이터 바인딩이란?

프로그래매틱 방식이 아니라 선언적 형식으로 레이아웃의 UI 구성요소를 앱의 데이터소스와 결합할 수 있도록 하는 지원 라이브러리

 

프로그래매틱 방식

    TextView textView = findViewById(R.id.sample_text);
    textView.setText(viewModel.getUserName());

 

선언적 형식

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

 

 

데이터바인딩은 어떻게 사용하는지에 대해서 간단하게 증가버튼을 누르면 값이 증가하고 감소버튼을 누르면 값이 감소하는 예제를 만들면서 정리해 보겠습니다.

---

 

2. 사용법+예제

 

빌드환경

build.gradle(모듈 수준)에 dataBinding에 대한 요소를 추가합니다.

android {
	...
	dataBinding{
		enable = true
	}
}

 

레이아웃

<?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>
        <variable name="counterData" type="com.example.vld.CounterData"/>
    </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".CounterActivity">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{Integer.toString(counterData.counter)}"
            android:id="@+id/textViewCounter"
            android:textSize="100dp"
            android:textColor="@color/black"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/buttonDecrease"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:text="감소"
            android:textSize="50dp"
            app:layout_constraintBottom_toBottomOf="@+id/buttonIncrease"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/buttonIncrease"
            app:layout_constraintVertical_bias="0.0" />

        <Button
            android:id="@+id/buttonIncrease"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="126dp"
            android:text="증가"
            android:textSize="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

<data> 태그의 <variable> 태그 내의 type 속성으로 다른 클래스를 참조하게 됩니다.

<TextView>의 text속성에 선언적 형식으로 데이터바인딩을 적용했습니다.

데이터클래스

public class CounterData {
    public int counter = 0;
}

 

데이터 바인딩에 사용할 데이터클래스를 하나 만들어 줬습니다.

 

바인딩클래스

 CounterData counterData = new CounterData();
    ActivityCounterBinding binding;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        binding = DataBindingUtil.setContentView(this,R.layout.activity_counter);
        
    }

 

레이아웃 파일 이름을 카멜표기법으로 변환해서 자동으로 클래스를 생성해 주는데

레이아웃 이름은 activity_counter.xml 이기 때문에 ActivityCounterBinding이 생성이 되었습니다.

이걸 이용한 객체에 setContentView()를 적용해 줍니다.

 

데이터 바인딩 사용

 binding.buttonDecrease.setOnClickListener(v ->{
            counterData.counter--;
            binding.setCounterData(counterData);
        });

        binding.buttonIncrease.setOnClickListener(v ->{
            counterData.counter++;
            binding.setCounterData(counterData);
        });

 

레이아웃에서 <Data> 태그의 <variable> 태그 속성에서 지정해 준 클래스 이름으로 자동으로 setCounterData가 생성이 되었습니다.

데이터 바인딩을 해주는 메서드입니다.

증가 감소할 때 데이터클래스의 값을 하나씩 변경하고 그걸 다시 바인딩해줍니다.

결과

짜잔!! 잘 동작하는 것 같네요 ㅎㅎㅎㅎ

디자인은 신경 쓰진 않았습니다.

 

 

 

그런데 또 여기서도 마지막에 화면회전했을 때 데이터가 유실되는 걸 왜 보여줬을까요!

이건 다음에 AAC 중에 하나인 viewModel을 공부하면서 다뤄보도록 하겠습니다.

궁금하신 분은 다음 포스팅도 기대해 주세요.

---

3. 데이터바인딩은 왜 사용할까요?

• 데이터바인딩을 사용하면, 데이터를 UI 요소에 연결하기 위해 필요한 코드를 최소화할 수 있습니다.
• 또한, 데이터바인딩은 디자인패턴인 MVP 또는 MVVM 패턴을 구현하기 위해 유용하게 사용됩니다.
• findViewById()를 호출하지 않아도 된다.
• data가 바뀌면 자동으로 View를 변경해 준다.
• xml 리소스만 보고도 View에 어떤 데이터가 들어가는지 파악도 가능해진다.

장점만 있지는 않겠죠.단점에 대해서도 알아보겠습니다.

단점

• 1 클래스 파일이 많아져서 빌드 속도가 느려지고 그에 따라 앱의 용량도 증가하게 됩니다.
• xml은 기본적으로 디버깅이 안되기 때문에, 데이터가 제대로 넘어가지 않는 이유를 확인하기 어렵습니다.

 

---

4. 뷰 바인딩과 데이터 바인딩 비교

뷰바인딩과 데이터바인딩 모두 뷰를 직접 참조하는 데 사용할 수 있는 바인딩 클래스를 생성합니다.

 

뷰 바인딩은 주석 처리가 필요하지 않아서 컴파일 시간이 더 짧고, 특별히 태그 된 XML 레이아웃 파일이 필요하지 않으므로 앱에서 더 신속하게 채택할 수 있습니다.

 

모듈에서 뷰 바인딩을 사용설정하면 모듈의 모든 레이아웃에 뷰 바인딩이 자동으로 적용됩니다.

 

반대로 뷰 바인딩은 레이아웃 변수 또는 레이아웃 표현식을 지원하지 않으므로 XML 레이아웃 파일에서 직접 동적 UI 콘텐츠를 선언하는 데 사용할 수 없습니다.

 

데이터바인딩에서 지원하는 양방향 데이터결합을 뷰 바인딩에서는 지원하지 않습니다.

 

정리하자면,

고급기능이 필요한 레이아웃에서는 데이터 바인딩을 사용하면 되고

고급기능이 필요 없는 간단한 레이아웃에서는 뷰 바인딩을 사용하는 것이 좋습니다.

 

---

 

끝!