Indikator progres menampilkan status operasi secara visual. Modul tersebut menggunakan gerakan untuk menunjukkan kepada pengguna bahwa proses tersebut sudah mendekati penyelesaian, seperti memuat atau memproses data. Peristiwa tersebut juga dapat menunjukkan bahwa pemrosesan sedang berlangsung, tanpa mengacu pada seberapa dekat dengan penyelesaiannya.
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, berikan kepada pengguna berapa banyak dari total yang 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.
- Lingkar: Lingkaran yang goresannya memanjang hingga mencapai keliling lingkaran.
Platform API
Meskipun ada beberapa composable yang dapat Anda gunakan untuk membuat indikator progres yang konsisten dengan Desain Material, parameternya tidak jauh berbeda. Berikut parameter utama yang harus Anda ingat:
progress
: Progres saat ini yang ditampilkan indikator. TeruskanFloat
antara0.0
dan1.0
.color
: Warna indikator sebenarnya. Artinya, bagian dari komponen yang mencerminkan progres dan yang sepenuhnya mencakup komponen saat progres selesai.trackColor
: Warna trek tempat indikator digambar.
Indikator tertentu
Indikator pasti menunjukkan dengan tepat seberapa lengkap suatu tindakan. Gunakan composable
LinearProgressIndicator
atau CircularProgressIndicator
dan teruskan nilai untuk parameter progress
.
Cuplikan berikut memberikan contoh yang relatif mendetail. Saat pengguna
menekan tombol tersebut, 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) } }
Saat pemuatan selesai sebagian, indikator linear pada contoh sebelumnya akan muncul sebagai berikut:
Demikian juga, indikator lingkaran muncul seperti berikut:
Indikator tidak tentu
Indikator yang tidak tentu tidak mencerminkan seberapa dekat proses penyelesaian operasi. 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 mengaktifkan/menonaktifkan 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, ) }
Berikut adalah contoh implementasi ini saat indikator aktif:
Berikut adalah contoh implementasi yang sama, tetapi dengan
LinearProgressIndicator
, bukan CircularProgressIndicator
.