Aggiungi selettori alla tua app

Prova la funzionalità Scrivi
Jetpack Compose è il toolkit per l'interfaccia utente consigliato per Android. Scopri come aggiungere componenti in Compose.
Selettori della data →

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

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

L'utilizzo di questi selettori aiuta a garantire che gli utenti possano scegliere una data o un'ora che siano valide, formattate correttamente e adattate alle impostazioni internazionali dell'utente.

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 data e ora. DialogFragment gestisce il ciclo di vita della finestra di dialogo e ti consente di visualizzare i selettori in diverse configurazioni del layout, ad esempio in una finestra di dialogo di base sugli smartphone o come parte incorporata del layout su schermi di grandi dimensioni.

Crea un selettore di data e ora

Per visualizzare un TimePickerDialog utilizzando DialogFragment, definisci una classe di frammento che si estende DialogFragment e restituisce un TimePickerDialog dal metodo onCreateDialog() del frammento.

Estendere DialogFragment per un selettore dell'ora

Per definire un DialogFragment per un TimePickerDialog:

  • 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.
    }
}

Consulta la classe TimePickerDialog per informazioni sugli argomenti del costruttore.

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

Mostra il selettore dell'ora

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

Ad esempio, di seguito è riportato un pulsante che, se toccato, chiama un metodo per mostrare la dialog:

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

Crea un selettore di date

La creazione di un DatePickerDialog è simile alla creazione di un TimePickerDialog. La differenza è il dialogo che crei per il frammento.

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

Estendere DialogFragment per un selettore della data

Per definire un DialogFragment per un DatePickerDialog:

  • 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.
    }
}

Vedi la classe DatePickerDialog per informazioni sugli argomenti del costruttore.

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

Mostra il selettore della data

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

Ad esempio, di seguito è riportato un pulsante che, se toccato, chiama un metodo per mostrare la dialog:

<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 perché forniscono 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 di carta di credito, un selettore di date consente agli utenti di inserire o modificare la data di scadenza della carta.

Poiché i selettori sono finestre di dialogo, non vengono visualizzati in un'attività insieme ad altri campi. Per visualizzare i dati del selettore quando il selettore non è visibile, puoi utilizzare un'altra vista, ad esempio 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. I servizi di compilazione automatica, invece, salvano i dati comeAUTOFILL_TYPE_DATE per creare una rappresentazione appropriata. Per risolvere l'incongruenza tra i tipi, ti consigliamo di creare una vista personalizzata che eredita da EditText e implementa 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 restituito, utilizza il metodo forDate() per generare un oggetto AutofillValue.
  4. Implementa il metodo autofill(). Questo metodo fornisce la logica per gestire il parametro AutofillValue, che è di tipo AUTOFILL_TYPE_DATE. Per gestire il parametro, crea una rappresentazione corretta come stringa, ad esempio mm/yyyy. Utilizza la rappresentazione di stringa per impostare la proprietà text della vista.
  5. Implementa una funzionalità che mostri un selettore quando l'utente vuole modificare la data nel sottotipo personalizzato di EditText. La vista aggiorna la proprietà text con una rappresentazione stringa del valore selezionato dall'utente nel selettore.

Per un esempio di una sottoclasse di EditText che gestisce i valori AUTOFILL_TYPE_DATE, consulta l'esempio di Autofill Framework in Java o Kotlin.

Per scoprire di più su come dimostrare il supporto della compilazione automatica per le visualizzazioni personalizzate, consulta Framework di compilazione automatica.