İlerleme durumu göstergeleri

İlerleme göstergeleri, işlemin durumunu görsel olarak gösterir. Bu reklamlar, veri yükleme veya işleme gibi işlemin tamamlanmaya ne kadar yaklaştığını kullanıcının dikkatini çekmek için hareketten yararlanır. Ayrıca tamamlanmaya ne kadar yaklaştığına bakmadan, işlemenin gerçekleştiğini gösterebilirler.

İ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 dolduran yatay bir çubuk.
  • Dairesel: Çizgisinin uzunluğu, dairenin tüm çevresini kaplayacak şekilde uzanan 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 parkurun 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österir hem de progress değerini kademeli olarak artıran bir iş akışı başlatır. Bu, ilerleme göstergesinin de 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 örnekteki doğrusal gösterge aşağıdaki gibi görünür:

Benzer şekilde, dairesel gösterge şu şekilde 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 etkin durumdayken bu uygulamanın bir örneği verilmiştir:

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

Ek kaynaklar