Selettori dell'ora

I selettori dell'ora consentono agli utenti di selezionare un'ora. Puoi utilizzare i composable TimePicker e TimeInput per implementare un selettore dell'ora nella tua app.

Tipi

Esistono due tipi di selettori dell'ora:

  • Selettore a rotella: consente agli utenti di impostare un'ora spostando una maniglia attorno a una rotella.
  • Selettore di input: consente agli utenti di impostare un'ora utilizzando la tastiera.

L'immagine seguente mostra un esempio di selettore dell'ora a rotella a sinistra e un selettore dell'ora di input a destra:

Un quadrante e un selettore di orario di input.
Figura 1. Un selettore dell'ora a rotella e un selettore dell'ora di input.

Piattaforma API

Per implementare un selettore dell'ora, utilizza il composable TimePicker o TimeInput:

  • TimePicker: implementa un selettore dell'ora a rotella.
  • TimeInput: implementa un selettore dell'ora di input.

Stato

Per TimePicker e TimeInput, devi anche passare un TimePickerState. In questo modo puoi impostare l'ora selezionata predefinita che viene visualizzata nel selettore. Acquisisce anche l'ora selezionata dall'utente utilizzando il selettore.

Finestra di dialogo

I selettori dell'ora vengono visualizzati nelle finestre di dialogo. Gli esempi in questa guida non utilizzano le finestre di dialogo. Per esempi che utilizzano le finestre di dialogo, consulta la guida Finestre di dialogo per i selettori dell'ora.

Selettore dell'ora a rotella

Questo snippet mostra come implementare un selettore dell'ora a rotella di base.

@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

Tieni presente quanto segue in questo snippet:

  • Calendar.getInstance() inizializza TimePickerState con l'ora corrente.
    • Questo esempio utilizza java.util.Calendar. Abilita il desugaring dell'API Java 8+ nel tuo progetto per utilizzare in alternativa java.time.LocalTime su tutte le versioni di Android.
  • Il composable TimePicker visualizza il selettore dell'ora, prendendo timePickerState come parametro.
  • L'implementazione include due pulsanti: uno per confermare la selezione e un altro per chiudere il selettore.

Ecco come appare la barra:

Un selettore dell'ora a rotella. L'utente può selezionare un orario utilizzando il quadrante.
Figura 2. Un selettore dell'ora a rotella.

Selettore dell'ora di input

Questo snippet mostra come implementare un selettore dell'ora di input di base.

@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

Punti chiave da notare in questa implementazione:

  • La struttura è essenzialmente la stessa del selettore dell'ora a rotella, con la differenza principale che utilizza TimeInput anziché TimePicker.
  • Il parametro is24Hour per timePickerState è impostato esplicitamente su true. Per impostazione predefinita, questo valore è false.

Ecco come appare l'implementazione:

Un selettore dell'ora di input. L'utente può inserire un orario utilizzando i campi di testo.
Figura 3. Un selettore dell'ora di input.

Utilizzare lo stato

Per utilizzare l'ora selezionata dall'utente in un selettore dell'ora, passa il TimePickerState appropriato alla funzione onConfirm. Il composable principale può quindi accedere all'ora selezionata tramite TimePickerState.hour e TimePickerState.minute.

Lo snippet seguente mostra come eseguire questa operazione:

@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

Puoi quindi chiamare il composable in questo modo:

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

Per maggiori dettagli, consulta l'implementazione completa nell'app snippets.

Risorse aggiuntive