Aggiungi selettori alla tua app

Prova Compose
Jetpack Compose è il toolkit per la UI consigliato per Android. Scopri come aggiungere componenti in Compose.
Selettori di date →

Android fornisce controlli per consentire all'utente di scegliere un'ora o una data come dialoghi pronti all'uso. Questi selettori forniscono controlli per selezionare ogni parte dell'ora (ora, minuti, AM/PM) o della data (mese, giorno, anno).

Esempio di selettore dell'ora da material.io
Figura 1. Selezione dell'ora in un selettore del calendario mobile.

L'utilizzo di questi selettori consente di garantire che gli utenti possano scegliere un'ora o una data valida, formattata correttamente e adattata alle impostazioni internazionali dell'utente.

Un esempio di selettore della data modale da material.io
Figura 2. Selettore della data modale.

Ti consigliamo di utilizzare DialogFragment per ospitare ogni selettore di ora o data. DialogFragment gestisce il ciclo di vita della finestra di dialogo per te e ti consente di visualizzare i selettori in diverse configurazioni di layout, ad esempio in una finestra di dialogo di base sui portatili o come parte incorporata del layout su schermi di grandi dimensioni.

Crea un selettore dell'ora

Per visualizzare un TimePickerDialog utilizzando DialogFragment, definisci una classe di frammenti che estenda DialogFragment e restituisca un TimePickerDialog dal metodo onCreateDialog() del frammento.

Estendi DialogFragment per un selettore dell'ora

Per definire un DialogFragment per un TimePickerDialog, segui questi passaggi:

  • Definisci il metodo onCreateDialog() per restituire un'istanza di TimePickerDialog.
  • Implementa l'interfaccia TimePickerDialog.OnTimeSetListener per ricevere un callback quando l'utente imposta l'ora.

Ecco un esempio:

Kotlin

class TimePickerFragment : DialogFragment(), TimePickerDialog.OnTimeSetListener {

    override fun onCreateDialog(savedInstanceState: Bundle): Dialog {
        // Use the current time as the default values for the picker.
        val c = Calendar.getInstance()
        val hour = c.get(Calendar.HOUR_OF_DAY)
        val minute = c.get(Calendar.MINUTE)

        // Create a new instance of TimePickerDialog and return it.
        return TimePickerDialog(activity, this, hour, minute, DateFormat.is24HourFormat(activity))
    }

    override fun onTimeSet(view: TimePicker, hourOfDay: Int, minute: Int) {
        // Do something with the time the user picks.
    }
}

Java

public static class TimePickerFragment extends DialogFragment
                            implements TimePickerDialog.OnTimeSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current time as the default values for the picker.
        final Calendar c = Calendar.getInstance();
        int hour = c.get(Calendar.HOUR_OF_DAY);
        int minute = c.get(Calendar.MINUTE);

        // Create a new instance of TimePickerDialog and return it.
        return new TimePickerDialog(getActivity(), this, hour, minute,
                DateFormat.is24HourFormat(getActivity()));
    }

    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
        // Do something with the time the user picks.
    }
}

Per informazioni sugli argomenti del costruttore, consulta la classe TimePickerDialog.

Ora ti serve solo un evento che aggiunga un'istanza di questo frammento alla tua attività.

Mostrare il selettore ora

Dopo aver definito un DialogFragment come quello nell'esempio precedente, puoi visualizzare il selettore dell'ora creando un'istanza di DialogFragment e chiamando il metodo show().

Ad esempio, ecco un pulsante che, quando viene toccato, chiama un metodo per mostrare la finestra di dialogo:

<Button
    android:id="@+id/pickTime"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Pick time" />

Quando l'utente tocca questo pulsante, il sistema chiama il seguente metodo:

Kotlin

findViewById<Button>(R.id.pickTime).setOnClickListener {
    TimePickerFragment().show(supportFragmentManager, "timePicker")
}

Java

findViewById<Button>(R.id.pickTime).setOnClickListener {
    TimePickerFragment().show(supportFragmentManager, "timePicker");
}

Questo metodo chiama show() su una nuova istanza di DialogFragment definita nell'esempio precedente. Il metodo show() richiede un'istanza di FragmentManager e un nome tag univoco per il frammento.

Creare un selettore della data

La creazione di un DatePickerDialog è come la creazione di un TimePickerDialog. La differenza è il dialogo che crei per il frammento.

Per visualizzare un DatePickerDialog utilizzando DialogFragment, definisci una classe di frammenti che estende DialogFragment e restituisci un DatePickerDialog dal metodo onCreateDialog() del frammento.

Estendi DialogFragment per un selettore della data

Per definire un DialogFragment per un DatePickerDialog, segui questi passaggi:

  • Definisci il metodo onCreateDialog() per restituire un'istanza di DatePickerDialog.
  • Implementa l'interfaccia DatePickerDialog.OnDateSetListener per ricevere un callback quando l'utente imposta la data.

Ecco un esempio:

Kotlin

class DatePickerFragment : DialogFragment(), DatePickerDialog.OnDateSetListener {

