[Kotlin][Android] 안드로이드 Coroutine(코루틴) 사용하여 로딩 화면(다이얼로그) 만들기

안녕하세요 👋

오늘은 코루틴을 활용하여 

안드로이드에서 로딩 화면(다이얼로그)을 만드는 방법을

포스팅해보려 합니다.

 

코루틴의 기본적인 설명과 사용법에 대해서는 

아래 포스팅들에 자세하게 설명되어 있으니 확인 부탁드립니다 😎

 

[Kotlin] 코틀린 Coroutine(코루틴)에 대하여 (1) - CoroutineScope와 CoroutineContext 및 기본 사용방법

 

[Kotlin] 코틀린 Coroutine(코루틴)에 대하여 (2) - 코루틴 Channel(채널)

 

[Kotlin] 코틀린 Coroutine에 대하여 (3) - Coroutine Flow(플로우)

 

로딩 화면을 구성하는데 여러가지 방법이 있지만 

제가 채택한 방법은 Coroutine Flow를 활용하는 방법이었습니다.

 

1. 먼저 간단하게 Progress시에 화면에 표시할 다이얼로그를 하나 만들어줍니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/dialogText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="로딩중입니다.."
            android:textSize="30sp"
            android:gravity="center"
            />

        <ProgressBar
            android:id="@+id/progressBar"
            android:layout_below="@+id/dialogText"
            style="@android:style/Widget.ProgressBar.Inverse"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="30dp" />
    </RelativeLayout>
</androidx.cardview.widget.CardView>

 

import android.app.Dialog
import android.os.Bundle
import com.coroutine.basic.databinding.DialogProgressBinding

class ProgressDialog(owner : MainActivity) : Dialog(owner) {

    private lateinit var binding : DialogProgressBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DialogProgressBinding.inflate(layoutInflater).also {
            setContentView(it.root)
        }
    }
}

 

2. 다음은 표시할 화면을 간단하게 구성해줍니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/startBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="64dp"
        android:text="시작"
        android:textSize="25sp" />

    <TextView
        android:id="@+id/displayTV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/startBtn"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="32dp"
        android:textColor="#FF8A80"
        android:textSize="25sp"
        android:textStyle="bold" />

</RelativeLayout>

 

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.coroutine.basic.databinding.ActivityMainBinding
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.delay
import kotlinx.coroutines.flow.flow
import kotlinx.coroutines.launch

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding
    private lateinit var startFlow : kotlinx.coroutines.flow.Flow<Int>

    private lateinit var mProgressDialog: ProgressDialog

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater).also {
            setContentView(it.root)
        }
        mProgressDialog = ProgressDialog(this) // Dialog 생성
        addListeners()
    }

    private fun addListeners() {
        with(binding){
            startBtn.setOnClickListener {
                if(::mProgressDialog.isInitialized){ // Dialog가 초기화 됐을때 표시
                    mProgressDialog.show()
                }
                CoroutineScope(Dispatchers.Default).launch{
                    onClickStart()
                }
                CoroutineScope(Dispatchers.Main).launch {
                    startFlow.collect{ 
                    //Flow에서 전달 받은 값을 main Dispatcher에서 TextView에 업데이트
                        binding.displayTV.text = "Progressing ${it*10}%"
                    }
                }
            }
        }
    }

    private suspend fun onClickStart() { // 시작 버튼이 눌렸을때 progress증가 
        var value = 0
        startFlow  = flow {
            while (value < 10){ //10이 되면 loop 빠져나오기
                delay(1000)
                value++
                emit(value) //Flow에 값을 emit

            }
            CoroutineScope(Dispatchers.Main).launch { 
            //loop(기다려야할 동작)가 끝나면 Dialog 닫기
                mProgressDialog.dismiss()
            }
        }

    }
}

 

코드는 위와 같으며 간단하게 구현 할 수 있습니다.

저 while문에 해당 하는 부분에 처리를 기다려야 하는 동작 (Rest 처리 , DB 읽기 , Download 등)으로 대체하여

간단하게 구현하면 됩니다. 🤔

 

마지막으로 실행화면 첨부하며 포스팅 마치겠습니다.

오늘도 즐코하세요 :)