[Android] Custom Binding Adapter

Custom Binding Adapter

개요

• 커스텀 바인딩 어댑터를 이용하면 데이터를 바인딩 하기 전에 동작하는 로직을 추가할 수 있다.
• 일반적으로 커스텀 바인딩 어댑터는 Data Binding Library에서 제공하는 어댑터가 없는 경우 사용한다.

이번 글에서는 뷰의 Visibility, Load Image 그리고 Format String을 다루도록 한다.

활용 영상

프로젝트 셋팅

1. CustomBindingAdapter 구현을 위해 kotlin-kapt를 아래와 같이 build.gradle(Module) 파일의 plugins에 추가한다.
2. plugins { ... id 'kotlin-kapt' }
3. DataBinding사용을 위해 buildFeatures{ dataBinding true }를 아래와 같이 build.gradle(Module) 파일의 android{} 에 추가한다.
4. android { ... buildFeatures{ dataBinding true } }
5. 아래와 같이 프로젝트에 MyBindingAdpater.kt Object 파일을 하나 생성한다.

CustomBindingAdapter 구현: View.visivility

일반 뷰의 `View.Visibility`를 관리하도록 한다.

Code in MyBindingAdpater.kt

    @BindingAdapter("isVisible")
    @JvmStatic
    fun isVisible(view: View, isVisible: Boolean) {
        view.isVisible = isVisible
    }

ProgressBar in Layout

        <ProgressBar
            isVisible="@{isLoading}"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            ...
        />

CustomBindingAdapter 구현: ImageView.load

이미지뷰에서 url값을 통해 이미지를 그리도록 한다.
단). url을 통해서 이미지를 로드하기 위해서는 coil-kt에서 제공하는 의존성을 추가해야한다.
Coli.load사용을 위해 implementation "io.coil-kt:coil:2.1.0"를 아래와 같이 build.gradle(Module) 파일의 dependencies{ } 에 추가한다.

  dependencies {
    ...
    implementation "io.coil-kt:coil:2.1.0"
  }

Code in MyBindingAdpater.kt

    @BindingAdapter("imageUrl")
    @JvmStatic
    fun loadImage(view: ImageView, url: String) {
        view.load(url)
    }

ImageView in Layout

        <ImageView
            android:id="@+id/imageView"
            imageUrl="@{imageUrl}"
            isVisible="@{!isLoading}"
            android:layout_width="300dp"
            android:layout_height="300dp"
            ...
         />

CustomBindingAdapter 구현: TextView.text

Code in MyBindingAdpater.kt

    @BindingAdapter("price")
    @JvmStatic
    fun bindPrice(view: TextView, price: Int) {
        view.text = "${price}원"
    }

TextView in Layout

        <TextView
            isVisible="@{!isLoading}"
            price="@{price}"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            ...
        />

 

질문과 잘못된 점에 대해 말씀해주시는 건 언제나 환영입니다.
zero5.two4@gmail.com