İlerleme durumu göstergeleri

İlerleme göstergeleri, işlemin durumunu görsel olarak gösterir. Bu reklamlar, verilerin yüklenmesi veya işlenmesi gibi işlemlerde işlemin tamamlanmaya ne kadar yaklaştığını kullanıcının dikkatini çekmek için hareketten yararlanır. Ayrıca tamamlanmaya ne kadar yakın olabileceğine bakmadan, işlemenin gerçekleştiğini 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 getirirken (örneğin, bir kullanıcı profili için resim veya veri yüklerken).
  • 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ı bildirin.

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: Çizgisinin uzunluğu, dairenin tüm çevresini kaplayacak şekilde uzanan bir daire.
Dairesel ilerleme göstergesinin yanında doğrusal bir ilerleme göstergesi
Şekil 1. İki tür ilerleme göstergesi.

API Yüzeyi

Materyal Tasarım ile tutarlı olan kayan işlem düğmeleri oluşturmak için kullanabileceğiniz çeşitli composable'lar olsa da, bunların parametreleri arasında büyük fark yoktur. Unutmamanız gereken önemli parametreler arasında şunlar vardır:

  • progress: Göstergenin görüntülediği geçerli ilerleme durumu. 0.0 ile 1.0 arasında Float ödeyin.
  • color: Gerçek göstergenin rengi. Yani, bileşenin ilerlemeyi yansıtan ve ilerleme tamamlandığında bileşeni tamamen kapsayan kısmı.
  • trackColor: Göstergenin çizildiği parkurun rengi.

Göstergeleri belirleyin

Belirli bir gösterge, bir işlemin tam olarak ne kadar tamamlanmış olduğunu gösterir. 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österir hem de progress değerini kademeli olarak artıran bir eş yordam başlatır. Bu, ilerleme göstergesinin de sırayla ilerlemesine 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 de şu şekilde görünür:

Belirsiz göstergeler

Belirsiz gösterge, bir işlemin tamamlanmaya ne kadar yakın olduğunu yansıtmaz. Bunun yerine, işlemin devam ettiğini kullanıcıya belirtmek için hareketten yararlanır, ancak işlemin tamamlanma durumunu belirtir.

Belirsiz bir ilerleme göstergesi oluşturmak için LinearProgressIndicator veya CircularProgressIndicator composable'ı kullanın ancak progress için değer göndermeyin. Aşağıdaki örnekte, düğmeye basarak belirsiz bir göstergeyi nasıl açabileceğ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 gösterildiği bir örnek verilmiştir.

Ek kaynaklar