Indikator progres

Indikator progres secara visual menampilkan status operasi. Indikator ini menggunakan gerakan untuk menarik perhatian pengguna tentang seberapa dekat proses tersebut dengan penyelesaian, seperti memuat atau memproses data. Indikator ini juga dapat menunjukkan bahwa pemrosesan sedang berlangsung, tanpa mengacu pada seberapa dekat proses tersebut dengan penyelesaian.

Pertimbangkan tiga kasus penggunaan berikut saat 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 perkiraan durasi upload.
• Pemrosesan panjang: Saat aplikasi memproses data dalam jumlah besar, sampaikan kepada pengguna berapa banyak total yang telah selesai.

Dalam Material Design, ada dua jenis indikator progres:

• Determinate: Menampilkan dengan tepat berapa banyak progres yang telah dibuat.
• Indeterminate: Terus-menerus menganimasikan tanpa memperhatikan progres.

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

• Linear: Batang horizontal yang terisi dari kiri ke kanan.
• Circular: Lingkaran yang goresannya bertambah panjang hingga mencakup seluruh keliling lingkaran.

Platform API

Meskipun ada beberapa composable yang dapat Anda gunakan untuk membuat indikator progres yang konsisten dengan Material Design, parameternya tidak terlalu berbeda. Di antara parameter utama yang harus Anda ingat adalah sebagai berikut:

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

Indikator determinate

Indikator determinate mencerminkan dengan tepat seberapa lengkap suatu tindakan. Gunakan salah satu 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 berulang secara berurutan.

@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

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

Demikian pula, indikator melingkar akan muncul sebagai berikut:

Indikator indeterminate

Indikator indeterminate tidak mencerminkan seberapa dekat operasi dengan penyelesaian. Namun, indikator ini menggunakan gerakan untuk menunjukkan kepada pengguna bahwa pemrosesan sedang berlangsung, meskipun tanpa menentukan tingkat penyelesaian.

Untuk membuat indikator progres indeterminate, gunakan composable LinearProgressIndicator atau CircularProgressIndicator, tetapi jangan teruskan nilai untuk progress. Contoh berikut menunjukkan cara mengalihkan indikator indeterminate 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 penerapan ini saat indikator aktif:

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

Referensi lainnya

• Dokumen UI Material