[kotlin] 코틀린 데이터 바인딩을 사용하여 캘린더를 표시하는 방법

코틀린의 데이터 바인딩 라이브러리를 사용하면 UI 구성요소와 백엔드 로직을 쉽게 연결할 수 있습니다. 이를 이용하여 캘린더를 표시하는 방법을 알아보겠습니다.

데이터 바인딩 설정

우선, 앱 모듈의 build.gradle 파일에 다음과 같이 데이터 바인딩을 활성화하는 구성을 추가합니다.

android {
    ...
    
    buildFeatures {
        dataBinding true
    }
}

이제 데이터 바인딩을 사용할 수 있게 되었습니다.

XML 레이아웃 설정

캘린더를 표시할 XML 레이아웃 파일에서 데이터 바인딩을 활용해보겠습니다. 다음은 간단한 예제입니다.

<layout xmlns:android="http://schemas.android.com/apk/res/android">
   <data>
       <variable
           name="viewModel"
           type="com.example.CalendarViewModel" />
   </data>
   <LinearLayout
       ... >
       <TextView
           ...
           android:text="@{viewModel.currentDate}" />
       <Button
           ...
           android:onClick="@{viewModel::onDateSelected}" />
   </LinearLayout>
</layout>

위의 코드에서 data 섹션에서 viewModel을 정의하고, 해당 뷰모델을 통해 UI 구성 요소에 데이터를 바인딩할 수 있습니다.

코틀린 뷰모델 작성

이제 해당 XML 레이아웃과 바인딩하기 위한 코틀린 뷰모델을 작성해야 합니다. 다음은 간단한 CalendarViewModel 예제입니다.

import androidx.databinding.BaseObservable
import androidx.databinding.Bindable
import java.util.Date

class CalendarViewModel : BaseObservable() {

    @get:Bindable
    var currentDate: Date = Date()
        set(value) {
            field = value
            notifyPropertyChanged(BR.currentDate)
        }

    fun onDateSelected() {
        // 날짜 선택 시 동작할 로직 작성
    }
}

위의 코드는 currentDateonDateSelected 메소드를 뷰와 연결할 수 있는 데이터 바인딩 기능을 갖춘 코틀린 뷰모델을 정의한 것입니다.

데이터 바인딩을 통한 캘린더 표시

마지막으로 액티비티나 프래그먼트에서 데이터 바인딩을 초기화하고 해당 뷰모델을 연결합니다.

val binding: YourLayoutBinding = DataBindingUtil.setContentView(this, R.layout.your_layout)
val viewModel = CalendarViewModel()
binding.viewModel = viewModel

이제 해당 XML 레이아웃은 CalendarViewModel과 연결되어 캘린더를 표시하고 상호작용할 수 있게 되었습니다.

코틀린 데이터 바인딩을 사용하여 캘린더를 표시하는 방법에 대해 알아보았습니다. 데이터 바인딩을 통해 UI와 로직을 간편하게 연결할 수 있어, 더욱 깔끔하고 유지보수가 용이한 코드를 작성할 수 있습니다.

참고 자료