Android - DataClass, DataBinding

DataClass 와 DataBinding을 이용한 MVVM 패턴 구현하기 첫번째 스텝이다.

 

먼저 DataBinding을 진행하려면 아래와 같은 설정을 해준다.

 

설정

project 단위의 gradle에 아래와 같은 설정을 해준다.

 

plugins {
    id 'kotlin-kapt'
}

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

 

DataClass 만들기

User라는 DataClass를 만들어서 Model 형태로 사용한다.

 

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

 

 

layout.xml 에 DataBinding 진행하기

xml 파일로 되어있는 layout 파일에 dataBinding을 해준다.

 

<?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="user"
            type="com.cleancode.mvvmpattern.model.User" />
        <variable
            name="activity"
            type="com.cleancode.mvvmpattern.MainActivity" />
    </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="1.0">

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

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

            <Button
                android:id="@+id/changeBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Change Me" />
            <Button
                android:id="@+id/changeDataBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="UserClassChange" />
        </LinearLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

여기서 주의깊게 확인해야 하는 점은 최상단 ConstraintLayout위에 <layout>으로 감싼다는 점이고

이 안에 <data>, <variable>을 정의하여 클래스 파일을 하나의 객체로 인지하여 접근 할 수 있게 했다는 점이다.

 

TextView에 보면 android:text="@{user.lastName}"

형태로 되어 있는 것을 확인 할 수 있는데, 이는 user라고 명시되어 있는 data class의 파라미터를 접근하는 방식이다.

향후에는 dataBinding을 이용해 xml 파일 형태의 layout에서 함수를 실행하기도 한다는데 이는 나중에 확인해 보도록 하자.

 

MainActivitiy

 

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.activity = this;
        binding.user = User("테", "스트")
        binding.changeBtn.setOnClickListener {
            binding.invalidateAll()
        }
        binding.changeDataBtn.setOnClickListener {
            binding.user = User("입", "니다")
        }
    }
}

 

위에 작성한 xml을 레이아웃으로 가지는 MainActivity다. 

 

먼저 binding 변수를 만들어 ActivityMainBinding으로 초기화 한다. 

(ActivityMainBinding는 따로 클래스를 파일형태로 만들어서 하는 것이 아니라 자동으로 생성되니 걱정 ㄴ )

 

이후 binding에 DataBindingUtil.setContentView를 이용하여 레이아웃을 지정해주고, binding을 통해 layout에 있는 모든 view에 접근이 가능하다.

 

여기서 주의해야 할점은 binding.user = User("테", "스트") 인데 이부분은 User 데이터 클래스를 만들어서 layout에 명시된  user에 넣어주어야 android:text="@{user.lastName}" 코드가 정상 동작한다.