Selettori dell'ora

I selettori dell'ora consentono agli utenti di selezionare un orario. Puoi utilizza gli elementi componibili TimePicker e TimeInput per implementare un intervallo selettore nella tua app.

Tipi

Esistono due tipi di selettore dell'ora:

  • Componi: consente agli utenti di impostare l'ora spostando un punto di manipolazione intorno a un quadrante.
  • Inserimento: consente agli utenti di impostare un orario utilizzando la tastiera.

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

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

Piattaforma API

Per implementare un selettore di data e ora, utilizza TimePicker o TimeInput componibile:

  • TimePicker: implementa un selettore dell'ora di chiamata.
  • TimeInput: implementa un selettore di data e ora di input.
di Gemini Advanced.

Stato

Per TimePicker e TimeInput, devi anche trasmettere un TimePickerState Consente di impostare l'ora selezionata predefinita da visualizzare sul selettore. Acquisisce anche l'ora selezionata dall'utente utilizzando 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 temporali.

Selettore ora di composizione

Questo snippet illustra come implementare un selettore di base per l'ora di chiamata.

@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

Considera quanto segue in questo snippet:

  • Calendar.getInstance() inizializza TimePickerState con lo stato attuale nel tempo.
    • In questo esempio viene utilizzato java.util.Calendar. Attiva Java Desugaring di più di 8 API nel tuo progetto da usare in alternativa java.time.LocalTime su tutte le versioni di Android.
  • Il componibile TimePicker mostra il selettore dell'ora, prendendo timePickerState come parametro.
  • L'implementazione include due pulsanti: uno per confermare la selezione e un'altra per chiudere il selettore.

Questa implementazione si presenta nel seguente modo:

Un selettore dell'ora di chiamata. L'utente può selezionare un'ora utilizzando l'anello.
Figura 2. Un selettore dell'ora di chiamata.

Selettore ora di input

Questo snippet mostra come implementare un selettore di orario per lo stile 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 è sostanzialmente la stessa del selettore dell'ora, con l'elemento principale rispetto all'utilizzo di TimeInput anziché di TimePicker.
  • Il parametro is24Hour per timePickerState è impostato esplicitamente su true. Per impostazione predefinita, questo valore è false.

Questa implementazione si presenta nel seguente modo:

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

Utilizza lo stato

Per utilizzare l'ora selezionata dall'utente in un selettore dell'ora, passa il TimePickerState appropriato alla funzione onConfirm. Partner principale componibile può quindi accedere al tempo selezionato tramite TimePickerState.hour e TimePickerState.minute.

Il seguente snippet 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

A questo punto si può chiamare il componibile:

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 ulteriori dettagli, consulta l'implementazione completa negli snippet Google Cloud.

Risorse aggiuntive