Dialog untuk pemilih waktu

Pemilih waktu sering muncul dalam dialog. Anda dapat menggunakan implementasi dialog yang relatif generik dan minimal, atau Anda dapat mengimplementasikan dialog kustom dengan lebih fleksibel.

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

Contoh dasar

Cara paling mudah untuk membuat dialog bagi pemilih waktu Anda 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 utama 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 kembali ke navigasi).
    • 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 "OK".
    • Konten pemilih waktu yang diteruskan sebagai parameter text.
  4. DialWithDialogExample menginisialisasi TimePickerState dengan waktu saat ini dan meneruskannya ke fungsi TimePicker dan onConfirm.
Pemilih waktu dalam AlertDialog yang menerapkan judul, tombol pengalihan mode, serta tombol tutup dan konfirmasi.
Gambar 1. Pemilih waktu di AlertDialog.

Contoh lanjutan

Cuplikan ini menunjukkan implementasi lanjutan dari 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 utama dalam cuplikan ini:

  1. Composable AdvancedTimePickerExample membuat dialog pemilih waktu yang dapat disesuaikan.
  2. Composable ini menggunakan Dialog untuk fleksibilitas yang lebih besar daripada AlertDialog.
  3. Dialog ini mencakup judul yang dapat disesuaikan dan tombol pengalihan 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, sehingga 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 akan terlihat sebagai berikut:

Pemilih waktu dalam dialog kustom yang menerapkan judul, tombol pengalihan mode, serta tombol tutup dan konfirmasi.
Gambar 2. Pemilih waktu dalam dialog kustom.

Referensi lainnya