İlerleme durumu göstergeleri

İlerleme durumu göstergeleri, bir işlemin durumunu görsel olarak gösterir. Yükleme veya veri işleme gibi işlemlerin ne kadar tamamlandığını kullanıcının dikkatine sunmak için hareket kullanırlar. Ayrıca, işlemin ne kadar süreceği belirtilmeden işleme devam edildiğini de gösterebilirler.

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

• İçerik yükleme: Bir ağdan içerik getirilirken (ör. kullanıcı profili için resim veya veri yüklenirken)
• Dosya yükleme: Yükleme işleminin ne kadar sürebileceği hakkında kullanıcıya geri bildirim verin.
• Uzun işleme: Bir uygulama büyük miktarda veri işlerken kullanıcılara toplamın 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 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 uzayan 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 temel parametreler arasında şunlar yer alır:

• progress: Göstergenin görüntülediği mevcut ilerleme. Float 0.0 ile 1.0 arasında iletin.
• 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, nispeten ayrıntılı bir örnek sunmaktadır. 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 { 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 aşağıdaki gibi görünür:

Belirsiz göstergeler

Belirsiz ilerleme göstergesi, bir 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