[Android] BindingAdapter

💡 우아한테크코스를 진행하면서 DataBinding에서 BindingAdapter를 활용한 경험을 기록하였습니다!

 

BindingAdapter

• Android의 데이터 바인딩 기능에서 제공하는 어노테이션으로, XML 레이아웃에서 사용자 정의 속성을 사용하여 뷰에 데이터를 설정할 수 있습니다.
• 이를 통해 기존에 제공되지 않는 속성을 XML에서 직접 설정할 수 있고, 뷰의 로직과 UI 설정을 보다 깔끔하게 분리할 수 있습니다.

바인딩 어댑터  |  Android Developers

바인딩 어댑터  |  Android Developers

BindingAdapter 사용

프로젝트 세팅

• build.gradle 파일에 데이터 바인딩을 활성화해야 합니다.

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

ImageUrl 속성 설정

• BindingAdapter를 사용하여 imageUrl 속성을 처리할 메서드를 작성합니다.
• 이 메서드를 통해서 ImageView에 이미지를 로드하는 작업을 담당합니다.

import android.widget.ImageView
import androidx.databinding.BindingAdapter
import com.bumptech.glide.Glide

@BindingAdapter("imageUrl")
fun loadImage(view: ImageView, url: String?) {
    url?.let {
        Glide.with(view.context)
            .load(it)
            .into(view)
    }
}

바인딩어댑터 활용

• 선언한 바인딩어댑터를 XML 레이아웃에서 사용할 수 있습니다!

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="imageUrl"
            type="String" />
    </data>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:imageUrl="@{imageUrl}" />
</layout>

• 인자를 잘못 전달할 경우 컴파일 에러가 날 수 있으니 조심해야 합니다.

액티비티 또는 프래그먼트

• 액티비티나 프래그먼트에서도 데이터 바인딩을 통해 imageUrl 값을 설정할 수 있습니다.

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        // 임의의 이미지 URL
        binding.imageUrl = "<https://example.com/sample.jpg>"
    }
}

분기처리에 활용

• 데이터바인딩을 활용하면 XML에서 복잡한 분기처리가 어려울 수 있습니다.
• 이를 바인딩 어댑터에서 쉽게 처리할 수 있으며, String이나 색상을 지정할 수 있습니다.

@BindingAdapter("detailViewTypeText")
fun TextView.bindDetailViewTypeText(clubDetailViewType: ClubDetailViewType?) {
    clubDetailViewType ?: return
    val text =
        when (clubDetailViewType) {
            ClubDetailViewType.RECRUITMENT -> context.getString(R.string.club_detail_participate_text)
            ClubDetailViewType.END_RECRUITMENT -> context.getString(R.string.club_detail_un_participate_text)
            ClubDetailViewType.MINE, ClubDetailViewType.PARTICIPATED -> context.getString(R.string.club_detail_mine_text)
        }
    this.text = text
}

정리

• BindingAdapter를 사용해 뷰의 속성을 확장하고 데이터 바인딩과 함께 뷰와 데이터의 결합을 더욱 유연하게 처리할 수 있습니다.
• 이를 통해 재사용성과 유지보수성을 높일 수 있으며, UI와 로직을 깔끔하게 분리할 수 있습니다.