Ajouter des outils de sélection à votre application

Android permet à l'utilisateur de choisir une heure ou une date des boîtes de dialogue prêtes à l'emploi. Ces outils de sélection permettent de contrôler la sélection une partie de l'heure (heure, minute, AM/PM) ou une date (mois, jour, année).

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> Exemple de sélecteur d&#39;heure sur material.io <ph type="x-smartling-placeholder">
</ph> Figure 1 : Sélection d'heures dans un sélecteur d'agenda sur mobile.

Grâce à ces outils de sélection, vos utilisateurs peuvent choisir une heure ou une date est valide, au bon format et ajusté en fonction des paramètres régionaux de l'utilisateur.

Exemple de sélecteur modal de date de Material.io
Figure 2 : Sélecteur de date modal.

Nous vous recommandons d'utiliser DialogFragment à héberger à chaque sélecteur d'heure ou de date. DialogFragment gère du cycle de vie de la boîte de dialogue et d'afficher les sélecteurs dans différentes mises en page telles que dans une boîte de dialogue basique sur des téléphones ou en tant que partie intégrée 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 s'étend DialogFragment et renvoie un TimePickerDialog à partir de de fragment onCreateDialog() .

Étendre le DialogFragment pour un sélecteur d'heure

Pour définir un DialogFragment pour un TimePickerDialog, effectuer les opérations suivantes:

  • Définissez la méthode onCreateDialog() pour renvoyer une instance de TimePickerDialog
  • Implémentez le 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.
    }
}

Consultez la classe TimePickerDialog pour en savoir plus sur la les arguments du constructeur.

Maintenant, vous avez simplement 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 élément DialogFragment comme celui de l'étape précédente, Par exemple, vous pouvez afficher l'outil de sélection de l'heure en créant une instance de DialogFragment et en appelant la méthode show() .

Par exemple, voici un bouton qui, lorsqu'un utilisateur appuie dessus, appelle une méthode pour afficher 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éfini dans l'exemple précédent. La 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 une TimePickerDialog. La différence réside dans la boîte de dialogue que vous créez pour ce fragment.

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

Étendre DialogFragment pour un sélecteur de date

Pour définir un DialogFragment pour un DatePickerDialog, effectuer les opérations suivantes:

  • Définissez la méthode onCreateDialog() pour renvoyer une instance de DatePickerDialog
  • Implémentez le 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.
    }
}

Consultez le DatePickerDialog pour obtenir des informations sur les arguments du constructeur.

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 DialogFragment et appel de show().

Par exemple, voici un bouton qui, lorsqu'un utilisateur appuie dessus, appelle une méthode pour afficher 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éfini dans l'exemple précédent. La La méthode show() nécessite une instance de FragmentManager. et un nom de tag unique pour le fragment.

Utiliser les sélecteurs avec la saisie automatique

En 2017, Android a lancé Autofill Framework, qui permet les utilisateurs enregistrent des données qui peuvent être utilisées pour remplir des formulaires dans différentes applications. Outils de sélection peut être utile dans les scénarios de saisie automatique en fournissant une UI qui permet aux utilisateurs de modifier le d'un champ qui stocke des données de date ou d'heure. Par exemple, pour une carte de crédit, un sélecteur de date permet aux utilisateurs de saisir ou de modifier la date d'expiration carte de crédit.

Les sélecteurs étant des boîtes de dialogue, ils ne sont pas affichés dans une activité avec dans d'autres domaines. Pour afficher les données du sélecteur lorsque celui-ci n'est pas visible, vous pouvez : utiliser une autre vue, EditText, qui peut afficher la valeur lorsque le sélecteur n'est pas visible.

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

Procédez comme suit pour créer une sous-classe de EditText qui peut gérer des valeurs de type AUTOFILL_TYPE_DATE:

  1. Créez une classe qui hérite de EditText.
  2. Implémentez le getAutofillType() , qui renvoie AUTOFILL_TYPE_DATE.
  3. Implémentez le getAutofillValue() , qui renvoie une AutofillValue qui représente la date en millisecondes. Pour créer le retour , utilisez l'objet forDate() pour générer un objet AutofillValue.
  4. Implémentez le autofill() . Cette méthode fournit la logique pour gérer Paramètre AutofillValue, qui est de type AUTOFILL_TYPE_DATE Pour gérer ce paramètre, créez représentation sous forme de chaîne de celui-ci, par exemple mm/yyyy. Utiliser la 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 effectuer des modifications la date dans la sous-classe personnalisée de EditText. La vue est mise à jour Propriété text avec une représentation de la valeur sous forme de chaîne que l'utilisateur sélectionne dans le sélecteur.

Pour un exemple de sous-classe de EditText qui gère AUTOFILL_TYPE_DATE, consultez l'exemple Autofill Framework dans Java ou Kotlin

Pour savoir comment prouver que la saisie automatique est compatible avec vos affichages personnalisés, consultez Autofill Framework