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.
Sélecteurs de dates →

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 de material.io
Figure 1 Sélection d'heures dans un sélecteur d'agenda sur mobile.

L'utilisation de ces sélecteurs permet de s'assurer que vos utilisateurs peuvent choisir une heure ou une date valide, correctement formatée et adaptée aux paramètres régionaux de l'utilisateur.

Exemple de sélecteur modal de date 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 à votre place et vous permet d'afficher les sélecteurs dans différentes configurations de mise en page, par exemple dans une boîte de dialogue de base sur des 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 renvoyez un TimePickerDialog à partir de la méthode onCreateDialog() du fragment.

Étendre le 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.

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

Afficher l'outil de sélection de l'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'il est enfoncé, 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 l'DialogFragment définie dans l'exemple précédent. La méthode show() nécessite une instance de FragmentManager et un nom de balise unique pour le fragment.

Créer un sélecteur de date

La création d'un DatePickerDialog est semblable à la création d'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 renvoyez 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.

Il vous suffit 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'il est enfoncé, 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 l'DialogFragment définie dans l'exemple précédent. La méthode show() nécessite une instance de FragmentManager et un nom de balise unique pour le fragment.

Utiliser des outils de sélection avec la saisie automatique

En 2017, Android a lancé Autofill Framework, qui permet aux utilisateurs d'enregistrer des données pouvant être utilisées pour remplir des formulaires dans différentes applications. Les sélecteurs peuvent être utiles dans les scénarios de saisie automatique en fournissant 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.

Étant donné que 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 qu'une 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. À l'inverse, les services de saisie automatique enregistrent les données en tant que AUTOFILL_TYPE_DATE pour en 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 pouvant 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 qui représente la date en millisecondes. Pour créer l'objet renvoyé, utilisez la méthode forDate() afin de générer un objet AutofillValue.
  4. Implémentez la méthode autofill(). Cette méthode fournit la logique permettant de gérer le paramètre AutofillValue, qui est de type AUTOFILL_TYPE_DATE. Pour gérer le paramètre, créez une représentation 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 de chaîne de la valeur sélectionnée par l'utilisateur 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 prise en charge de la saisie automatique pour vos vues personnalisées, consultez Autofill Framework.