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

진행률

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

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

Jetpack Compose Progress Indicator (Progressbar)

In Jetpack Compose, Progress Indicator is a widget to indicate some actions are in progress to the user. Types of Progress Indicators available in Jetpack Compose LinearProgressIndicator CircularProgressIndicator For long-time operations such as file downl

www.jetpackcompose.net

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

구현 샘플 미리 보기

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 형으로 구현을 해 보았습니다.

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