İ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 üç kullanım alanını inceleyelim:

• İç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ğiyle ilgili kullanıcıya geri bildirim verin.
• Uzun işleme: Bir uygulama büyük miktarda veriyi işlerken kullanıcılara toplam verinin 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.

Aynı ş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 kaplayana 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österdiği mevcut ilerleme durumu. 0.0 ile 1.0 arasında Float 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 bir gösterge, 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 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 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