    override fun onCreateDialog(savedInstanceState: Bundle): Dialog {
        // Use the current date as the default date in the picker.
        val c = Calendar.getInstance()
        val year = c.get(Calendar.YEAR)
        val month = c.get(Calendar.MONTH)
        val day = c.get(Calendar.DAY_OF_MONTH)

        // Create a new instance of DatePickerDialog and return it.
        return DatePickerDialog(requireContext(), this, year, month, day)

    }

    override fun onDateSet(view: DatePicker, year: Int, month: Int, day: Int) {
        // Do something with the date the user picks.
    }
}

Java

public static class DatePickerFragment extends DialogFragment
                            implements DatePickerDialog.OnDateSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current date as the default date in the picker.
        final Calendar c = Calendar.getInstance();
        int year = c.get(Calendar.YEAR);
        int month = c.get(Calendar.MONTH);
        int day = c.get(Calendar.DAY_OF_MONTH);

        // Create a new instance of DatePickerDialog and return it.
        return new DatePickerDialog(requireContext(), this, year, month, day);
    }

    public void onDateSet(DatePicker view, int year, int month, int day) {
        // Do something with the date the user picks.
    }
}

Consulta la classe DatePickerDialog per informazioni sugli argomenti del costruttore.

Ti serve solo un evento che aggiunga un'istanza di questo frammento alla tua attività.

Mostrare il selettore della data

Dopo aver definito un DialogFragment come nell'esempio precedente, puoi visualizzare il selettore della data creando un'istanza di DialogFragment e chiamando show().

Ad esempio, ecco un pulsante che, quando viene toccato, chiama un metodo per mostrare la finestra di dialogo:

<Button
    android:id="@+id/pickDate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Pick date"/>

Quando l'utente tocca questo pulsante, il sistema chiama il seguente metodo:

Kotlin

findViewById<Button>(R.id.pickDate).setOnClickListener {
    val newFragment = DatePickerFragment()
    newFragment.show(supportFragmentManager, "datePicker")
}

Java

findViewById<Button>(R.id.pickDate).setOnClickListener {
    val newFragment = DatePickerFragment();
    newFragment.show(supportFragmentManager, "datePicker");
}

Questo metodo chiama show() su una nuova istanza di DialogFragment definita nell'esempio precedente. Il metodo show() richiede un'istanza di FragmentManager e un nome tag univoco per il frammento.

Utilizzare i selettori con la compilazione automatica

Nel 2017, Android ha introdotto il framework di compilazione automatica, che consente agli utenti di salvare i dati che possono essere utilizzati per compilare i moduli in diverse app. I selettori possono essere utili negli scenari di compilazione automatica fornendo un'interfaccia utente che consente agli utenti di modificare il valore di un campo che memorizza dati di data o ora. Ad esempio, in un modulo per la carta di credito, un selettore della data consente agli utenti di inserire o modificare la data di scadenza della propria carta di credito.

Poiché i selettori sono finestre di dialogo, non vengono visualizzati in un'attività insieme ad altri campi. Per visualizzare i dati del selettore quando non è visibile, puoi utilizzare un'altra visualizzazione, ad esempio un EditText, che può mostrare il valore quando il selettore non è visibile.

Un oggetto EditText si aspetta in modo nativo dati di compilazione automatica di tipo AUTOFILL_TYPE_TEXT. Al contrario, i servizi di compilazione automatica salvano i dati come AUTOFILL_TYPE_DATE per creare una rappresentazione appropriata. Per risolvere l'incoerenza nei tipi, ti consigliamo di creare una visualizzazione personalizzata che erediti da EditText e implementi i metodi necessari per gestire correttamente i valori di tipo AUTOFILL_TYPE_DATE.

Per creare una sottoclasse di EditText che possa gestire valori di tipo AUTOFILL_TYPE_DATE:

  1. Crea una classe che eredita da EditText.
  2. Implementa il metodo getAutofillType() che restituisce AUTOFILL_TYPE_DATE.
  3. Implementa il metodo getAutofillValue(), che restituisce un oggetto AutofillValue che rappresenta la data in millisecondi. Per creare l'oggetto restituzione, utilizza il metodo forDate() per generare un oggetto AutofillValue.
  4. Implementa il metodo autofill(). Questo metodo fornisce la logica per gestire il parametro AutofillValue, di tipo AUTOFILL_TYPE_DATE. Per gestire il parametro, crea una rappresentazione di stringa appropriata, ad esempio mm/yyyy. Utilizza la rappresentazione della stringa per impostare la proprietà text della visualizzazione.
  5. Implementa una funzionalità che mostri un selettore quando l'utente vuole modificare la data nella sottoclasse personalizzata di EditText. La visualizzazione aggiorna la proprietà text con una rappresentazione stringa del valore che l'utente seleziona nel selettore.

Per un esempio di sottoclasse di EditText che gestisce i valori AUTOFILL_TYPE_DATE, consulta l'esempio di framework Compilazione automatica in Java o Kotlin.

Per scoprire di più sulla dimostrazione del supporto della compilazione automatica per le visualizzazioni personalizzate, consulta Framework di compilazione automatica.