Indikator progres

Indikator progres menampilkan status operasi secara visual. Model ini menggunakan gerakan untuk menunjukkan kepada pengguna seberapa dekat proses akan selesai, seperti memuat atau memproses data. Peristiwa ini juga dapat menandakan bahwa pemrosesan sedang berlangsung, tanpa mengacu pada seberapa dekat prosesnya akan selesai.

Pertimbangkan tiga kasus penggunaan ini di mana Anda mungkin menggunakan indikator progres:

  • Memuat konten: Saat mengambil konten dari jaringan, seperti memuat gambar atau data untuk profil pengguna.
  • Upload file: Berikan masukan kepada pengguna tentang waktu yang diperlukan untuk mengupload file.
  • Pemrosesan panjang: Saat aplikasi memproses data dalam jumlah besar, beri tahu pengguna berapa banyak dari total yang selesai.

Dalam Desain Material, ada dua jenis indikator progres:

  • Determinasi: Menampilkan dengan tepat seberapa banyak progres yang telah dicapai.
  • Tidak pasti: Menganimasikan terus-menerus tanpa memperhatikan progres.

Demikian pula, indikator kemajuan dapat menggunakan salah satu dari dua bentuk berikut:

  • Linear: Bilah horizontal mengisi dari kiri ke kanan.
  • Circular: Lingkaran yang panjang goresannya mencapai keliling penuh lingkaran.
Indikator progres linear di samping indikator progres melingkar.
Gambar 1. Dua jenis indikator progres.

Platform API

Meskipun ada beberapa composable yang dapat Anda gunakan untuk membuat tombol tindakan mengambang yang konsisten dengan Desain Material, parameternya tidak jauh berbeda. Di antara parameter utama yang harus Anda perhatikan adalah sebagai berikut:

  • progress: Progres saat ini yang ditampilkan indikator. Teruskan Float antara 0.0 dan 1.0.
  • color: Warna indikator yang sebenarnya. Artinya, bagian dari komponen yang mencerminkan progres dan yang sepenuhnya mencakup komponen saat progres selesai.
  • trackColor: Warna trek tempat indikator digambar.

Indikator pasti

Indikator pasti mencerminkan secara persis seberapa selesai tindakan. Gunakan composable LinearProgressIndicator atau CircularProgressIndicator dan teruskan nilai untuk parameter progress.

Cuplikan berikut memberikan contoh yang relatif mendetail. Saat pengguna menekan tombol, aplikasi akan menampilkan indikator progres, dan meluncurkan coroutine yang secara bertahap meningkatkan nilai progress. Hal ini menyebabkan indikator progres melakukan iterasi secara bergantian.

@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

Saat pemuatan selesai sebagian, indikator linear dalam contoh sebelumnya akan muncul sebagai berikut:

Demikian juga, indikator lingkaran muncul sebagai berikut:

Indikator tidak pasti

Indikator yang tidak pasti tidak mencerminkan seberapa dekat operasi selesai. Sebaliknya, indikator ini menggunakan gerakan untuk menunjukkan kepada pengguna bahwa pemrosesan sedang berlangsung, meskipun tanpa menentukan tingkat penyelesaian apa pun.

Untuk membuat indikator progres yang tidak tentu, gunakan composable LinearProgressIndicator atau CircularProgressIndicator, tetapi jangan teruskan nilai untuk progress. Contoh berikut menunjukkan cara mengalihkan indikator tidak tentu dengan menekan tombol.

@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

Berikut adalah contoh implementasi saat indikator aktif:

Berikut adalah contoh implementasi yang sama, tetapi dengan LinearProgressIndicator, bukan CircularProgressIndicator.

Referensi tambahan