애니메이션 로티 사용하기

1

AndroidStudio

목록 보기
11/83
  1. build에 추가해주기.
implementation 'com.airbnb.android:lottie:3.7.0'
  1. 로티에서 원하는 애니메이션을 찾은 후 json파일로 다운 받기.

https://lottiefiles.com/featured

다운로드 - json.
파일 이름은 원하는걸로 바꿔도된다.

res에서 raw를 만들어서 넣는다.

혹은 app 에서 New - Folder - Asset 을 만들고 이 안에 넣어도 된다.

  1. xml에 로티를 만든다
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation"
    android:layout_width="300dp"
    android:layout_height="300dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/toolbar"
    app:lottie_fileName="Test.json.json"
    app:lottie_loop="true"
    app:lottie_autoPlay="true"/>

추가적으로, 프로그레스바처럼 사용하는 방법.

—> 배경이 다이얼로그처럼 어두워지고 클릭을 방지하는법.

1~4번까지는 동일.

  1. DialogFragment를 만들어준다.
package kr.co.gooroomeelite.views.mypage

import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.view.Window
import androidx.fragment.app.DialogFragment
import androidx.fragment.app.FragmentManager
import kr.co.gooroomeelite.R

class LottieTest : DialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
dialog?.requestWindowFeature(Window.FEATURE_NO_TITLE)
dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

isCancelable= false
        return inflater.inflate(R.layout.fragment_lottie_test, container, false)
    }

    override fun show(manager: FragmentManager, tag: String?) {
        try {
            val ft = manager.beginTransaction()
            ft.add(this, tag)
            ft.commitAllowingStateLoss()
        } catch (ignored: IllegalStateException) {

        }

    }
}
  1. xml에 애니메이션을 넣어준다.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".views.mypage.LottieTest">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"
        app:lottie_autoPlay="true"
        app:lottie_fileName="Test.json.json"
        app:lottie_loop="true" />
</FrameLayout>

7.원하는 액티비티에 다이얼로그를 띄운다.

OnCreate영역에 넣어준다.

showProgressDialog()
    val handler : Handler = Handler()
    handler.postDelayed({
hideProgressDialog() 
// 5000 == 5초.
},5000)
}

영역밖에 함수를 만들어준다.
private fun showProgressDialog(){
    if (!lottieFragment.isAdded){
        lottieFragment.show(supportFragmentManager,"loader")
    }
}
private fun hideProgressDialog(){
    if(lottieFragment.isAdded){
        lottieFragment.dismissAllowingStateLoss()
    }
}
profile
러닝커브를 따라서 등반중입니다.

0개의 댓글