Android Loading Animation - ContentLoadingProgressBar

 

 

---

1. 결 과

 

결 과

# 이 글은 ContentLoadingProgressBar 사용하여 로딩 화면을 보여주는 방법을 기술한다. 해당 예시서는 postDelayed를 사용하여 가상으로 로딩이 필요한 상황을 연출하였다.

 

 

 

---

2. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">
        <androidx.core.widget.ContentLoadingProgressBar
            android:indeterminateTint="@color/black"
            android:id="@+id/contentLoading"
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>


</RelativeLayout>

 

# ContentLoadingProgressBar로 생성을하며 지정해주는 style의 따라서 막대 Bar 형태처럼 다른 형태도 가능하다.

 

 

# indeterminateTint 속성을 사용하여 ProgressBar Color를 변경할 수 있다.

 

 

 

---

3. MainActivity.kt

package com.example.loadinganimation

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.view.View
import androidx.recyclerview.widget.LinearLayoutManager
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val listManager = LinearLayoutManager(this)
        val listAdapter = MyListAdapter()

        // 로딩 창 보여주기
        contentLoading.show()

        Handler().postDelayed(Runnable {
            recycler.apply {
                layoutManager = listManager
                adapter = listAdapter
            }
            contentLoading.hide()   // 로딩 창 감추기
        }, 4000)    // Delay 4초

    }
}

 

# ContentLoadingProgressBar인 contentLoading의 show/hide 메소드를 사용하여 로딩 화면을 보여주거나 감출 수 있다.

 

 

 

# 해당 예시서는 postDelayed를 사용하여 고의적으로 지연을 발생시키고 있으며, 메커니즘은 loading이 발생하기 전 show를 통하여 로딩 화면을 보여주며 loading이 끝날 경우 hide를 통하여 로딩 화면을 숨기면 된다.

 

 

 

# 예를들어 리스트의 사용할 데이터를 읽어오기 전 show를 사용하여 로딩 화면을 보여주며, 데이터를 다 읽어온 후 리스트가 로드 되기 전 hide를 사용하여 로딩화면을 감추면 데이터를 불러올 때 로딩 중이라는 것을 사용자가 인지할 수 있게 만들 수 있다.

 

 

 

---

4. 전체 코드

GitHub - Notepad96/BlogExample