İ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 tamamlanmaya ne kadar yakın olduğunu kullanıcının dikkatine sunmak için hareket kullanırlar. Ayrıca, tamamlanmaya ne kadar yakın olduğuna bakılmaksızın işlemin devam ettiğini de gösterebilirler.

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

• İçerik yükleme: Bir ağdan içerik getirilirken (ör. kullanıcı profili için resim veya veri yüklenirken).
• Dosya yükleme: Kullanıcıya yüklemenin ne kadar sürebileceği hakkında geri bildirim verin.
• Uzun süren işlemler: Uygulama büyük miktarda veri işlerken toplam işlemin ne kadarının tamamlandığını kullanıcıya bildirin.

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

• Belirli: Ne kadar ilerleme kaydedildiğini tam olarak gösterir.
• Belirsiz: İlerleme durumuna bakılmaksızın sürekli olarak animasyon gösterilir.

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

• Doğrusal: Soldan sağa doğru dolan yatay bir çubuk.
• Dairesel: Çizgisi, dairenin tüm çevresini kaplayana kadar uzayan bir daire.

API Surface

Materyal Tasarım'a uygun ilerleme göstergeleri oluşturmak için kullanabileceğiniz çeşitli composable'lar olsa da bunların parametreleri çok farklı değildir. Göz önünde bulundurmanız gereken temel parametrelerden bazıları şunlardır:

• progress: Göstergenin gösterdiği mevcut ilerleme durumu. 0.0 ile 1.0 arasında bir Float iletin.
• color: Gerçek göstergenin rengi. Yani bileşenin ilerleme durumunu yansıtan ve ilerleme tamamlandığında bileşeni tamamen kapsayan kısmı.
• trackColor: Göstergenin çizildiği parçanın rengi.

Belirli göstergeler

Belirli bir 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örüntüler hem de progress değerini kademeli olarak artıran bir eş yordam başlatır. Bu da ilerleme göstergesinin sırayla artmasına neden olur.

@Composable
fun LinearDeterminateIndicator() {
    var currentProgress by remember { mutableFloatStateOf(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 bir gösterge, bir işlemin tamamlanmaya ne kadar yakın olduğunu yansıtmaz. Bunun yerine, tamamlanma derecesini belirtmeden işlemin devam ettiğini kullanıcıya göstermek için hareket kullanır.

Belirsiz bir ilerleme göstergesi oluşturmak için LinearProgressIndicator veya CircularProgressIndicator composable'ını kullanın ancak progress için bir değer iletmeyin. Aşağıdaki örnekte, bir düğmeye basarak belirsiz bir göstergeyi 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 olduğunda bu uygulamanın nasıl göründüğüne dair bir örnek verilmiştir:

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

Ek kaynaklar

• Material UI belgeleri