İlerleme durumu göstergeleri

İlerleme göstergeleri, işlemin durumunu görsel olarak gösterir. Hareketi kullanırlar sürecin tamamlanmaya ne kadar yaklaştığını (ör. veri yükleme veya işleme. Ayrıca, işleme sürecinin çok dağınık ne kadar yakın olabileceğine bakmadan, bir yeri

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

  • İçerik yükleme: Ağdan içerik getirirken (ör. yükleme işlemi) bir resim veya veri kullanabilirsiniz.
  • Dosya yükleme: Kullanıcıya, yüklemenin ne kadar sürebileceğine dair geri bildirim verin.
  • Uzun işleme: Bir uygulama büyük miktarda veri işlerken kullanıcıya toplamın ne kadarının tamamlandığını bildirir.

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

  • Belirlendi: Tam olarak ne kadar ilerleme kaydedildiğini gösterir.
  • Belirsiz: İlerlemeden bağımsız olarak sürekli hareket eder.

Benzer şekilde, bir ilerleme göstergesi de aşağıdaki iki biçimden birini alabilir:

  • Doğrusal: Soldan sağa doğru dolduran yatay bir çubuk.
  • Dairesel: Çizgisi dairenin tam çevresi.
ziyaret edin.
Dairesel ilerleme göstergesinin yanında doğrusal bir ilerleme göstergesi
Şekil 1. İki tür ilerleme göstergesi.

API Yüzeyi

İlerleme göstergeleri oluşturmak için kullanabileceğiniz birkaç composable olsa da parametrelerin arasında büyük farklar yoktur. Arasında unutmamanız gereken temel parametreler şunlardır:

  • progress: Göstergenin görüntülediği geçerli ilerleme durumu. Float kartı geçin 0.0 ile 1.0 arasında.
  • color: Gerçek göstergenin rengi. Yani, proje kapanışının ilerlemeyi yansıtan ve bileşeni tam olarak kapsayan bileşen yapmanız gerektiğini unutmayın.
  • trackColor: Göstergenin çizildiği parkurun rengi.
ziyaret edin.

Göstergeleri belirleyin

Belirli bir gösterge, bir işlemin ne kadar tamamlanmış olduğunu tam olarak yansıtır. Şunlardan birini kullanın: LinearProgressIndicator veya CircularProgressIndicator composable'ları oluşturun 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 eş yordam. Bu durum, ilerleme göstergesinin olması gerekir.

@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 örnek aşağıdaki gibi görünür:

Benzer şekilde, dairesel gösterge de şu şekilde görünür:

Belirsiz göstergeler

Belirsiz gösterge, bir işlemin tamamlanmaya ne kadar yaklaştığını yansıtmaz düşünülebilir. Bunun yerine, kullanıcıya işlemin devam ettiğini göstermek için tamamlama derecesi belirtilmeden yapılır.

Belirsiz bir ilerleme göstergesi oluşturmak için LinearProgressIndicator kullanın veya CircularProgressIndicator composable, ancak progress. Aşağıdaki örnekte, bir öğeyi belirsiz göstergesidir.

@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 bir örneği verilmiştir ancak CircularProgressIndicator yerine LinearProgressIndicator.

Ek kaynaklar