Indikator progres

Indikator progres menampilkan status operasi secara visual. Mereka menggunakan gerakan untuk menunjukkan kepada pengguna seberapa dekat proses penyelesaiannya, seperti memuat atau memproses data. Tanda itu juga dapat menunjukkan bahwa pemrosesan berlangsung diselesaikan, tanpa mengacu pada seberapa dekat dengan penyelesaian itu.

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 waktu yang dibutuhkan untuk mengupload.
  • Pemrosesan lama: Saat aplikasi memproses data dalam jumlah besar, menyampaikan kepada pengguna berapa banyak dari total yang sudah selesai.

Dalam Desain Material, ada dua jenis indikator progres:

  • Menentukan: Menampilkan secara tepat seberapa banyak progres yang telah dicapai.
  • Tidak tentu: Beranimasi terus-menerus tanpa memperhatikan progres.

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

  • Linear: Batang horizontal yang mengisi dari kiri ke kanan.
  • Lingkari: Lingkaran yang goresannya memanjang hingga mencapai keliling lingkaran.
Indikator progres linear di samping indikator progres melingkar.
Gambar 1. Ada dua jenis indikator progres.

Platform API

Meskipun ada beberapa composable yang dapat Anda gunakan untuk membuat indikator progres sesuai dengan Desain Material, parameternya tidak jauh berbeda. Di antara parameter utama yang harus diingat adalah sebagai berikut:

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

Indikator tertentu

Indikator yang jelas mencerminkan dengan tepat seberapa lengkap suatu tindakan. Gunakan salah satu LinearProgressIndicator atau CircularProgressIndicator composable dan meneruskan nilai untuk parameter progress.

Cuplikan berikut memberikan contoh yang relatif mendetail. Saat pengguna menekan tombol tersebut, aplikasi akan menampilkan indikator kemajuan, dan meluncurkan coroutine yang secara bertahap meningkatkan nilai progress. Hal ini menyebabkan indikator kemajuan untuk mengulanginya 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

Jika pemuatan selesai sebagian, indikator linear di referensi sebelumnya contoh akan terlihat seperti berikut:

Demikian juga, indikator lingkaran muncul seperti berikut:

Indikator tidak tentu

Indikator yang tidak tentu tidak mencerminkan seberapa dekat dengan penyelesaian suatu operasi alamat IP internalnya. Sebaliknya, cara 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 LinearProgressIndicator atau composable CircularProgressIndicator, tetapi tidak meneruskan nilai untuk progress. Contoh berikut menunjukkan cara mengaktifkan/menonaktifkan indikator yang 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 ini saat indikator aktif:

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

Referensi lainnya