Sélecteur de temps Android

Pour permettre à l’utilisateur de sélectionner une heure, vous pouvez utiliser TimePicker. Les applications Android utilisent TimePicker généralement avec TimePickerDialog pour sélectionner une valeur de temps. Cela permet de garantir une interface cohérente entre les appareils et les applications. TimePicker permet aux utilisateurs de sélectionner l’heure de la journée en mode AM/PM de 24 heures ou 12 heures. TimePickerDialog est une classe d’assistance qui encapsule le TimePicker contenu d’un dialogue.

Vue d’ensemble

Les applications Android modernes affichent l’application TimePickerDialog DialogFragment. Cela permet à une application d’afficher la TimePicker boîte de dialogue contextuelle ou de l’incorporer dans une activité. En outre, le DialogFragment cycle de vie et l’affichage de la boîte de dialogue, ce qui réduit la quantité de code qui doit être implémentée.

Ce guide montre comment utiliser le TimePickerDialog, encapsulé dans un DialogFragment. L’exemple d’application affiche la TimePickerDialog boîte de dialogue modale lorsque l’utilisateur clique sur un bouton sur une activité. Lorsque l’heure est définie par l’utilisateur, la boîte de dialogue se ferme et un gestionnaire met à jour un TextView gestionnaire sur l’écran Activité avec l’heure sélectionnée.

Spécifications

L’exemple d’application pour ce guide cible Android 4.1 (niveau d’API 16) ou version ultérieure, mais peut être utilisé avec Android 3.0 (niveau d’API 11 ou supérieur). Il est possible de prendre en charge les versions antérieures d’Android avec l’ajout de la bibliothèque de support Android v4 au projet et certaines modifications de code.

Utilisation de TimePicker

Cet exemple étend DialogFragment; l’implémentation de sous-classe des DialogFragment hôtes (appelés TimePickerFragment ci-dessous) et affiche un TimePickerDialog. Lorsque l’exemple d’application est lancé pour la première fois, il affiche un bouton PICK TIME au-dessus d’un TextView élément qui sera utilisé pour afficher l’heure sélectionnée :

Lorsque vous cliquez sur le bouton PICK TIME , l’exemple d’application lance la TimePickerDialog capture d’écran suivante :

Dans le TimePickerDialog, en sélectionnant une heure et en cliquant sur le bouton OK , l’appel TimePickerDialog de la méthode IOnTimeSetListener.OnTimeSet. Cette interface est implémentée par l’hébergement DialogFragment (TimePickerFragmentdécrit ci-dessous). Si vous cliquez sur le bouton Annuler , le fragment et la boîte de dialogue sont ignorés.

DialogFragment retourne l’heure sélectionnée à l’activité d’hébergement de l’une des trois manières suivantes :

1. Appel d’une méthode ou définition d’une propriété : l’activité peut fournir une propriété ou une méthode spécifiquement pour définir cette valeur.

2. Déclenchement d’un événement : il DialogFragment peut définir un événement qui sera déclenché lorsqu’il OnTimeSet est appelé.

3. Utilisation d’un Action : peut DialogFragment appeler un Action<DateTime> pour afficher l’heure dans l’activité. L’activité fournit la Action<DateTime valeur lors de l’instanciation du DialogFragment.

Cet exemple utilise la troisième technique, qui exige que l’activité fournisse un Action<DateTime> gestionnaire au DialogFragment.

Démarrer un projet d’application

Démarrez un nouveau projet Android appelé TimePickerDemo (si vous n’êtes pas familiarisé avec la création de projets Xamarin.Android, consultez Hello, Android pour apprendre à créer un projet).

Modifiez resources/layout/Main.axml et remplacez son contenu par le code XML suivant :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:padding="16dp">
    <Button
        android:id="@+id/select_button"
        android:paddingLeft="24dp"
        android:paddingRight="24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="PICK TIME"
        android:textSize="20dp" />
    <TextView
        android:id="@+id/time_display"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:paddingTop="22dp"
        android:text="Picked time will be displayed here"
        android:textSize="24dp" />
</LinearLayout>

Il s’agit d’un LinearLayout de base avec un TextView qui affiche l’heure et un bouton qui ouvre le TimePickerDialog. Notez que cette disposition utilise des chaînes et des dimensions codées en dur pour simplifier et faciliter la compréhension de l’application , une application de production utilise normalement des ressources pour ces valeurs (comme indiqué dans l’exemple de code DatePicker ).

