İlerleme durumu göstergeleri

İlerleme göstergeleri bir işlemin durumunu görsel olarak ortaya koyar. Veri yükleme veya işleme gibi, işlemin tamamlanmaya ne kadar yakın olduğunu kullanıcının dikkatini çekmek için hareketten yararlanırlar. Ayrıca, tamamlanmaya ne kadar yakın olabileceğinden bahsedilmeden, işlemin gerçekleşmekte olduğunu da belirtebilirler.

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

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

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

  • Belir: Tam olarak ne kadar ilerleme kaydedildiğini gösterir.
  • Belirsiz: İlerlemeye bakılmaksızın sürekli olarak animasyon yapar.

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

  • Doğrusal: Soldan sağa dolduran yatay çubuk.
  • Dairesel: Darbesi, dairenin tüm çevresini kaplayana kadar uzayan bir daire.
Dairesel ilerleme göstergesinin yanı sıra doğrusal bir ilerleme göstergesi.
Şekil 1. İki tür ilerleme göstergesi.

API Yüzeyi

Materyal Tasarım ile tutarlı olarak kayan işlem düğmeleri oluşturmak için kullanabileceğiniz birkaç composable olsa da, bunların parametreleri büyük ölçüde farklılık göstermez. Unutmamanız gereken temel parametreler şunlardır:

  • progress: Göstergenin gösterdiği mevcut ilerleme durumu. 0.0 - 1.0 arasında bir Float geçirin.
  • color: Gerçek göstergenin rengi. Bileşenin ilerlemeyi yansıtan ve ilerleme tamamlandığında bileşeni tam olarak kapsayan kısmıdır.
  • trackColor: Göstergenin çizildiği parkurun rengi.

Göstergeleri belirleme

Belirgin gösterge, bir işlemin ne kadar tamamlandığını tam olarak yansıtır. LinearProgressIndicator veya CircularProgressIndicator composable'larını 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örüntüler hem de progress değerini kademeli olarak artıran bir eş yordam başlatır. Bu, ilerleme göstergesinin sırayla ilerlemesine 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 örnekte bulunan doğrusal gösterge aşağıdaki gibi görünür:

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

Belirsiz göstergeler

Belirsiz göstergesi bir işlemin tamamlanmaya ne kadar yakın olduğunu yansıtmaz. Bunun yerine, herhangi bir tamamlanma derecesi belirtmeden kullanıcıya işlemin devam ettiğini göstermek için hareketten yararlanır.

Belirsiz bir ilerleme göstergesi oluşturmak için LinearProgressIndicator veya CircularProgressIndicator composable'ı kullanın ancak progress için bir değer iletmeyin. Aşağıdaki örnekte, bir düğmeye basarak belirsiz göstergesini nasıl açıp kapatabileceğ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 etkin durumdayken yapılan bu uygulamaya bir örnek verilmiştir:

Aşağıda, CircularProgressIndicator yerine LinearProgressIndicator içeren aynı uygulamanın bir örneği verilmiştir.

Ek kaynaklar