İ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 üç 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: Yüklemenin ne kadar sürebileceği konusunda kullanıcıya geri bildirim verin.
  • Uzun işleme: Bir uygulama büyük miktarda veri işlerken kullanıcıya toplam işleme süresinin ne kadarının tamamlandığını bildirin.

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

  • Belirle: Tam olarak ne kadar ilerleme kaydedildiğini gösterir.
  • Belirsiz: İlerleme durumuna bakılmaksızın sürekli animasyon oynatılır.

Benzer şekilde, ilerleme göstergesi aşağıdaki iki biçimden birinde olabilir:

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

API yüzeyi

Material Design ile tutarlı ilerleme göstergeleri oluşturmak için kullanabileceğiniz çeşitli bileşenler olsa da bunların parametreleri birbirinden çok farklı değildir. Aklınızda bulundurmanız gereken önemli parametreler şunlardır:

  • progress: Göstergenin gösterdiği mevcut ilerleme. 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.

Belirleyici göstergeler

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'te nispeten ayrıntılı bir örnek verilmiştir. Kullanıcı düğmeye bastığında uygulama hem ilerleme göstergesini gösterir hem de progress değerini kademeli olarak artıran bir iş akışı başlatır. Bu, ilerleme göstergesinin sırayla yukarı doğru iterasyonuna neden olur.

@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 örnekteki doğrusal gösterge aşağıdaki gibi görünür:

Benzer şekilde, dairesel gösterge aşağıdaki gibi görünür:

Belirsiz göstergeler

Belirsiz gösterge, bir işlemin tamamlanmaya ne kadar yakın olduğunu yansıtmaz. Bunun yerine, işleme devam ettiğini kullanıcıya belirtmek için hareketi kullanır ancak tamamlanma derecesini belirtmez.

Belirsiz bir ilerleme göstergesi oluşturmak için LinearProgressIndicator veya CircularProgressIndicator bileşenini kullanın ancak progress için bir değer iletmeyin. Aşağıdaki örnekte, belirsiz bir göstergeyi düğmeye basarak nasıl değiştirebileceğiniz gösterilmektedir.

@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