İlerleme durumu göstergeleri

İlerleme durumu göstergeleri, bir işlemin durumunu görsel olarak gösterir. Kullanıcıların dikkatini çekmek için hareketten yararlanarak işlemin ne kadar tamamlandığını (ör. veri yükleme veya işleme) gösterirler. Ayrıca, işlemin tamamlanmaya ne kadar yakın olduğuna bakılmaksızın işleme devam edildiğini de gösterebilirler.

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

• İçerik yükleme: Bir ağdan içerik getirilirken (ör. bir resim veya kullanıcı profili için veri yüklenirken).
• Dosya yükleme: Yükleme işleminin ne kadar sürebileceği hakkında kullanıcıya geri bildirim verin.
• Uzun süren işleme: Bir uygulama büyük miktarda veriyi işlerken kullanıcılara toplam verilerin ne kadarının tamamlandığını bildirin.

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

• Belirli: Ne kadar ilerleme kaydedildiğini tam olarak gösterir.
• Belirsiz: İlerleme dikkate alınmadan sürekli olarak animasyon oluşturur.

Benzer şekilde, ilerleme 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 kapsayana kadar uzunluğu artan bir daire.

API Yüzeyi

Material Design ile tutarlı ilerleme göstergeleri oluşturmak için kullanabileceğiniz çeşitli composable'lar olsa da parametreleri çok farklı değildir. Aklınızda tutmanız gereken önemli parametreler arasında şunlar yer alır:

• progress: Göstergenin görüntülediği mevcut ilerleme. 0.0 ile 1.0 arasında Float geçirin.
• color: Gerçek göstergenin rengi. Yani, ilerlemeyi yansıtan ve ilerleme tamamlandığında bileşeni tamamen kapsayan bileşen bölümü.
• trackColor: Göstergenin çizildiği parçanın rengi.

Belirleyici göstergeler

Belirleyici bir 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 ortak yordam başlatır. Bu durum, ilerleme göstergesinin sırayla artmasına 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 bir gösterge, işlemin tamamlanmaya ne kadar yakın olduğunu yansıtmaz. Bunun yerine, tamamlanma derecesini belirtmeden, kullanıcının işleme devam edildiğini anlaması 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 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 durumdayken bu uygulamanın bir örneği verilmiştir:

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

Ek kaynaklar

• Material UI belgeleri