Dialog untuk pemilih waktu

Pemilih waktu sering muncul dalam dialog. Anda dapat menggunakan implementasi dialog yang relatif umum dan minimal, atau Anda dapat menerapkan dialog kustom dengan fleksibilitas yang lebih besar.

Untuk informasi selengkapnya tentang dialog secara umum, termasuk cara menggunakan status pemilih waktu, lihat Panduan pemilih waktu.

Contoh dasar

Cara paling mudah untuk membuat dialog pemilih waktu adalah dengan membuat composable yang mengimplementasikan AlertDialog. Cuplikan berikut memberikan contoh dialog yang relatif minimal menggunakan pendekatan ini:

@Composable
fun DialWithDialogExample(
    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,
    )

    TimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) }
    ) {
        TimePicker(
            state = timePickerState,
        )
    }
}

@Composable
fun TimePickerDialog(
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    content: @Composable () -> Unit
) {
    AlertDialog(
        onDismissRequest = onDismiss,
        dismissButton = {
            TextButton(onClick = { onDismiss() }) {
                Text("Dismiss")
            }
        },
        confirmButton = {
            TextButton(onClick = { onConfirm() }) {
                Text("OK")
            }
        },
        text = { content() }
    )
}
TimePickers.kt

Perhatikan poin-poin penting dalam cuplikan ini:

1. Composable DialWithDialogExample menggabungkan TimePicker dalam dialog.
2. TimePickerDialog adalah composable kustom yang membuat AlertDialog dengan parameter berikut:
   • onDismiss: Fungsi yang dipanggil saat pengguna menutup dialog (melalui tombol tutup atau navigasi kembali).
   • onConfirm: Fungsi yang dipanggil saat pengguna mengklik tombol "OK".
   • content: Composable yang menampilkan pemilih waktu dalam dialog.
3. AlertDialog mencakup:
   • Tombol tutup berlabel "Tutup".
   • Tombol konfirmasi berlabel "Oke".
   • Konten pemilih waktu yang diteruskan sebagai parameter text.
4. DialWithDialogExample melakukan inisialisasi TimePickerState dengan waktu saat ini dan meneruskannya ke fungsi TimePicker dan onConfirm.

Gambar 1. Pemilih waktu di AlertDialog.

Contoh Lanjutan

Cuplikan ini menunjukkan implementasi lanjutan dialog pemilih waktu yang dapat disesuaikan di Jetpack Compose.

@Composable
fun AdvancedTimePickerExample(
    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,
    )

    /** Determines whether the time picker is dial or input */
    var showDial by remember { mutableStateOf(true) }

    /** The icon used for the icon button that switches from dial to input */
    val toggleIcon = if (showDial) {
        Icons.Filled.EditCalendar
    } else {
        Icons.Filled.AccessTime
    }

    AdvancedTimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) },
        toggle = {
            IconButton(onClick = { showDial = !showDial }) {
                Icon(
                    imageVector = toggleIcon,
                    contentDescription = "Time picker type toggle",
                )
            }
        },
    ) {
        if (showDial) {
            TimePicker(
                state = timePickerState,
            )
        } else {
            TimeInput(
                state = timePickerState,
            )
        }
    }
}

@Composable
fun AdvancedTimePickerDialog(
    title: String = "Select Time",
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    toggle: @Composable () -> Unit = {},
    content: @Composable () -> Unit,
) {
    Dialog(
        onDismissRequest = onDismiss,
        properties = DialogProperties(usePlatformDefaultWidth = false),
    ) {
        Surface(
            shape = MaterialTheme.shapes.extraLarge,
            tonalElevation = 6.dp,
            modifier =
            Modifier
                .width(IntrinsicSize.Min)
                .height(IntrinsicSize.Min)
                .background(
                    shape = MaterialTheme.shapes.extraLarge,
                    color = MaterialTheme.colorScheme.surface
                ),
        ) {
            Column(
                modifier = Modifier.padding(24.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 20.dp),
                    text = title,
                    style = MaterialTheme.typography.labelMedium
                )
                content()
                Row(
                    modifier = Modifier
                        .height(40.dp)
                        .fillMaxWidth()
                ) {
                    toggle()
                    Spacer(modifier = Modifier.weight(1f))
                    TextButton(onClick = onDismiss) { Text("Cancel") }
                    TextButton(onClick = onConfirm) { Text("OK") }
                }
            }
        }
    }
}
TimePickers.kt

Perhatikan poin-poin penting dalam cuplikan ini:

1. Composable AdvancedTimePickerExample membuat dialog pemilih waktu yang dapat disesuaikan.
2. Class ini menggunakan composable Dialog untuk fleksibilitas yang lebih besar daripada AlertDialog.
3. Dialog menyertakan judul yang dapat disesuaikan dan tombol tombol untuk beralih antara mode putar dan input.
4. Surface menerapkan bentuk dan elevasi ke dialog, dengan IntrinsicSize.Min untuk lebar dan tinggi.
5. Tata letak Column dan Row menyediakan komponen struktur dialog.
6. Contoh ini melacak mode pemilih menggunakan showDial.
   • IconButton beralih antar-mode, yang akan memperbarui ikon.
   • Konten dialog beralih antara TimePicker dan TimeInput berdasarkan status showDial.

Implementasi lanjutan ini menyediakan dialog pemilih waktu yang sangat dapat disesuaikan dan dapat digunakan kembali yang dapat beradaptasi dengan berbagai kasus penggunaan di aplikasi Anda.

Implementasi ini muncul sebagai berikut:

Gambar 2. Pemilih waktu dalam dialog kustom.

Referensi lainnya

• Panduan alat pilih waktu
• Desain Material - Pemilih Waktu