[안드로이드] 데이터바인딩 적용하기

안녕하세요. 이번시간에는 안드로이드 MVVM 디자인 패턴을 적용하기 위한 데이터바인딩에 대해 알아보려고 합니다. MVVM 패턴을 적용하면 View와 Model간의 의존성을 최소화할 수 있고, View와 관련된 로직을 databinding을 통하여 ViewModel에서 수행할 수 있기 때문에 불필요한 코드를 줄이고 가독성을 높일 수 있다는 장점이 있습니다. 또한 데이터베이스를 참조하는 데이터를 Livedata 또는 Observable를 통하여 동적으로 View에 보여줄 수 있습니다. 

이번 포스팅은 databinding 적용하기 기초, bindingadapter 사용하기, Room데이터베이스와 databinding 적용하기 실습으로 진행할 예정입니다.

 

우선 databinding을 적용한 프로젝트의 구조를 살펴봅시다 !

기본적으로 view, viewmodel, model로 나뉜 프로젝트 구조가 있겠죠 ?? 저는 여기에 utils와 db라는 구조를 추가하겠습니다.(구조는 패키지로 나눕니다)

초기에 MainActivity만 존재하는 형태는 위와 같이 만들어 줄 수 있습니다.

자 그럼 실습을 진행하기 위해 텍스트 이어붙이기 예제를 만들어 보도록 하겠습니다.

데이터바인딩을 사용하기 위해서는 우선 Gradle설정부터 해야합니다 !!

app레벨의 build.gradle에 다음 설정을 추가합니다.

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

그런 뒤 viewmodel패키지 안에 MainViewModel클래스를 생성해줍니다.(MainViewModel클래스를 생성하고 class선언을 해야만 다음 작업 수행 시 자동완성이 가능합니다)

MainViewModel에서는 View의 데이터를 지켜보는 ObservableField를 아래와 같이 생성해줍니다.

package com.myhome.viewmodelsample.viewmodel

import androidx.databinding.ObservableField

class MainViewModel {
    val myText = ObservableField<String>()
}

 

그리고 데이터바인딩을 사용하는 xml파일의 최상위 태그를 <layout>으로 설정합니다.

다음과 같은 xml구조를 만들 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <data>
        <variable
            name="model"
            type="com.myhome.viewmodelsample.viewmodel.MainViewModel" />
    </data>
    <androidx.constraintlayout.widget.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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".view.MainActivity">

        <EditText
            android:id="@+id/myEdit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_margin="12dp"
            android:text="@={model.myText}"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{model.myText}"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/myEdit" />

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

data태그 안에는 현재 view의 데이터로직을 지켜보거나 view에 바인드할 데이터가 존재하는 MainViewModel을 설정해줍니다.(name속성에는 현재 xml에서 사용할 변수명으로 지정합니다.)

여기서 EditText의 @=과 TextView의 @는 View와 ViewModel간의 의존성을 의미합니다(@= -> View to ViewModel, ViewModel to View, 2-way binding), (@ -> ViewModel to View, 1-way binding).

 

마지막으로 View인 MainActivity.kt클래스에서 View와 ViewModel을 연결시켜줍니다.

package com.myhome.viewmodelsample.view

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import com.myhome.viewmodelsample.R
import com.myhome.viewmodelsample.databinding.ActivityMainBinding
import com.myhome.viewmodelsample.viewmodel.MainViewModel

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
        val viewModel = MainViewModel()
        binding.model = viewModel
    }
}

 

제너릭 타입인 ActivityMainBinding은 xml의 이름에 따라 이름이 붙혀집니다. ex) activity_main -> ActivityMainBinding

또한 xml의 최상위 태그가 <layout>태그가 아닌경우 Import할 수 없으니 주의하세요 !

위와 같이 View와 ViewModel을 연결시켜주면 MainActivity와 MainViewModel간 데이터바인딩이 이루어집니다.

 

완성된 애플리케이션을 다음과 같이 실행할 수 있습니다.

 

이처럼 데이터바인딩을 사용하면 변화하는 데이터를 바로 View에 적용시킬 수 있고, EditText의 경우 TextWatcher를 사용할 필요 없이 바로 작성되는 텍스트를 변수에 저장할 수 있습니다.

 

다음 시간에는 View의 이벤트를 ViewModel에서 감지할 수 있는 실습을 진행하도록 하겠습니다.

 

Next ->

https://in-idea.tistory.com/38

[데이터바인딩] RecyclerView와 BindingAdapter