Ajouter des outils de sélection à votre application

Essayer Compose
Jetpack Compose est le kit d'outils d'UI recommandé pour Android. Découvrez comment ajouter des composants dans Compose.
Outils de sélection de la date →

Android fournit des commandes permettant à l'utilisateur de choisir une heure ou une date sous forme de boîtes de dialogue prêtes à l'emploi. Ces sélecteurs permettent de sélectionner chaque partie de l'heure (heure, minute, AM/PM) ou de la date (mois, jour, année).

Exemple de sélecteur d'heure sur material.io
Figure 1. Sélection de l'heure dans un sélecteur d'agenda mobile.

Ces sélecteurs permettent de s'assurer que vos utilisateurs peuvent choisir une heure ou une date valides, correctement mises en forme et adaptées aux paramètres régionaux de l'utilisateur.

Exemple de sélecteur de date modale sur material.io
Figure 2 : Sélecteur de date modal.

Nous vous recommandons d'utiliser DialogFragment pour héberger chaque sélecteur de date ou d'heure. DialogFragment gère le cycle de vie de la boîte de dialogue pour vous et vous permet d'afficher des sélecteurs dans différentes configurations de mise en page, par exemple dans une boîte de dialogue de base sur les téléphones ou en tant que partie intégrée de la mise en page sur les grands écrans.

Créer un sélecteur d'heure

Pour afficher un TimePickerDialog à l'aide de DialogFragment, définissez une classe de fragment qui étend DialogFragment et renvoie un TimePickerDialog à partir de la méthode onCreateDialog() du fragment.

Étendre DialogFragment pour un sélecteur d'heure

Pour définir un DialogFragment pour un TimePickerDialog, procédez comme suit :

  • Définissez la méthode onCreateDialog() pour renvoyer une instance de TimePickerDialog.
  • Implémentez l'interface TimePickerDialog.OnTimeSetListener pour recevoir un rappel lorsque l'utilisateur définit l'heure.

Exemple :

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

Pour en savoir plus sur les arguments du constructeur, consultez la classe TimePickerDialog.

Il ne vous reste plus qu'à ajouter un événement qui ajoute une instance de ce fragment à votre activité.

Afficher le sélecteur d'heure

Après avoir défini un DialogFragment comme celui de l'exemple précédent, vous pouvez afficher le sélecteur d'heure en créant une instance de DialogFragment et en appelant la méthode show().

Par exemple, voici un bouton qui, lorsqu'on appuie dessus, appelle une méthode pour afficher la boîte de dialogue :

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

Lorsque l'utilisateur appuie sur ce bouton, le système appelle la méthode suivante :

Kotlin

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

Java

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

Cette méthode appelle show() sur une nouvelle instance de DialogFragment définie dans l'exemple précédent. La méthode show() nécessite une instance de FragmentManager et un nom de tag unique pour le fragment.

Créer un sélecteur de date

Créer un DatePickerDialog revient à créer un TimePickerDialog. La différence réside dans la boîte de dialogue que vous créez pour le fragment.

Pour afficher un DatePickerDialog à l'aide de DialogFragment, définissez une classe de fragment qui étend DialogFragment et renvoie un DatePickerDialog à partir de la méthode onCreateDialog() du fragment.

Étendre DialogFragment pour un sélecteur de date

Pour définir un DialogFragment pour un DatePickerDialog, procédez comme suit :

  • Définissez la méthode onCreateDialog() pour renvoyer une instance de DatePickerDialog.
  • Implémentez l'interface DatePickerDialog.OnDateSetListener pour recevoir un rappel lorsque l'utilisateur définit la date.

Exemple :

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

Pour en savoir plus sur les arguments du constructeur, consultez la classe DatePickerDialog.

Vous avez simplement besoin d'un événement qui ajoute une instance de ce fragment à votre activité.

Afficher le sélecteur de date

Après avoir défini un DialogFragment comme dans l'exemple précédent, vous pouvez afficher le sélecteur de date en créant une instance de DialogFragment et en appelant show().

Par exemple, voici un bouton qui, lorsqu'on appuie dessus, appelle une méthode pour afficher la boîte de dialogue :

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

Lorsque l'utilisateur appuie sur ce bouton, le système appelle la méthode suivante :

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");
}

Cette méthode appelle show() sur une nouvelle instance de DialogFragment définie dans l'exemple précédent. La méthode show() nécessite une instance de FragmentManager et un nom de tag unique pour le fragment.

Utiliser des sélecteurs avec la saisie automatique

En 2017, Android a introduit le framework Autofill, qui permet aux utilisateurs d'enregistrer des données pouvant être utilisées pour remplir des formulaires dans différentes applications. Les outils de sélection peuvent être utiles dans les scénarios de saisie automatique, car ils fournissent une UI qui permet aux utilisateurs de modifier la valeur d'un champ qui stocke des données de date ou d'heure. Par exemple, dans un formulaire de carte de crédit, un sélecteur de date permet aux utilisateurs de saisir ou de modifier la date d'expiration de leur carte de crédit.

Comme les sélecteurs sont des boîtes de dialogue, ils ne s'affichent pas dans une activité avec d'autres champs. Pour afficher les données du sélecteur lorsqu'il n'est pas visible, vous pouvez utiliser une autre vue, telle que EditText, qui peut afficher la valeur lorsque le sélecteur n'est pas visible.

Un objet EditText attend de façon native des données de saisie automatique de type AUTOFILL_TYPE_TEXT. En revanche, les services de saisie automatique enregistrent les données en tant que AUTOFILL_TYPE_DATE pour créer une représentation appropriée. Pour résoudre l'incohérence des types, nous vous recommandons de créer une vue personnalisée qui hérite de EditText et implémente les méthodes requises pour gérer correctement les valeurs de type AUTOFILL_TYPE_DATE.

Pour créer une sous-classe de EditText capable de gérer les valeurs de type AUTOFILL_TYPE_DATE, procédez comme suit :

  1. Créez une classe qui hérite de EditText.
  2. Implémentez la méthode getAutofillType(), qui renvoie AUTOFILL_TYPE_DATE.
  3. Implémentez la méthode getAutofillValue(), qui renvoie un objet AutofillValue représentant la date en millisecondes. Pour créer l'objet de retour, utilisez la méthode forDate() pour générer un objet AutofillValue.
  4. Implémentez la méthode autofill(). Cette méthode fournit la logique pour gérer le paramètre AutofillValue, qui est de type AUTOFILL_TYPE_DATE. Pour gérer le paramètre, créez une représentation sous forme de chaîne appropriée, telle que mm/yyyy. Utilisez la représentation de chaîne pour définir la propriété text de votre vue.
  5. Implémentez une fonctionnalité qui affiche un sélecteur lorsque l'utilisateur souhaite modifier la date dans la sous-classe personnalisée de EditText. La vue met à jour la propriété text avec une représentation sous forme de chaîne de la valeur que l'utilisateur sélectionne dans le sélecteur.

Pour obtenir un exemple de sous-classe de EditText qui gère les valeurs AUTOFILL_TYPE_DATE, consultez l'exemple Autofill Framework en Java ou Kotlin.

Pour en savoir plus sur la preuve de la prise en charge de la saisie automatique pour vos vues personnalisées, consultez Autofill Framework.