구현 영상

device-2023-06-09-164157.mp4

Lottie Library

에어비엔비에서 개발한 오픈소스 모바일 라이브러리

JSON 기반 애니메이션 파일 형식실시간으로 애니메이션을 랜더링한다. Lottie는 벡터 기반의 애니메이션이다. 벡터는 점과 점을 잇는 선분과 면으로 이루어져 있기 때문에 아무리 확대해도 깨지지 않는다.

gradle에 추가

implementation 'com.airbnb.android:lottie:3.7.0’
원하는 JSON 파일 가져오기

LottieFiles: Download Free lightweight animations for website & apps.

에서 Lottie JSON 파일로 에니메이션 파일 가져와서

res > raw 파일 만든 후 파일 넣기

BindingDialogFragment 활용해서 로딩 표현하는 Fragment 만들기

BindingDialogFragment

<?xml version="1.0" encoding="utf-8"?>
<layout 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>"
    tools:context=".presentation.dialog.LoadingDialogFragment">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layout_loading"
        android:background="@color/half_transparent"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/lav_loading"
            android:layout_width="200dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:lottie_autoPlay="true"
            app:lottie_loop="true"
            app:lottie_rawRes="@raw/ic_loading_paper_plane" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

<com.airbnb.lottie.LottieAnimationView> 형태로 투입

autoplay, loop 속성 제어 가능
rawRes 속성으로 받아온 에니메이션 적용
ConstraintLayout에서 배경색 적용 가능 - 반투명한 배경도 가능
```
<color name="transparent">#00FFFFFF</color>
<color name="half_transparent">#80FFFFFF</color>
```
- 앞 두글자가 투명도 정보

기존 프래그먼트 위에 로딩 프래그먼트 설정 후, 로딩 종료 시 제거

private lateinit var loadingDialogFragment: LoadingDialogFragment

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    binding.rvFollower.adapter = followerAdapter

		// parentFragmentManager 로 fcv 조작 가능
    loadingDialogFragment = LoadingDialogFragment()
    parentFragmentManager.beginTransaction().add(R.id.fcv_main,loadingDialogFragment).commit()

    // 뷰모델 observer 설정
    viewModel.followerResult.observe(viewLifecycleOwner) { followerResult ->
        ...

        // 두 페이지의 12명이 모두 들어올 때까지 보이도록 설정
        if (followerList.size == 12) {
            loadingDialogFragment.dismiss()
        }