Selettori dell'ora

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

Tipi

Esistono due tipi di selettore dell'ora:

  • Quadrante: consente agli utenti di impostare un'ora spostando una manopola su un quadrante.
  • Immissione: consente agli utenti di impostare un'ora utilizzando la tastiera.

L'immagine seguente mostra un esempio di selettore dell'ora sul quadrante a sinistra e un selettore dell'ora di immissione a destra:

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

API surface

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

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

Stato

Sia per TimePicker che per TimeInput, devi anche passare un TimePickerState. In questo modo puoi impostare l'ora selezionata predefinita 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 ora di composizione

Questo snippet mostra come implementare un selettore dell'ora del quadrante 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

Considera quanto segue in questo snippet:

  • Calendar.getInstance() inizializza TimePickerState con l'ora corrente.
  • Il componibile TimePicker mostra il selettore dell'ora e utilizza timePickerState come parametro.
  • L'implementazione include due pulsanti: uno per confermare la selezione e un altro per chiudere il selettore.

Questa implementazione è visualizzata come segue:

Un selettore dell'ora di chiamata. L'utente può selezionare un'ora utilizzando il quadrante.
Figura 2. Un selettore dell'ora sul quadrante.

Inserisci selettore ora

Questo snippet mostra come implementare un selettore dell'ora di stile di immissione 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 tenere in considerazione in questa implementazione:

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

Questa implementazione è visualizzata come segue:

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

Utilizzare lo stato

Per utilizzare l'ora selezionata dall'utente in un selettore dell'ora, passa il valore TimePickerState appropriato alla funzione onConfirm. L'elemento componibile padre potrà quindi accedere all'ora selezionata 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

Potresti quindi chiamare il composable come segue:

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 snippet.

Risorse aggiuntive