스팀 앱 개발기 #71 - 태그 화면에서 포스트 항목들의 썸네일 로딩
시작하며...
태그 화면 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" />
GitHub Commit
마치며...
다행히 이번 작업은 복잡하지 않아서 빠르게 마칠 수 있었습니다. (방법을 몰랐을 때에는 이것도 시간이 좀 걸렸죠...) 남은 작업들은 다음과 같습니다. (필요시 추가 가능성 있습니다.)
- 포스트 사이에 분리선 넣기
- 로딩 중 UI 보여주기
- 기타 개선
지난 스팀 앱 개발기
- #70 - 태그 화면 1차 구현
- #69 - 태그 화면에 데이터 바인딩 적용
- #68 - 태그 화면(TagsFragment) 구성
- #67 - TagsViewModel 클래스에 포스트 리스트 구하는 메소드 그리고 라이브 데이터 추가
- #66 - bridge.get_ranked_posts API 연동 구현: ReadRankedPostsUseCase 클래스 추가
- #65 - bridge.get_ranked_posts API 연동 구현: SteemRepository 인터페이스, SteemRepositoryImpl 클래스 수정
- #64 - bridge.get_ranked_posts API 연동 구현: SteemService 인터페이스에 메소드 추가
- #63 - bridge.get_ranked_posts API 관련 데이터 클래스 추가 수정
- #62 - bridge.get_ranked_posts API의 응답 자료를 맡을 데이터 클래스 수정
- #61 - layout_post_item.xml 수정 후 예상치 못한 빌드 오류
- #60 - bridge.get_ranked_posts API의 응답 자료를 맡을 데이터 클래스 정의
- #59 - 태그별 포스트 리스트를 구하기 위한 bridge.get_ranked_posts API
- #58 - 포스트 리스트를 구성할 항목의 레이아웃 (3) 데이터 클래스 정의 및 데이터 바인딩 적용
- #57 - 포스트 리스트를 구성할 항목의 레이아웃 (2)
- #56 - 포스트 리스트를 구성할 항목의 레이아웃
- #55 - .gitignore 파일 작성
- #54 - RxJava 관련 메모리 누수 방지 코드 작성
- #53 - 버그 수정: 인터넷 미연결시 API 실행하면 앱 강제 종료
- #52 - 인터넷 미연결시 API 실행하면 어떻게 될까?
- #51 - 파워다운 끝났으나 SP to power down 값이 0이 아닌 버그
- #1 ~ #50
Posted through the AVLE Dapp (https://avle.io)
[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.