Pemilih waktu menyediakan cara bagi pengguna untuk memilih waktu. Anda dapat
menggunakan composable TimePicker
dan TimeInput
untuk menerapkan waktu
di aplikasi Anda.
Jenis
Ada dua jenis pemilih waktu:
- Telepon: Memungkinkan pengguna menyetel waktu dengan menggerakkan tuas di sekitar kenop.
- Input: Memungkinkan pengguna menyetel waktu menggunakan keyboard.
Gambar berikut memberikan contoh pemilih waktu panggilan di sebelah kiri, dan pemilih waktu input di sebelah kanan:
![Tombol dan pemilih waktu input.](https://developer.android.com/static/develop/ui/compose/images/components/timepickers.png?hl=id)
Platform API
Untuk mengimplementasikan pemilih waktu, gunakan TimePicker
atau TimeInput
composable:
TimePicker
: Menerapkan pemilih waktu panggilan.TimeInput
: Menerapkan pemilih waktu input.
Status
Untuk TimePicker
dan TimeInput
, Anda juga harus meneruskan
TimePickerState
Tindakan ini memungkinkan Anda menyetel waktu default terpilih yang muncul
pada pemilih. Aplikasi ini juga mencatat waktu yang dipilih pengguna menggunakan
pemilih.
Dialog
Pemilih waktu akan muncul dalam dialog. Contoh dalam panduan ini tidak menggunakan dialog. Untuk contoh yang menggunakan dialog, lihat panduan Dialog untuk pemilih waktu.
Pemilih waktu panggilan
Cuplikan ini menunjukkan cara mengimplementasikan pemilih waktu panggilan dasar.
@Composable fun DialExample( onConfirm: () -> Unit, onDismiss: () -> Unit, ) { val currentTime = Calendar.getInstance() val timePickerState = rememberTimePickerState( initialHour = currentTime.get(Calendar.HOUR_OF_DAY), initialMinute = currentTime.get(Calendar.MINUTE), is24Hour = true, ) Column { TimePicker( state = timePickerState, ) Button(onClick = onDismiss) { Text("Dismiss picker") } Button(onClick = onConfirm) { Text("Confirm selection") } } }
Pertimbangkan hal berikut dalam cuplikan ini:
Calendar.getInstance()
melakukan inisialisasiTimePickerState
dengan baik.- Contoh ini menggunakan
java.util.Calendar
. Mengaktifkan Java 8+ desugaring API di project Anda untuk digunakanjava.time.LocalTime
di semua versi Android.
- Contoh ini menggunakan
- Composable
TimePicker
menampilkan pemilih waktu, yang menampilkantimePickerState
sebagai parameter. - Implementasi ini mencakup dua tombol: satu untuk mengonfirmasi pemilihan dan satu lagi untuk menutup pemilih.
Implementasi ini muncul sebagai berikut:
![Pemilih waktu panggilan. Pengguna dapat memilih waktu menggunakan kenop.](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-dial.png?hl=id)
Pemilih waktu input
Cuplikan ini menunjukkan cara mengimplementasikan pemilih waktu gaya input dasar.
@Composable fun InputExample( onConfirm: () -> Unit, onDismiss: () -> Unit, ) { val currentTime = Calendar.getInstance() val timePickerState = rememberTimePickerState( initialHour = currentTime.get(Calendar.HOUR_OF_DAY), initialMinute = currentTime.get(Calendar.MINUTE), is24Hour = true, ) Column { TimeInput( state = timePickerState, ) Button(onClick = onDismiss) { Text("Dismiss picker") } Button(onClick = onConfirm) { Text("Confirm selection") } } }
Poin penting yang perlu diperhatikan dalam penerapan ini:
- Strukturnya pada dasarnya sama dengan pemilih
waktu panggilan, dengan tombol
perbedaannya adalah penggunaan
TimeInput
, bukanTimePicker
. - Parameter
is24Hour
untuktimePickerState
ditetapkan secara eksplisit ketrue
. Secara default, nilainya adalahfalse
.
Implementasi ini muncul sebagai berikut:
![Pemilih waktu input. Pengguna dapat memasukkan waktu menggunakan kolom teks.](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-input.png?hl=id)
Menggunakan status
Untuk memanfaatkan waktu yang telah dipilih pengguna dalam pemilih waktu, teruskan
TimePickerState
yang sesuai untuk fungsi onConfirm
Anda. Orang tua
maka composable dapat mengakses waktu yang dipilih melalui TimePickerState.hour
dan
TimePickerState.minute
.
Cuplikan berikut menunjukkan cara melakukannya:
@Composable fun DialUseStateExample( onConfirm: (TimePickerState) -> Unit, onDismiss: () -> Unit, ) { val currentTime = Calendar.getInstance() val timePickerState = rememberTimePickerState( initialHour = currentTime.get(Calendar.HOUR_OF_DAY), initialMinute = currentTime.get(Calendar.MINUTE), is24Hour = true, ) Column { TimePicker( state = timePickerState, ) Button(onClick = onDismiss) { Text("Dismiss picker") } Button(onClick = { onConfirm(timePickerState) }) { Text("Confirm selection") } } }
Anda kemudian dapat memanggil composable seperti ini:
var selectedTime: TimePickerState? by remember { mutableStateOf(null) }
// ...
DialUseStateExample(
onDismiss = {
showDialExample = false
},
onConfirm = {
time ->
selectedTime = time
showDialExample = false
},
)
// ...
if (selectedTime != null) {
val cal = Calendar.getInstance()
cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
cal.set(Calendar.MINUTE, selectedTime!!.minute)
cal.isLenient = false
Text("Selected time = ${formatter.format(cal.time)}")
} else {
Text("No time selected.")
}
Untuk detail selengkapnya, lihat penerapan lengkap di cuplikan aplikasi.