Android의 쉬머 효과

쉬머 효과란 무엇입니까?

로딩 상태를 보여주는 효과입니다. 진행률을 사용하는 대신 Shimmer 효과는 ux를 위한 더 나은 디자인을 만듭니다. 로드되고 사용 가능해질 때(즉, 네트워크 대기 시간이 허용될 때) 실제 콘텐츠와 유사한 모양으로 요소를 표시하여 페이지의 레이아웃을 모방합니다.

Android에서 이것을 구현하는 방법은 무엇입니까?

Android 앱의 모든 보기에 쉬머 효과를 추가하는 쉬운 방법을 제공하는 Android 라이브러리인 Shimmer가 있습니다.

시작하겠습니다!

먼저 라이브러리 종속성을 포함합니다.

dependencies {
    // Shimmer
    implementation 'com.facebook.shimmer:shimmer:0.5.0'
}

이제 콘텐츠가 로드되는 동안 자리 표시자 역할을 할 레이아웃list_placeholder_layout.xml을 만듭니다.

내 예제에는 동물의 이미지를 표시하는 imageView와 이름 및 유형에 대한 두 개의 textView가 있습니다. 따라서 레이아웃은 다음과 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="10dp">

    <androidx.cardview.widget.CardView
        android:id="@+id/animal_image"
        android:layout_width="120dp"
        android:layout_height="150dp"
        android:backgroundTint="@color/gray"
        app:cardCornerRadius="20dp"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.cardview.widget.CardView
        android:id="@+id/animal_name"
        android:layout_width="120dp"
        android:layout_height="30dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="30dp"
        android:backgroundTint="@color/gray"
        app:cardCornerRadius="10dp"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true"
        app:layout_constraintStart_toEndOf="@id/animal_image"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.cardview.widget.CardView
        android:id="@+id/animal_type"
        android:layout_width="120dp"
        android:layout_height="30dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:backgroundTint="@color/gray"
        app:cardCornerRadius="10dp"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true"
        app:layout_constraintStart_toEndOf="@id/animal_image"
        app:layout_constraintTop_toBottomOf="@id/animal_name" />

</androidx.constraintlayout.widget.ConstraintLayout>

레이아웃이 생성되면 recyclerView가 있는 기본 레이아웃activity_main에 레이아웃을 포함해야 합니다.

이를 위해 <com.facebook.shimmer.ShimmerFrameLayout>를 포함합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".ui.main.MainActivity">

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmer_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:duration="800">

        <!-- Adding 8 rows of placeholders -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
        </LinearLayout>

    </com.facebook.shimmer.ShimmerFrameLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginStart="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

다음 단계에서는 Shimmer에게 애니메이션을 시작하고 중지할 시기를 알려 주기만 ​​하면 됩니다.

항목 목록을 가져올 때 Shimmer를 시작해야 합니다.binding.shimmerView.startShimmer()

항목 목록을 가져오면 Shimmer를 중지해야 합니다.binding.shimmerView.stopShimmer()

또한 항목 목록이 있는 경우 Shimmer 프레임 레이아웃의 가시성을 숨겨야 합니다.binding.shimmerView.isVisible = false

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    private val viewModel: MainViewModel by viewModels()


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //Start Shimmer
        binding.shimmerView.startShimmer()

        viewModel.getAnimals(10)
        viewModel.animalList.observe(this) {
            initRecyclerView(it)
        }
    }

    private fun initRecyclerView(animalList: List<Animal>) {

        binding.recyclerView.layoutManager = LinearLayoutManager(this)
        val adapter = AnimalAdapter(animalList)
        binding.recyclerView.adapter = adapter
        //Stop Shimmer
        binding.shimmerView.stopShimmer()
        //Hide Shimmer view
        binding.shimmerView.isVisible = false
    }
}

그리고 그게 다야!!

여기에서 전체 프로젝트를 확인하려면 링크가 있습니다: ShimmerEffectAndroid

좋아요와 공유를 잊지 마세요! 고맙습니다! :)

유용한 링크:

https://facebook.github.io/shimmer-android/