[Android][DataBinding] ImageView src에 연동 하기 (함수 연결)

DataBinding이 무엇이고 기본적으로 어떻게 쓰이는지는 아래에서 확인 하면 되겠습니다.

https://developer.android.com/topic/libraries/data-binding/index.html

이번 내용에서는 ImageView src에 어떻게 이미지를 연동 할 것인가에 대해 공유해보고자 합니다.

우선 ImageView에 이미지 리소스 id를 그냥 연결 하면 되지 않습니다.

아래와 같이 생각하시는 분들이 있을 껍니다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <data>
        <variable
            name="data"
            type="com.example.Data"/>
    </data>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@{data.resid}"/>
</layout>

안됩니다. 안되요~~

src에 이미지를 넣기 위해서는 BindAdapter annotation을 이용하여 함수 바인딩이 필요 합니다.

전 여기서 거의 몇시간을 테스트 하고 시간을 보냈는데요.

함수 바인딩을 할 때 가장 쉽게 생각 할 것이 annotation으로 연동이 된다는 것입니다.

함수 만드는 법을 간단하게 보여드리겟습니다.

package com.namuon.ringq.fragment.ring;

import android.databinding.BindingAdapter;
import android.widget.ImageView;

public class TestBindingAdapter {
    
    @BindingAdapter({"bind:imgRes"})
    public static void imgload(ImageView imageView, int resid) {
        imageView.setImageResource(resid);
    }
}

## 위소스에서 bind: 부분은 제거 하세요.

참고 : http://gogorchg.tistory.com/entry/Android-application-namespace-for-attribute-will-be-ignored

TestBindingAdapter라는 클래스는 그냥 자바는 클래스 내에 코드를 적어야 하기 때문에 만들어 놓은 것이라고 생각하시면 됩니다.

그냥 마음대로 클래스 하나 생성하시구요.

중요한 부분이 imgload static 함수 입니다.

public static void 로 정의 하신 다음에 적용 하고 싶으신 View를 매개변수 첫번째에 넣습니다.

그리고 두번째 매개변수 부터는 받아오는 값을 넣습니다.

그리고 BindingAdapter annotation으로 함수를 정의 합니다. 

"bind:imgRes" 가 xml 에서 "app:imgRes"로 사용할 예정 입니다.

여기서  app은 아래와 같은 xml 네임 스페이스 죠.

xmlns:app="http://schemas.android.com/apk/res-auto"

imgRes와 imgload(함수명)은 꼭 같은 필요가 없습니다. Spring을 써보신 분들은 아시겠지만, 그냥 함수명일 뿐이죠 ㅎ

로컬에서 부를 때는 저 함수를 부르면 됩니다.

이제 함수는 정의 되었으니 XML에 적용 시켜 보겠습니다.

<?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"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <data>
        <variable
            name="data"
            type="com.example.Data"/>
    </data>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:imgRes="@{data.resid}"/>
</layout>

자 위와 같이 하면 됩니다.

아래가 중심이 되는 부분이죠.

app:imgRes="@{data.resid}"

annotation으로 정의된 이름으로 정의 한 다음에 바인딩을 시키면 됩니다.

이렇게 클래스에 static 함수를 BindingAdapter라는 annotation만 정의하면 

xml에서 편하게 이미지를 부를 수도 있습니다.

아래는 참고로 imageUrl 함수로써 Glide를 이용하는 예제 입니다.

  

@BindingAdapter({"bind:imageUrl"})
public static void loadImage(ImageView imageView, String imageUrl) {
       Glide.with(imageView.getContext())
       .load(imageUrl)
       .diskCacheStrategy(DiskCacheStrategy.SOURCE)
       .placeholder(R.color.lighter_gray)
       .into(imageView);
}
  

Now you can load the image from the string URL using the following method from XML:

  
<ImageView
                android:layout_width="@dimen/place_item_image_size"
                android:layout_height="@dimen/place_item_image_size"
                app:imageUrl="@{viewModel.imageUrl}" />
  

http://mlsdev.com/en/blog/57-android-data-binding

그럼 DataBinding으로 좀더 편하게 코딩 해보세요.

문의 사항이 있으신분은 댓글 주시면 됩니다.