[TIL] 22.03.16

공부한 것

안드로이드 강의 수강

1. Retrofit2, OkHttpLoggingInterceptor
2. Shimmer
3. Glide
4. Content Resolver
5. Unsplash API

알게된 것

1. Glide

오늘 공부를 하면서 Glide 가 생각보다 엄청 강력한 라이브러리라는 것을 깨달았다. Glide 를 사용한지는 꽤 됐지만 이를 제대로 사용하고 있지 않았다. 우선 그동안 Glide 를 사용할 때 아래처럼 써왔다. 그냥 단순히 이미지뷰에 이미지를 넣어주기 위한 용도로...

private fun bindViews() {
    Glide.with(binding.root)
        .load(profileImageUrl)
        .into(binding.profileImageView)
        }

하지만 정말 다양한 기능을 제공하고 있었다.

 

우선 첫 번째, Placeholder 유튜브 앱을 접속하면 초기에 리소스를 다 불러오지 못했을 때 빈 레이아웃이 출력되는 것을 볼 수 있다. 레이아웃 자체의 속성을 부여해서 이를 구현할 수 있지만 Glide 의 Placeholder 를 사용하면 손쉽게 구현할 수 있다. 리소스를 불러오지 못한 경우 drawable 로 먼저 보여주고 리소스를 불러온 경우에 이를 대체한다. error 와 fallback 도 지원한다.

private fun bindViews() {
    Glide.with(binding.root)
        .load(profileImageUrl)
        .placeholder(R.drawable.shape_profileImage_placeholder)
        .into(binding.profileImageView)
        }

 

두 번째, thumbnail Unsplash API 에선 화질에 따른 다양한 이미지 Url 을 제공한다. 고화질의 경우 이미지를 불러오는데 보다 오랜 시간이 소요되는데 별도의 처리를 하지 않으면 사용자가 불편함을 느낄 수 있다. 이를 처리하기 위한 방법에는 ProgressBar 를 표시하는 방법이 일반적이지만 thumbnail 을 활용하면 더 효과적으로 처리할 수 있다. thumbnail 은 저해상도 이미지를 빠르게 로드하여 보여준다. 하지만 이를 사용하기 전에 구현해야 하는 것이 있는데 저해상도 이미지의 크기를 맞춰주는 것이다. 단순히 thumbnail 만 사용하면 이미지의 크기가 처음에는 작았는데 로드가 완료되면 고해상도 이미지에 맞게 크기가 커지게 된다. 따라서 이미지의 비율에 맞춰 저해상도 이미지의 크기를 재조정해주는 작업을 우선적으로 진행한다.

val dimensionRatio = photo?.height!! / photo?.width?.toFloat()!!
val targetWidth = binding.root.resources.displayMetrics.widthPixels - (binding.root.paddingStart + binding.root.paddingEnd)
val targetHeight = (targetWidth * dimensionRatio).toInt()

binding.contentsContainer.layoutParams = binding.contentsContainer.layoutParams.apply {
    height = targetHeight
}

 

이미지 비율에 맞춰 저해상도 이미지의 크기를 고해상도 이미지의 크기와 동일하게 맞춰줬다면 thumbnail 을 넣어준다. transition 은 요청이 완료될 때의 애니메이션 효과를 의미한다.

private fun bindViews() {
    Glide.with(binding.root)
        .load(profileImageUrl)
        .thumbnail(
            Glide.with(binding.root)
                .load(profileImageLowUrl)
                .transition(DrawableTransitionOptions.withCrossFade())
        .override(targetWidth, targetHeight)
        .placeholder(R.drawable.shape_profileImage_placeholder)
        .into(binding.profileImageView)
        }

 

세 번째, Transformations 이미지를 레이아웃에 맞게 다양한 형태로 조정할 수 있다. CentorCrop, FitCenter, CircleCrop 3가지를 지원한다.

private fun bindViews() {
    Glide.with(binding.root)
        .load(profileImageUrl)
        .placeholder(R.drawable.shape_profileImage_placeholder)
        .circleCrop()
        .into(binding.profileImageView)
        }

2. Shimmer

페이스북에서 제공하는 라이브러리다. 데이터 요청이 완료되기 전에 임시로 빈 레이아웃을 보여주는데 반짝반짝 거리는 효과를 부여할 수 있다. 유튜브앱에서 해당 효과를 찾아볼 수 있다.

데이터 요청이 완료되기 전까지의 효과

의존성을 추가한다.

implementation 'com.facebook.shimmer:shimmer:0.5.0'

 

효과를 넣을 레이아웃을 ShimmerLayout 으로 감싼다.

     <com.facebook.shimmer.ShimmerFrameLayout
                android:id="@+id/shimmerLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:visibility="gone">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <include layout="@layout/shimmer_item_photo" />

                    <include layout="@layout/shimmer_item_photo" />

                </LinearLayout>
            </com.facebook.shimmer.ShimmerFrameLayout>

공부할 것

자기 전에 Live Data 보고 자기.

느낀 점

래퍼런스 이즈 킹. 래퍼런스 위주로 공부하자.