로딩바 - Lottie 라이브러리 활용

[eunja511005]

로티 라이브러리 의존성 추가 방법1

최신 버젼 의존성 추가 하려면 아래 이미지 처럼 의존성 추가 해 주면 됨
  - File > Project Structure... > Dependencies > Modules 선택 > + 버튼 클릭 > Library Dependency 선택 
  - > lottie 입력 후 Search 버튼 클릭 > 라이브러리 선택후 OK 버튼 클릭 > Apply 버튼 클릭 > OK 버튼 클릭 
  - > Sync Project With Gradule File 클릭

로티 라이브러리 의존성 추가 방법2

아래와 같이 직접 추가도 가능 함

[eunja511005]

로딩바 뷰 추가

res > layout 우클릭 > New > Layout Resource File > File Name 'loading_view.xml' 입력

<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">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/loadingAnimationView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:lottie_rawRes="@raw/loading_animation"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

[eunja511005]

res > raw 디렉토리 추가

JSON 다운 로드

• https://lottiefiles.com/featured

res > raw 디렉토리에 'loading_animation.json' 이름으로 복사

[중요] 이름이 app:lottie_rawRes="@raw/loading_animation" 일치해야 인식 가능 하다.

[eunja511005]

로딩 애니메이션이 실행 되는 동안 유저가 클릭을 못하도록 막아야 함

1. 다이얼 로그 클래스를 만들고 해당 다이얼로그에서 Lottie의 애니메이션이 실행 되도록 한다.
2. 로딩 다이얼로그의 배경을 완전히 투명하게 만들어 줘야 애니메이션 실행 되는동안 보기 좋다.

로딩 다이얼 로그 실행/중

        // 로딩 다이얼로그 생성
        LoadingDialog loadingDialog = new LoadingDialog(this);

        // 로딩 다이얼로그 표시
        loadingDialog.show();

        // 로딩 다이얼로그 숨기기
       loadingDialog.dismiss();