İlerleme durumu göstergeleri

İlerleme göstergeleri, bir işlemin durumunu görsel olarak gösterir. İşlemin ne kadar sürede tamamlanacağını (ör. veri yükleme veya işleme) kullanıcıya bildirmek için hareket kullanır. Ayrıca, işlemin ne kadar sürede tamamlanacağıyla ilgili bilgi vermeden işlemenin devam ettiğini de gösterebilir.

İ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ğiyle ilgili 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 uzunluğu artan bir daire.

API Yüzeyi

Materyal Tasarım'a uygun ilerleme göstergeleri oluşturmak için kullanabileceğiniz çeşitli composable'lar olsa da parametreleri çok farklı değildir. Aklınızda bulundurmanız gereken temel parametreler arasında şunlar yer alır:

• progress: Göstergenin mevcut ilerleme durumu. 0.0 ile 1.0 arasında bir 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 coroutine 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