스팀 앱 개발기 #71 - 태그 화면에서 포스트 항목들의 썸네일 로딩

dorian-mobileapp (64)in kr-dev 커뮤니티 • 2 years ago

시작하며...

태그 화면 1차 구현 후, 우선적으로 적용한 추가 개발은요. 포스트 항목들의 썸네일을 이미지 뷰로 보여주는 것입니다. 이게 오늘 제가 한 작업입니다.

스크린샷

아래 그림과 같이 포스트 항목의 좌측에 썸네일이 그려진 것을 볼 수 있습니다.

작업 개요

dorian-steem-ui 모듈의 build.gradle에 Glide 라이브러리 추가
DataBindingUtil.kt 파일에 ImageView와 썸네일 URL을 바인딩할 함수 추가
layout_post_item.xml 레이아웃의 썸네일 ImageView에 데이터 바인딩 적용

dorian-steem-ui 모듈의 build.gradle에 Glide 라이브러리 추가

썸네일 URL로 이미지 뷰에 바로 로딩하기 위해 Glide 라이브러리를 사용했습니다. 아쉽게도 안드로이드에서는 이걸 제공하지는 않더라구요.

dependencies {
    // ...

    implementation 'com.github.bumptech.glide:glide:4.11.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

    // ...
}

DataBindingUtil.kt 파일에 ImageView와 썸네일 URL을 바인딩할 함수 추가

현재 이 앱에 데이터 바인딩을 적용하고 있구요. 썸네일 보여줄 이미지 뷰 또한 이를 적용합니다. 그런데 ImageView 뷰의 android:src 속성의 타입은 drawable입니다. URL로 바인딩할 수 없는 거죠. 대안은 BindingAdapter를 이용하는 것입니다. 아래와 같이 ImageView 뷰와 썸네일 URL을 바인딩 할 함수를 구현하였습니다.

@BindingAdapter("android:src")
fun setSrc(imageView: ImageView?, url: String?) {
    Glide.with(imageView ?: return)
        .load(Uri.parse(url ?: return))
        .placeholder(R.mipmap.ic_launcher)
        .into(imageView)
}

디폴트 이미지는 ic_launcher로 설정했구요. 썸네일 URL이 없는 경우에는 그걸 그대로 보여주기로 했습니다.

layout_post_item.xml 레이아웃의 썸네일 ImageView에 데이터 바인딩 적용

대상 ImageView 뷰의 android:src 속성을 PostItem 객체의 thumbnailURL로 설정합니다. 그러면 PostItem 객체 값 설정 후 위에 정의한 바인딩 함수가 자동으로 실행 됩니다.

<ImageView
    android:id="@+id/image_thumbnail"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginTop="5dp"
    android:scaleType="centerCrop"
    android:src="@{postItem.thumbnailURL}"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@id/text_title"
    tools:src="@mipmap/ic_launcher" />