Modifiez MainActivity.cs et remplacez son contenu par le code suivant :

using Android.App;
using Android.Widget;
using Android.OS;
using System;
using Android.Util;
using Android.Text.Format;

namespace TimePickerDemo
{
    [Activity(Label = "TimePickerDemo", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        TextView timeDisplay;
        Button timeSelectButton;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);
            timeDisplay = FindViewById<TextView>(Resource.Id.time_display);
            timeSelectButton = FindViewById<Button>(Resource.Id.select_button);
        }
    }
}

Lorsque vous générez et exécutez cet exemple, vous devez voir un écran initial semblable à la capture d’écran suivante :

Cliquer sur le bouton PICK TIME ne fait rien, car l’application DialogFragment n’a pas encore été implémentée pour afficher le TimePicker. L’étape suivante consiste à créer ce DialogFragmentfichier .

Extension de DialogFragment

Pour étendre DialogFragment l’utilisation avec TimePicker, il est nécessaire de créer une sous-classe dérivée et DialogFragment implémente TimePickerDialog.IOnTimeSetListener. Ajoutez la classe suivante à MainActivity.cs :

public class TimePickerFragment : DialogFragment, TimePickerDialog.IOnTimeSetListener
{
    public static readonly string TAG = "MyTimePickerFragment";
    Action<DateTime> timeSelectedHandler = delegate { };

    public static TimePickerFragment NewInstance(Action<DateTime> onTimeSelected)
    {
        TimePickerFragment frag = new TimePickerFragment();
        frag.timeSelectedHandler = onTimeSelected;
        return frag;
    }

    public override Dialog OnCreateDialog (Bundle savedInstanceState)
    {
        DateTime currentTime = DateTime.Now;
        bool is24HourFormat = DateFormat.Is24HourFormat(Activity);
        TimePickerDialog dialog = new TimePickerDialog
            (Activity, this, currentTime.Hour, currentTime.Minute, is24HourFormat);
        return dialog;
    }

    public void OnTimeSet(TimePicker view, int hourOfDay, int minute)
    {
        DateTime currentTime = DateTime.Now;
        DateTime selectedTime = new DateTime(currentTime.Year, currentTime.Month, currentTime.Day, hourOfDay, minute, 0);
        Log.Debug(TAG, selectedTime.ToLongTimeString());
        timeSelectedHandler (selectedTime);
    }
}

Cette TimePickerFragment classe est divisée en petits morceaux et expliquée dans la section suivante.

Implémentation dialogFragment

TimePickerFragment implémente plusieurs méthodes : une méthode de fabrique, une méthode d’instanciation Dialog et la OnTimeSet méthode de gestionnaire requise par TimePickerDialog.IOnTimeSetListener.

• TimePickerFragment est une sous-classe de DialogFragment. Il implémente également l’interface TimePickerDialog.IOnTimeSetListener (autrement dit, elle fournit la méthode requise OnTimeSet ) :

  public class TimePickerFragment : DialogFragment, TimePickerDialog.IOnTimeSetListener
  

• TAG est initialisé à des fins de journalisation (MyTimePickerFragment peut être modifié en fonction de la chaîne que vous souhaitez utiliser). L’action timeSelectedHandler est initialisée sur un délégué vide pour empêcher les exceptions de référence Null :

  public static readonly string TAG = "MyTimePickerFragment";
  Action<DateTime> timeSelectedHandler = delegate { };
  

• La NewInstance méthode de fabrique est appelée pour instancier un nouveau TimePickerFragment. Cette méthode prend un Action<DateTime> gestionnaire qui est appelé lorsque l’utilisateur clique sur le bouton OK dans le TimePickerDialog:

  public static TimePickerFragment NewInstance(Action<DateTime> onTimeSelected)
  {
      TimePickerFragment frag = new TimePickerFragment();
      frag.timeSelectedHandler = onTimeSelected;
      return frag;
  }
  

