İlerleme durumu göstergeleri

İlerleme durumu göstergeleri, bir işlemin durumunu görsel olarak gösterir. Veri yükleme veya işleme gibi işlemlerin ne kadar tamamlandığını kullanıcıya göstermek için hareket kullanılır. Ayrıca, işlemin tamamlanmaya ne kadar yakın olduğuna dair bilgi vermeden işlemin devam ettiğini de belirtebilirler.

İlerleme göstergesi kullanabileceğiniz şu üç kullanım alanını göz önünde bulundurun:

  • İçerik yükleme: Bir ağdan içerik getirirken (ör. kullanıcı profili için bir resim veya veri yükleme)
  • Dosya yükleme: Kullanıcıya, yüklemenin ne kadar sürebileceğine dair geri bildirim verin.
  • Uzun işleme: Bir uygulama büyük miktarda veri işlerken kullanıcıya toplamın ne kadarının tamamlandığını bildirir.

Materyal Tasarım'da iki tür ilerleme durumu göstergesi vardır:

  • Belirle: Tam olarak ne kadar ilerleme kaydedildiğini gösterir.
  • Belirsiz: İlerlemeden bağımsız olarak sürekli hareket eder.

Benzer şekilde, bir ilerleme göstergesi de aşağıdaki iki biçimden birini alabilir:

  • Doğrusal: Soldan sağa doğru dolduran yatay bir çubuk.
  • Dairesel: Kalınlığı, dairenin tüm çevresini kaplayacak şekilde büyüyen bir daire.
Dairesel ilerleme göstergesinin yanında doğrusal bir ilerleme göstergesi
Şekil 1. İki tür ilerleme göstergesi.

API Yüzeyi

İlerleme göstergeleri oluşturmak için kullanabileceğiniz birkaç composable olsa da parametrelerin arasında büyük farklar yoktur. Aklınızda bulundurmanız gereken önemli parametreler şunlardır:

  • progress: Göstergenin görüntülediği geçerli ilerleme durumu. 0.0 ile 1.0 arasında bir Float gönderin.
  • color: Gerçek göstergenin rengi. Yani bileşenin ilerlemeyi yansıtan ve ilerleme tamamlandığında bileşeni tamamen kapsayan kısmı.
  • trackColor: Göstergenin çizildiği kanalın rengi.

Göstergeleri belirleyin

Belirleyici gösterge, bir işlemin ne kadar tamamlandığını tam olarak yansıtır. LinearProgressIndicator veya CircularProgressIndicator bileşenlerini kullanın ve progress parametresi için bir değer iletin.

Aşağıdaki snippet nispeten ayrıntılı bir örnek sağlamaktadır. Kullanıcı düğmeye bastığında, uygulama hem ilerleme göstergesini görüntüler hem de progress değerini kademeli olarak artıran eş yordam. Bu durum, ilerleme göstergesinin olması gerekir.

@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)
    }
}
ProgressIndicator.kt

Yükleme kısmen tamamlandığında, önceki örnek aşağıdaki gibi görünür:

Benzer şekilde, dairesel gösterge de şu şekilde görünür:

Belirsiz göstergeler

Belirsiz gösterge, bir işlemin tamamlanmaya ne kadar yaklaştığını yansıtmaz düşünülebilir. Bunun yerine, kullanıcıya işlemin devam ettiğini göstermek için tamamlama derecesi belirtilmeden yapılır.

Belirsiz bir ilerleme göstergesi oluşturmak için LinearProgressIndicator kullanın veya CircularProgressIndicator composable, ancak progress. Aşağıdaki örnekte, bir öğeyi belirsiz göstergesidir.

@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,
    )
}
ProgressIndicator.kt

Aşağıda, gösterge etkinken bu uygulamaya dair bir örnek verilmiştir:

Aşağıda, aynı uygulamanın CircularProgressIndicator yerine LinearProgressIndicator kullanıldığı bir örnek verilmiştir.

Ek kaynaklar