[Android, Databinding] BindingAdapter 사용해 보기

안녕하세요. 블랙진입니다.

이전 시간에 데이터바인딩에 대한 기초를 포스팅했습니다.

이어서  심화 과정으로 BIndingAdapter 사용법에 대해 알아보겠습니다.

BindingAdapter 사용해보기

데이터 바인딩을 실무에 적용하기 위해서는 BindingAdapter 를 자유자재로 다룰 수 있어야 합니다. 

ImageView, ListView, RecyclerView 등 기능이 복잡한 View 는 BindingAdapter 를 통해 데이터를 처리해주어야 하기 때문입니다.

BindingAdapter 에 관한 간단한 예제로 Glide 라이브러리를 사용하여 ImageView 에 이미지를 설정해 보겠습니다.

1. 서버로 부터 이미지를 받아야 되기 때문에 인터넷 접근 권한을 설정해줍니다.

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />

2. APP 단계의 build.gradle 에 Glide 를 추가해 줍니다.

//glide
implementation "com.github.bumptech.glide:glide:$glideVersion"

제가 사용한 glideVersion 은 3.7.0 입니다.

3. User.kt 에 profile 데이터(이미지 주소)와 BindingAapter 를 추가해 줍니다.

class User(val firstName: String, val lastName: String, val profile: String) {

    object MyBind {

        @JvmStatic
        @BindingAdapter("setImage")
        fun setImageUrl(view: ImageView, profile: String) {

            Glide.with(view.context)
                    .load(profile)
                    .into(view)

        }

    }

}

BindingAdapter 는 메모리 상에 올려서 사용해야 하기 때문에 자바에서는 static, 코틀린 에서는 object 로 설정해서 사용해 줍니다.

(참고) 아래는 자바 코드일 때의 User.class 에 관한 코드입니다.

public class User {

    public String firstName;
    public String lastName;
    public String profile;
    
    @BindingAdapter("setImage") 
    public static void setImageUrl(ImageView view, String profile){
        Glide.with(view.getContext())
                .load(profile)
                .into(view);
    }
    
}

4. activity_main.xml 에 ImageVIew 를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>
        <!-- data 이름을 user 로 설정하였습니다. -->
        <!-- type 은 User 클래스 위치와 함께 표시되어야 합니다. -->
        <variable name="user" type="com.tistory.black_jin0427.mydatabinding.User"/>
    </data>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- user 의 firstName 을 설정해줍니다. -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.firstName}"/>

        <!-- user 의 lastName 을 설정해줍니다. -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.lastName}"/>

        <!-- user 의 profile 을 설정해줍니다. -->
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            setImage="@{user.profile}"/>

    </LinearLayout>

</layout>

ImageView 는 BindingAdapter 에서 정한 setImage 를 추가해 주고 user 객체에서 profile (이미지 주소) 를 가져옵니다.

5. User 객체에 profile 데이터를 추가해 줍니다.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //setContentView(R.layout.activity_main)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.user = User("Black","Jin", "https://t1.daumcdn.net/cfile/tistory/2511E03B577BB58733")

    }
}

추가할 데이터는 구글에서 찾은 마블 이미지 입니다.

이렇게 BindingAdapter 에 관한 기초적인 내용을 살펴 보았습니다.

데이터 바인딩에 관해 더 공부하실 분인 안드로이드 공식 사이트 에서 내용을 확인해 주세요