• Lorsque le fragment doit être affiché, Android appelle la DialogFragment méthode OnCreateDialog. Cette méthode crée un objet TimePickerDialog et l’initialise avec l’activité, l’objet de rappel (qui est l’instance actuelle du TimePickerFragment), et l’heure actuelle :

  public override Dialog OnCreateDialog (Bundle savedInstanceState)
  {
      DateTime currentTime = DateTime.Now;
      bool is24HourFormat = DateFormat.Is24HourFormat(Activity);
      TimePickerDialog dialog = new TimePickerDialog
          (Activity, this, currentTime.Hour, currentTime.Minute, is24HourFormat);
      return dialog;
  }
  

• Lorsque l’utilisateur modifie le paramètre d’heure dans la TimePicker boîte de dialogue, la OnTimeSet méthode est appelée. OnTimeSet crée un DateTime objet à l’aide de la date actuelle et fusionne l’heure (heure et minute) sélectionnée par l’utilisateur :

  public void OnTimeSet(TimePicker view, int hourOfDay, int minute)
  {
      DateTime currentTime = DateTime.Now;
      DateTime selectedTime = new DateTime(currentTime.Year, currentTime.Month, currentTime.Day, hourOfDay, minute, 0);
  

• Cet DateTime objet est passé à l’objet timeSelectedHandler inscrit auprès de l’objet au moment de la TimePickerFragment création. OnTimeSet appelle ce gestionnaire pour mettre à jour l’affichage de l’heure de l’activité vers l’heure sélectionnée (ce gestionnaire est implémenté dans la section suivante) :

  timeSelectedHandler (selectedTime);
  

Affichage du TimePickerFragment

Maintenant que le fichier DialogFragment a été implémenté, il est temps d’instancier la NewInstanceDialogFragment méthode d’usine et de l’afficher en appelant DialogFragment.Show :

Ajoutez la méthode suivante à MainActivity :

void TimeSelectOnClick (object sender, EventArgs eventArgs)
{
    TimePickerFragment frag = TimePickerFragment.NewInstance (
        delegate (DateTime time)
        {
            timeDisplay.Text = time.ToShortTimeString();
        });

    frag.Show(FragmentManager, TimePickerFragment.TAG);
}

Après TimeSelectOnClick avoir instancié un TimePickerFragment, il crée et passe un délégué pour une méthode anonyme qui met à jour l’affichage de l’heure de l’activité avec la valeur de temps passée. Enfin, il lance le TimePicker fragment de boîte de dialogue (via DialogFragment.Show) pour afficher l’utilisateur TimePicker .

À la fin de la OnCreate méthode, ajoutez la ligne suivante pour attacher le gestionnaire d’événements au bouton PICK TIME qui lance la boîte de dialogue :

timeSelectButton.Click += TimeSelectOnClick;

Lorsque le bouton PICK TIME est cliqué, TimeSelectOnClick il est appelé pour afficher le TimePicker fragment de boîte de dialogue à l’utilisateur.

Essayez !

Générez et exécutez l'application. Lorsque vous cliquez sur le bouton PICK TIME , celui-ci TimePickerDialog s’affiche au format d’heure par défaut pour l’activité (dans ce cas, mode AM/PM de 12 heures) :

Lorsque vous cliquez sur OK dans la TimePicker boîte de dialogue, le gestionnaire met à jour l’activité avec l’heure TextView choisie, puis se ferme :

Ensuite, ajoutez la ligne de code suivante à OnCreateDialog immédiatement après is24HourFormat la déclaration et l’initialisation :

is24HourFormat = true;

Cette modification force l’indicateur passé au constructeur de true sorte que le TimePickerDialog mode 24 heures soit utilisé au lieu du format d’heure de l’activité d’hébergement. Lorsque vous générez et réexécutez l’application, cliquez sur le bouton PICK TIME , la TimePicker boîte de dialogue s’affiche désormais au format 24 heures :

Étant donné que le gestionnaire appelle DateTime.ToShortTimeString pour imprimer l’heure de l’activité, l’heure TextViewest toujours imprimée au format AM/PM par défaut.

Résumé

Cet article a expliqué comment afficher un TimePicker widget en tant que boîte de dialogue modale contextuelle à partir d’une activité Android. Il a fourni un exemple DialogFragment d’implémentation et a abordé l’interface IOnTimeSetListener . Cet exemple montre également comment DialogFragment interagir avec l’activité hôte pour afficher l’heure sélectionnée.

Liens associés

• DialogFragment
• TimePicker
• TimePickerDialog
• TimePickerDialog.IOnTimeSetListener