개발일기 #10 진행율 표시는 어떻게 progressbar 만들기

진행률

앱을 구현하다 보면 간혹은 화면을 전환하는 동안에 진행률(progressbar) 표시를 통해서 사용자와 소통(?)을 해 보고자 하는 경우가 있습니다.  이런 경우 어떻게 할 것인지를 찾아보면서 이번 포스팅을 정리하고자 합니다. 

 

https://www.jetpackcompose.net/jetpack-compose-progress-indicator-progressbar

Jetpack Compose Progress Indicator (Progressbar)

참조했던 내용의 링크를 먼저 올려 둡니다.  이번 구현의 위 링크의 내용을 참조했습니다.

 

구현 샘플 미리 보기

linear progressbar 표시

동작하는 영상은 4초가량인데, 시작하면서 바로 '합계=' 아래에 linear progressbar 가 흘러가는 모양을 볼 수 있습니다. 

 

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.layout.*
import androidx.compose.material.LinearProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.billcoreatech.bespeak1003.ui.theme.softBlue

@Composable
fun CustomCircularProgressBar(visible : Boolean){
    Box(
        modifier = Modifier.fillMaxWidth(),
        contentAlignment = Alignment.Center
    ) {
        AnimatedVisibility(
            visible = visible,
            enter = fadeIn(
                // Overwrites the initial value of alpha to 0.4f for fade in, 0 by default
                initialAlpha = 0.4f
            ),
            exit = fadeOut(
                // Overwrites the default animation with tween
                animationSpec = tween(durationMillis = 250)
            )
        ) {
            LinearProgressIndicator(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(3.dp),
                backgroundColor = Color.LightGray,
                color = softBlue
            )
        }
    }

}

위 코드 구현과 같이 구현이 됩니다.  이렇게 구현한 것은 MainActivity에서 boolean 형으로 파라미터를 받아와서 progressbar 가 보이고 어떤 action 이 마무리되면 boolean의 값이 false 가 되면서 progressbar을 사라지는 기능을 구현하기 위해서 AnimatedVisibility 을 사용 했습니다.  이렇게 구현 하면 progressbar 을 필요에 따라서 보이고, 사라지고를 선택할 수 있게 됩니다.

 

앞서 링크에서 설명을 보는 것처럼 Circular, Linear 형 선택적으로 사용할 수 있습니다. 일반적으로 Circular을 사용하는 것이기는 하나, 이번에는 Linear 형으로 구현을 해 보았습니다.

 

오늘도 다들 즐~ 코딩하세요.