Диалоги для выбора времени

В диалоговых окнах часто встречаются элементы выбора времени . Вы можете использовать относительно универсальную и минималистичную реализацию диалогового окна или же создать собственное диалоговое окно с большей гибкостью.

Для получения дополнительной информации о диалоговых окнах в целом, включая использование состояния средства выбора времени, см. руководство по средствам выбора времени .

Простой пример

Самый простой способ создать диалоговое окно для выбора времени — это создать компонент, реализующий интерфейс AlertDialog . Следующий фрагмент кода демонстрирует пример относительно минимального диалогового окна, созданного с использованием этого подхода: 

@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

Обратите внимание на ключевые моменты в этом фрагменте:

  1. Компонент DialWithDialogExample оборачивает TimePicker в диалоговое окно.
  2. TimePickerDialog — это пользовательский составной компонент, который создает AlertDialog со следующими параметрами:
    • onDismiss : Функция, вызываемая, когда пользователь закрывает диалоговое окно (с помощью кнопки закрытия или возврата назад).
    • onConfirm : Функция, вызываемая при нажатии пользователем кнопки «ОК».
    • content : Составной объект, отображающий средство выбора времени в диалоговом окне.
  3. В состав AlertDialog входят:
    • Кнопка закрытия с надписью «Закрыть».
    • Кнопка подтверждения с надписью «ОК».
    • Содержимое поля выбора времени передается в качестве text параметра.
  4. Метод DialWithDialogExample инициализирует состояние TimePickerState текущим временем и передает его как в TimePicker , так и в функцию onConfirm .
Элемент выбора времени в AlertDialog, реализующий заголовок, переключатель режима, а также кнопки закрытия и подтверждения.
Рисунок 1. Средство выбора времени в диалоговом окне оповещения.

Расширенный пример

Этот фрагмент кода демонстрирует расширенную реализацию настраиваемого диалогового окна выбора времени в 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

Обратите внимание на ключевые моменты в этом фрагменте:

  1. Компонент AdvancedTimePickerExample создает настраиваемый диалог выбора времени.
  2. В нем используется компонент Dialog , обеспечивающий большую гибкость, чем AlertDialog .
  3. Диалоговое окно включает в себя настраиваемый заголовок и кнопку переключения между режимами набора номера и ввода.
  4. Surface задает форму и высоту диалогового окна, используя IntrinsicSize.Min для ширины и высоты.
  5. Компоненты компоновки Column и Row обеспечивают структурное отображение диалогового окна.
  6. В примере режим выбора номера отслеживается с помощью showDial .
    • Кнопка IconButton переключает режимы, обновляя при этом значок.
    • Содержимое диалогового окна переключается между TimePicker и TimeInput в зависимости от состояния showDial .

Эта усовершенствованная реализация предоставляет настраиваемый и многократно используемый диалог выбора времени, который может адаптироваться к различным сценариям использования вашего приложения.

Данная реализация выглядит следующим образом:

Элемент выбора времени в пользовательском диалоговом окне, который включает заголовок, переключатель режима, а также кнопки закрытия и подтверждения.
Рисунок 2. Выбор времени в пользовательском диалоговом окне.

Дополнительные ресурсы