Selectores de horarios

Los selectores de horarios permiten que los usuarios seleccionen la hora. Puedes usa los elementos componibles TimePicker y TimeInput para implementar una hora selector de tu aplicación.

Tipos

Existen dos tipos de selectores de hora:

  • Marcar: Permite que los usuarios muevan un controlador alrededor de un dial para configurar la hora.
  • Entrada: Permite que los usuarios establezcan una hora con el teclado.

En la siguiente imagen, se muestra un ejemplo de un selector de hora de marcación a la izquierda. un selector de hora de entrada a la derecha:

Un dial y un selector de hora de entrada.
Figura 1: Un dial y un selector de hora de entrada

Plataforma de API

Para implementar un selector de hora, usa TimePicker o TimeInput. elemento componible:

  • TimePicker: Implementa un selector de hora de marcado.
  • TimeInput: Implementa un selector de hora de entrada.

State

Para TimePicker y TimeInput, también debes pasar un TimePickerState Esto te permite establecer la hora seleccionada predeterminada que aparece en el selector. También captura la hora que el usuario seleccionó con el selector.

Diálogo

Los selectores de hora aparecen en los diálogos. En los ejemplos de esta guía, no se usan diálogos. Para ver ejemplos que usen diálogos, consulta la guía Diálogos para selectores de hora.

Selector de hora de marcado

Este fragmento muestra cómo implementar un selector de hora de marcado básico.

@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")
        }
    }
}
TimePickers.kt

Ten en cuenta lo siguiente en este fragmento:

  • Calendar.getInstance() inicializa TimePickerState con el valor tiempo.
  • El elemento componible TimePicker muestra el selector de hora, que toma timePickerState como parámetro
  • La implementación incluye dos botones: uno para confirmar la selección y con otro para descartar el selector.

Esta implementación aparece de la siguiente manera:

Un selector de hora de marcado. El usuario puede seleccionar la hora con el dial.
Figura 2: Un selector de hora de marcado

Selector de horario de entrada

En este fragmento, se muestra cómo implementar un selector de hora de estilo de entrada básico.

@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")
        }
    }
}
TimePickers.kt

Puntos clave que debes tener en cuenta en esta implementación:

  • La estructura es básicamente la misma que el selector de hora de marcación, con las principales La diferencia es el uso de TimeInput en lugar de TimePicker.
  • El parámetro is24Hour para timePickerState se establece de forma explícita en true. De forma predeterminada, este valor es false.

Esta implementación aparece de la siguiente manera:

Un selector de hora de entrada. El usuario puede ingresar una hora mediante los campos de texto.
Figura 3: Un selector de hora de entrada

Usa el estado

Para aprovechar la hora que el usuario seleccionó en un selector de hora, pasa el TimePickerState apropiado para tu función onConfirm. El padre el elemento componible puede acceder a la hora seleccionada a través de TimePickerState.hour y TimePickerState.minute

En el siguiente fragmento, se muestra cómo hacerlo:

@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")
        }
    }
}
TimePickers.kt

Luego, puedes llamar al elemento componible de la siguiente manera:

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.")
}

Para obtener más información, consulte la implementación completa en los fragmentos de la aplicación.

Recursos adicionales