Pemilih waktu

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.
Gambar 1. Tombol dan pemilih waktu input.

Platform API

Untuk mengimplementasikan pemilih waktu, gunakan TimePicker atau TimeInput composable:

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")
        }
    }
}
TimePickers.kt

Pertimbangkan hal berikut dalam cuplikan ini:

  • Calendar.getInstance() melakukan inisialisasi TimePickerState dengan baik.
    • Contoh ini menggunakan java.util.Calendar. Mengaktifkan Java 8+ desugaring API di project Anda untuk digunakan java.time.LocalTime di semua versi Android.
  • Composable TimePicker menampilkan pemilih waktu, yang menampilkan timePickerState 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.
Gambar 2. Alat pilih waktu panggilan.

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")
        }
    }
}
TimePickers.kt

Poin penting yang perlu diperhatikan dalam penerapan ini:

  • Strukturnya pada dasarnya sama dengan pemilih waktu panggilan, dengan tombol perbedaannya adalah penggunaan TimeInput, bukan TimePicker.
  • Parameter is24Hour untuk timePickerState ditetapkan secara eksplisit ke true. Secara default, nilainya adalah false.

Implementasi ini muncul sebagai berikut:

Pemilih waktu input. Pengguna dapat memasukkan waktu menggunakan kolom teks.
Gambar 3. Alat pilih waktu input.

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")
        }
    }
}
TimePickers.kt

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.

Referensi lainnya