스팀 앱 개발기 #87 - 보팅 리스트 화면 개선: (1) 다운보팅도 보여주기 (2) 계정 썸네일 로딩 속도 개선

dorian-mobileapp (65)in kr-dev 커뮤니티 • 3 years ago

시작하며...

보팅 리스트 화면에서 개선해야 할 점들이 보였습니다. 하나는요. 다운보팅 리스트도 보여줘야 하는 것이구요. 다른 하나는 계정들의 썸네일 로딩 속도를 빠르게 해야 하는 것입니다. 오늘은 이러한 개선점들을 개발해 보았습니다.

다운보팅도 보여주기

인터페이스 이름 변경: OnUpvoteViewClickListener을 OnVoteCountViewClickListener으로
PostItemListAdapter 클래스
- 주생성자에 downvoteViewClickListener 파라메터 추가: 다운보팅 카운트를 보여주는 textDownvotes 뷰의 클릭 처리
- onBindViewHolder 메소드: textDownvotes 뷰의 클릭 리스너 설정
TagsFragment 클래스
- textDownvotes 뷰 클릭을 처리할 PostItemListAdapter.OnVoteCountViewClickListener 필드 정의 (이름: downvoteViewClickListener)
- PostItemListAdapter 객체 생성시 변경된 생성자 적용: 2번째 파라메터에 downvoteViewClickListener 대입
VoteListActivity 클래스
- INTENT_BUNDLE_VOTER_LIST 상수 정의: 인텐트로부터 보팅 리스트를 읽기 위한 키 값
- 인텐트로부터 보팅 리스트를 읽을 때 안드로이드 버전 구분
  - 33 이상: Intent 클래스의 getSerializableExtra(name: String, clazz: Class) 메소드 사용
  - 32 이하: Intent 클래스의 getSerializableExtra(name: String) 메소드 사용 (33부터 deprecated)

val voterList = when {
    (Build.VERSION.SDK_INT >= 33) -> {
        intent.getSerializableExtra(INTENT_BUNDLE_VOTER_LIST, Array<ActiveVote>::class.java)
    }
    else -> {
        intent.getSerializableExtra(INTENT_BUNDLE_VOTER_LIST) as Array<ActiveVote>
    }
}

계정들의 썸네일 로딩 속도 개선

썸네일을 로딩할 때 이미지 너비, 높이를 50dp로 설정해주니 로딩 속도가 빨라졌습니다. 그걸 하지 않았을 때에는 커다란 이미지의 크기를 조정하지 않고 이미지 뷰로 로딩하죠. 그래서 로딩 시간이 길어진 것으로 파악됩니다. 작업 내용은 다음과 같습니다.

dimens.xml 파일에 보팅 계정의 썸네일 너비, 높이 정의

<dimen name="voter_thumbnail_width">50dp</dimen>
<dimen name="voter_thumbnail_height">50dp</dimen>

layout_vote_item.xml 레이아웃의 이미지 뷰에 위 dimen 값들 적용

<ImageView
    android:id="@+id/image_voter_profile"
    android:layout_width="@dimen/voter_thumbnail_width"
    android:layout_height="@dimen/voter_thumbnail_height"
    android:layout_margin="10dp"
    android:src='@{String.format("https://steemitimages.com/u/%s/avatar/small", vote.voter)}'
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:src="@drawable/default_post_thumbnail" />

DP 값을 픽셀 값으로 변환하는 확장 메소드 정의
Dimension 값을 DP 값으로 변환하는 확장 메소드 정의

fun Context.toPixelFromDP(dp: Float): Float {
    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, resources.displayMetrics)
}

fun Context.toDPFromDimension(dimenID: Int): Float {
    return resources.getDimension(dimenID) / resources.displayMetrics.density
}

DataBindingUtil.kt 파일
- setSrc 메소드 수정
  - 로딩할 이미지의 너비, 높이를 50dp로 설정
    (못가져오면, 0으로 설정. 그리고 디폴트 이미지 설정)

@BindingAdapter("android:src")
fun setSrc(imageView: ImageView?, url: String?) {
    // To prevent null pointer exceptions
    if ((null == imageView) or (null == url)) {
        return
    }

    val context = imageView!!.context
    val imageWidth = context?.toDPFromDimension(R.dimen.voter_thumbnail_width)?.toInt() ?: 0
    val imageHeight = context?.toDPFromDimension(R.dimen.voter_thumbnail_height)?.toInt() ?: 0

    if ((imageWidth == 0) and (imageHeight == 0)) {
        Glide.with(imageView!!)
            .load(R.drawable.default_post_thumbnail)
            .override(imageWidth, imageHeight)
            .into(imageView!!)
    }
    else {
        Glide.with(imageView!!)
            .load(Uri.parse(url))
            .override(imageWidth, imageHeight)
            .placeholder(R.drawable.default_post_thumbnail)
            .error(R.drawable.default_post_thumbnail)
            .fallback(R.drawable.default_post_thumbnail)
            .into(imageView!!)
    }
}