Aggiungi selettori alla tua app

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

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

L'utilizzo di questi selettori aiuta a garantire che gli utenti possano scegliere un'ora o una data valida, formattata correttamente e adattata 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 o ora. L'DialogFragment gestisce il ciclo di vita delle finestre di dialogo e ti consente di visualizzare i selettori in diverse configurazioni di layout, ad esempio in una finestra di dialogo di base sui telefoni o come parte incorporata del layout su schermi di grandi dimensioni.

Crea un selettore di ora

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

Extend DialogFragment per un selettore di data e ora

Per definire un DialogFragment per un TimePickerDialog, procedi nel seguente modo:

  • 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 è sufficiente un evento che aggiunga un'istanza di questo frammento all'attività.

Mostra il selettore dell'ora

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

Ad esempio, di seguito è riportato un pulsante che, se toccato, richiama un metodo per visualizzare 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 dell'elemento DialogFragment definita nell'esempio precedente. Il metodo show() richiede un'istanza di FragmentManager e un nome tag univoco per il frammento.

Creare un selettore di date

Creare una DatePickerDialog è come creare una TimePickerDialog. La differenza è la finestra di dialogo che crei per il frammento.

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

Extend DialogFragment per un selettore di date

Per definire un DialogFragment per un DatePickerDialog, procedi nel seguente modo:

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

È sufficiente un evento che aggiunga un'istanza di questo frammento all'attività.

Mostra 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, di seguito è riportato un pulsante che, se toccato, richiama un metodo per visualizzare 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 dell'elemento 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 da utilizzare per compilare i moduli in diverse app. I selettori possono essere utili negli scenari di compilazione automatica, in quanto forniscono un'interfaccia utente che consente agli utenti di modificare il valore di un campo in cui sono memorizzati i dati relativi a data e 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 carta di credito.

Poiché i selettori sono finestre di dialogo, non vengono visualizzati in un'attività insieme ad altri campi. Per mostrare 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 prevede 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 crearne 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 in grado di gestire valori di tipo AUTOFILL_TYPE_DATE:

  1. Crea un corso 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, di tipo AUTOFILL_TYPE_DATE. Per gestire il parametro, crea una rappresentazione stringa adeguata, ad esempio mm/yyyy. Utilizza la rappresentazione stringa per impostare la proprietà text della vista.
  5. Implementa la funzionalità che mostra un selettore quando l'utente vuole modificare la data nella sottoclasse personalizzata di EditText. La vista aggiorna la proprietà text con una rappresentazione stringa del valore selezionato dall'utente nel selettore.

Per un esempio di sottoclasse EditText che gestisce i valori AUTOFILL_TYPE_DATE, vedi l'esempio di framework per la compilazione automatica 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.