Dialog untuk pemilih waktu

Alat pilih waktu sering muncul dalam dialog. Anda dapat menggunakan model implementasi minimal dari suatu dialog, atau Anda bisa mengimplementasikan dialog kustom lebih fleksibel.

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

Contoh dasar

Cara paling mudah untuk membuat dialog bagi pemilih waktu Anda adalah dengan buat 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 yang diberi label "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 lebih besar daripada AlertDialog.
3. Dialog ini menyertakan judul yang dapat disesuaikan dan tombol untuk beralih antara mode {i>dial <i}dan {i>input.<i}
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 antarmode, dan memperbarui ikon sebagaimana mestinya.
   • 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