Pemilih waktu

Alat pilih waktu menyediakan cara bagi pengguna untuk memilih waktu. Anda dapat menggunakan composable TimePicker dan TimeInput untuk menerapkan pemilih waktu di aplikasi Anda.

Jenis

Ada dua jenis pemilih waktu:

  • Tombol putar: Memungkinkan pengguna menyetel waktu dengan menggerakkan tuas di sekitar tombol putar.
  • Input: Memungkinkan pengguna menyetel waktu menggunakan keyboard.

Gambar berikut memberikan contoh pemilih waktu dial di sebelah kiri, dan pemilih waktu input di sebelah kanan:

Pemilih waktu input dan putar.
Gambar 1. Pemilih waktu input dan putar.

Platform API

Untuk menerapkan pemilih waktu, gunakan composable TimePicker atau TimeInput:

Negara Bagian

Untuk TimePicker dan TimeInput, Anda juga harus meneruskan TimePickerState. Dengan demikian, Anda dapat menetapkan waktu yang dipilih secara default yang muncul pada alat pilih. Fungsi ini juga mencatat waktu yang telah dipilih pengguna menggunakan pemilih.

Dialog

Pemilih waktu muncul dalam dialog. Contoh dalam panduan ini tidak menggunakan dialog. Untuk contoh yang menggunakan dialog, lihat panduan Dialog untuk alat pilih waktu.

Pemilih waktu putar

Cuplikan ini menunjukkan cara mengimplementasikan pemilih waktu putar 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")
        }
    }
}

Perhatikan hal berikut dalam cuplikan ini:

  • Calendar.getInstance() menginisialisasi TimePickerState dengan waktu saat ini.
    • Contoh ini menggunakan java.util.Calendar. Aktifkan desugaring API Java 8+ dalam project Anda untuk menggunakan java.time.LocalTime di semua versi Android.
  • Composable TimePicker menampilkan alat pilih waktu, dengan menggunakan timePickerState sebagai parameter.
  • Implementasi ini mencakup dua tombol: satu untuk mengonfirmasi pilihan dan satu lagi untuk menutup pemilih.

Implementasi ini akan terlihat seperti berikut:

Pemilih waktu putar. Pengguna dapat memilih waktu menggunakan tombol putar.
Gambar 2. Pemilih waktu putar.

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-poin penting yang perlu diperhatikan dalam implementasi ini:

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

Implementasi ini akan terlihat seperti berikut:

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

Menggunakan status

Untuk menggunakan waktu yang telah dipilih pengguna di pemilih waktu, teruskan TimePickerState yang sesuai ke fungsi onConfirm Anda. Composable induk kemudian 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")
        }
    }
}

Kemudian, Anda 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 mengetahui detail selengkapnya, lihat penerapan lengkap di aplikasi cuplikan.

Referensi lainnya