진행률 표시기는 작업 상태를 시각적으로 나타냅니다. 모션을 사용함 다음과 같이 프로세스가 얼마나 완료되었는지 사용자에게 주의를 기울이세요. 데이터를 로드하거나 처리할 수 있습니다 또한 데이터가 데이터 레이크에 완료 지점이 얼마나 되는지를 참조하지 않습니다.
진행률 표시기를 사용할 수 있는 다음 세 가지 사용 사례를 고려하세요.
- 콘텐츠 로드: 네트워크에서 콘텐츠를 가져오는 동안(예: 로드 중) 사용자 프로필의 이미지 또는 데이터
- 파일 업로드: 사용자에게 업로드에 걸리는 시간에 대한 의견을 제공합니다.
- 장기 처리: 앱이 대량의 데이터를 처리하는 동안 사용자에게 전체 중 어느 정도가 완료되었는지 알려줍니다.
Material Design에는 두 가지 유형의 진행률 표시기가 있습니다.
- 확정: 얼마나 진행되었는지 정확하게 표시합니다.
- 미확정: 진행률과 관계없이 지속적으로 애니메이션이 적용됩니다.
마찬가지로 진행 상태 표시기는 다음 두 가지 형식 중 하나를 취할 수 있습니다.
- 선형: 왼쪽에서 오른쪽으로 채워지는 가로 막대입니다.
- 원형: 테두리가 확장될 때까지 획 길이가 늘어나는 원 원의 전체 둘레입니다.
API 노출 영역
진행률 표시기를 만드는 데 사용할 수 있는 여러 컴포저블이 있지만 매개변수는 Material Design과 크게 다르지 않습니다. 다음 중 하나 염두에 두어야 하는 주요 매개변수는 다음과 같습니다.
progress: 표시기에 표시되는 현재 진행률입니다.Float전달0.0~1.0사이color: 실제 표시기의 색상입니다. 다시 말해 진행 상황을 반영하며 구성요소를 완전히 포괄하는 구성요소입니다. 표시됩니다.trackColor: 표시기가 그려지는 트랙의 색상입니다.
지표 결정
확정형 표시기는 작업이 얼마나 완료되었는지를 정확하게 나타냅니다. 다음 중 하나를 사용하세요.
LinearProgressIndicator 또는 CircularProgressIndicator
컴포저블을 사용하고 progress 매개변수의 값을 전달합니다.
다음 스니펫은 비교적 자세한 예를 제공합니다. 사용자가
버튼을 누르면 앱이 진행률 표시기를 표시하고
progress 값을 점진적으로 늘리는 코루틴입니다. 이로 인해
차례로 반복하는 진행률 표시기입니다.
@Composable
fun LinearDeterminateIndicator() {
var currentProgress by remember { mutableStateOf(0f) }
var loading by remember { mutableStateOf(false) }
val scope = rememberCoroutineScope() // Create a coroutine scope
Column(
verticalArrangement = Arrangement.spacedBy(12.dp),
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxWidth()
) {
Button(onClick = {
loading = true
scope.launch {
loadProgress { progress ->
currentProgress = progress
}
loading = false // Reset loading when the coroutine finishes
}
}, enabled = !loading) {
Text("Start loading")
}
if (loading) {
LinearProgressIndicator(
progress = { currentProgress },
modifier = Modifier.fillMaxWidth(),
)
}
}
}
/** Iterate the progress value */
suspend fun loadProgress(updateProgress: (Float) -> Unit) {
for (i in 1..100) {
updateProgress(i.toFloat() / 100)
delay(100)
}
}
로드가 부분적으로 완료되면 이전 예는 다음과 같습니다.
마찬가지로 원형 표시기는 다음과 같이 나타납니다.
미확정 지표
미확정 표시기는 작업이 얼마나 완료되었는지를 반영하지 않습니다. 있습니다. 대신 모션을 사용하여 사용자에게 처리가 진행 중임을 나타냅니다. 완료 정도를 지정하지 않아도 되는 것이죠.
미확정 진행률 표시기를 만들려면 LinearProgressIndicator를 사용합니다.
또는 CircularProgressIndicator 컴포저블, 단, 다음 함수는 값을 전달하지 않음
progress입니다. 다음 예에서는
확정되지 않은 표시기를 표시하는 것입니다.
@Composable
fun IndeterminateCircularIndicator() {
var loading by remember { mutableStateOf(false) }
Button(onClick = { loading = true }, enabled = !loading) {
Text("Start loading")
}
if (!loading) return
CircularProgressIndicator(
modifier = Modifier.width(64.dp),
color = MaterialTheme.colorScheme.secondary,
trackColor = MaterialTheme.colorScheme.surfaceVariant,
)
}
다음은 표시기가 활성 상태일 때 이 구현의 예입니다.
다음은 동일한 구현의 예이지만
CircularProgressIndicator 대신 LinearProgressIndicator