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
(TimePickerFragment
dé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 :
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.
Déclenchement d’un événement : il
DialogFragment
peut définir un événement qui sera déclenché lorsqu’ilOnTimeSet
est appelé.Utilisation d’un
Action
: peutDialogFragment
appeler unAction<DateTime>
pour afficher l’heure dans l’activité. L’activité fournit laAction<DateTime
valeur lors de l’instanciation duDialogFragment
.
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 DialogFragment
fichier .
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 deDialogFragment
. Il implémente également l’interfaceTimePickerDialog.IOnTimeSetListener
(autrement dit, elle fournit la méthode requiseOnTimeSet
) :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’actiontimeSelectedHandler
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 nouveauTimePickerFragment
. Cette méthode prend unAction<DateTime>
gestionnaire qui est appelé lorsque l’utilisateur clique sur le bouton OK dans leTimePickerDialog
: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 objetTimePickerDialog
et l’initialise avec l’activité, l’objet de rappel (qui est l’instance actuelle duTimePickerFragment
), 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, laOnTimeSet
méthode est appelée.OnTimeSet
crée unDateTime
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’objettimeSelectedHandler
inscrit auprès de l’objet au moment de laTimePickerFragment
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 NewInstance
DialogFragment
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 TextView
est 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.