[Android] DataBinding 적용하기 - 02

 

지난 글에서는 DataBinding이 무엇인지, 어떻게 적용하는 지에 대해 알아보았다.

이번에는 실제 개인 프로젝트에 적용하며 알게된 것을 작성해보려고 한다.

 

기온별 옷차림 안내 어플인 'WW'에 데이터 바인딩을 적용해보기로 했다.

WW에는 기능이 별로 많지 않아서, 화면도 별로 없다.

WW의 화면은 다음과 같다. (이게 다다 ㅎ)

상단에는 현재 날씨가

하단에는 5일간의 예보가 자리를 차지하고 있다.

상단에는 현재 온도, 현재 시간, 옷 차림 정보, 날씨 아이콘 ID, 날씨 설명 데이터가 필요하다.

이전 글에서 설명했던 대로 필요한 데이터를 바인딩 해줄 수 있었다.

setImageResoucre

그런데 이미지는?

android:src="@{weatherViewModel.getValue.weatherIcon}"

<ImageView
    android:id="@+id/main_weather_img"
    style="@style/BaseTextView"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:padding="4dp"
    android:src="@{weatherViewModel.getValue.weatherIcon}"
    tools:src="@drawable/ic_clear"/>

위와 같이 해주었는데 이미지가 뜨지 않았다.

그렇다. 이렇게 하면 안된다. ㅎ

그러면 어떻게 이미지를 적용할 수 있을까?

BindAdapter annotation 을 이용한 함수 바인딩이 필요하다!

바인딩 어댑터 함수는 반드시 static으로 선언되어야 한다.

@BindingAdapter("imageRes")
fun imageLoad(imageView: ImageView, resId: Int) {
    imageView.setImageResource(resId)
}

@BindingAdapter("imageRes")

XML에서 app:imageRes 속성으로 접근이 가능하다.

첫번째 파라미터인 imageView는 적용할 대상 View

두번째 파라미터인 resId는 받아올 값이다.

 

그리고 XML에 적용하면 다음과 같다.

<ImageView
    android:id="@+id/main_weather_img"
    style="@style/BaseTextView"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:padding="4dp"
    app:imageRes="@{weatherViewModel.getValue.weatherIcon}"
    tools:src="@drawable/ic_clear"/>

include 레이아웃에서 DataBinding 사용하기

생각보다 쉽다!

먼저 include를 하고 있는 부모 레이아웃 (이하 부모 레이아웃)

추가해주어야 할 것은 bind 네임스페이스

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

<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:bind="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="weatherViewModel"
            type="com.pinslog.ww.presentation.viewmodel.WeatherViewModel" />
    </data>

	...
</layout>

bind 네임스페이스를 통해서 include된 레이아웃에 데이터를 넘겨준다.

바인드 네임스페이스의 속성이 wearInfo인 이유는 include 레이아웃을 보면 알 수 있다.

<include
    android:id="@+id/main_current_wearinfo_root"
    layout="@layout/item_wearing_info"
    bind:wearInfo="@{weatherViewModel.getValue.wearInfo}"
    android:visibility="gone" />

include 레이아웃

데이터의 이름이 위의 속성과 같은 것을 알 수 있다.

둘을 같게 해주어야 한다고 함!!!!

<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <data>
        <variable
            name="wearInfo"
            type="com.pinslog.ww.model.WearInfo" />
    </data>

 

상단 레이아웃에 DataBinding을 적용하면서 알게 된 것을 정리해보았다.

다음 글에서는 하단의 리사이클러 뷰에 DataBinding을 적용하며 알게 된 것을 작성해보려고 한다.

---

공부하며 작성된 글이라 잘못된 정보가 있을 수 있습니다.

말씀해주시면 수정하겠습니다. 감사합니다.

References

아래 글을 참고하여 작성 되었습니다.

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