[kotlin] Shimmer라이브러리를 이용하여 로딩 화면 만들기

사용자의 요청에 화면에 변화가 없다면 사용자는 다시는 이 어플을 사용하지 않을것

이 말은 강사님이 자주하시던 말이다.
사용자의 요청에 화면에 변화가 있어야 한다는 것

데이터를 로딩중에는 사용자가 알기쉽게 로딩 애니메이션을 보여주는 것이 좋다.
로딩 애니메이션에는 스켈레톤 UI, 루프애니메이션, 프로그래스 바등등이 있다.

이번에는 스켈레톤 로딩 화면을 구현해볼 것이다. 스켈레톤 로딩 화면은 표시될 정보의 대략적인 형태를 미리 보여줘서 다음 화면까지 부~드럽게 연결해주는 역할을 한다.

스켈레톤 로딩 화면을 구현하는데 여러 방법이 있지만, 가장 유명한거는 Facebook에서 제공하는 shimmer-android라이브러리를 사용할 것이다.

지금 작성하는 화면은 프로젝트 화면이다.

로딩중

로딩완료후

위와 같이 적용할 수 있다.

라이브러리 추가

먼저 Shimmer-android라이브러리 추가

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

shimmer_userProfile.xml

스켈레톤 로딩 화면에서 보여줄 UI를 작성합니다.
저는 사진을 불러오는 곳에서만 느리기 때문에 이미지로만 했습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:transitionGroup="true">


    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imageView_myPage_profile"
        android:layout_width="@dimen/image_size_profile"
        android:layout_height="@dimen/image_size_profile"
        android:layout_gravity="center"
        android:scaleType="centerCrop"
        android:src="@color/accentDarkGray"
        app:civ_border_width="1dp"
        app:civ_border_color="@color/accentDarkGray"/>

</LinearLayout>

fragment_MainMyPage.kt

 <com.facebook.shimmer.ShimmerFrameLayout
                    android:id="@+id/shimmerLayout_mainMyPage"
                    android:layout_gravity="center"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

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

 </com.facebook.shimmer.ShimmerFrameLayout>

< com.facebook.shimmer.ShimmerFrameLayout>으로 감싸고 <include> 위에 작성한 xml파일을 넣어줍니다.

이렇게 나오게 하면 맞습니다.

fragmentMainMyPage.kt

 private fun loadSampleData(){
        lifecycleScope.launch {
            showSampleData(isLoading = true)
            delay(1200)
            showSampleData(isLoading = false)
        }
    }
private fun showSampleData(isLoading:Boolean){
        if(isLoading){
            fragmentMainMyPageBinding.shimmerLayoutMainMyPage.startShimmer()
            fragmentMainMyPageBinding.shimmerLayoutMainMyPage.visibility = View.VISIBLE
            fragmentMainMyPageBinding.imageViewMyPageProfile.visibility = View.GONE
        }else{
            fragmentMainMyPageBinding.shimmerLayoutMainMyPage.stopShimmer()
            fragmentMainMyPageBinding.shimmerLayoutMainMyPage.visibility = View.GONE
            fragmentMainMyPageBinding.imageViewMyPageProfile.visibility = View.VISIBLE

        }
    }

위의 함수를 넣고 fragmentMainMyPageBinding밑에 loadSampleData()넣으면 된다.!!