Contrôle sélecteur dans Xamarin.iOS
Un UIPickerView permet de choisir une valeur dans une liste en faisant défiler des composants individuels d’une interface de type roue.
Les sélecteurs sont fréquemment utilisés pour sélectionner une date et une heure ; Apple fournit les UIDatePicker classe à cet effet.
L’article explique comment implémenter et utiliser les contrôles et UIDatePicker les UIPickerView contrôles.
UIPickerView
Implémentation d’un sélecteur
Implémentez un sélecteur en instanciant un nouveau UIPickerView:
UIPickerView pickerView = new UIPickerView(
new CGRect(
UIScreen.MainScreen.Bounds.X - UIScreen.MainScreen.Bounds.Width,
UIScreen.MainScreen.Bounds.Height - 230,
UIScreen.MainScreen.Bounds.Width,
180
)
);
Sélecteurs et planches de montage séquentiel
Pour créer un sélecteur dans le Concepteur iOS, faites glisser un mode Sélecteur de la boîte à outils vers l’aire de conception.
Utilisation d’un contrôle de sélecteur
Un sélecteur utilise un modèle pour interagir avec les données :
public override void ViewDidLoad()
{
base.ViewDidLoad();
var pickerModel = new PeopleModel(personLabel);
personPicker.Model = pickerModel;
}
La UIPickerViewModel classe de base implémente deux interfaces, IUIPickerDataSource et IUIPickerViewDelegate, qui déclarent différentes méthodes qui spécifient les données d’un sélecteur et comment elles gèrent l’interaction :
public class PeopleModel : UIPickerViewModel
{
public string[] names = new string[] {
"Amy Burns",
"Kevin Mullins",
"Craig Dunn",
"Joel Martinez",
"Charles Petzold",
"David Britch",
"Mark McLemore",
"Tom Opegenorth",
"Joseph Hill",
"Miguel De Icaza"
};
private UILabel personLabel;
public PeopleModel(UILabel personLabel)
{
this.personLabel = personLabel;
}
public override nint GetComponentCount(UIPickerView pickerView)
{
return 2;
}
public override nint GetRowsInComponent(UIPickerView pickerView, nint component)
{
return names.Length;
}
public override string GetTitle(UIPickerView pickerView, nint row, nint component)
{
if (component == 0)
return names[row];
else
return row.ToString();
}
public override void Selected(UIPickerView pickerView, nint row, nint component)
{
personLabel.Text = $"This person is: {names[pickerView.SelectedRowInComponent(0)]},\n they are number {pickerView.SelectedRowInComponent(1)}";
}
public override nfloat GetComponentWidth(UIPickerView picker, nint component)
{
if (component == 0)
return 240f;
else
return 40f;
}
public override nfloat GetRowHeight(UIPickerView picker, nint component)
{
return 40f;
}
Un sélecteur peut avoir plusieurs colonnes ou composants. Les composants partitionnent un sélecteur en plusieurs sections, ce qui permet une sélection de données plus simple et plus spécifique :
Pour spécifier le nombre de composants d’un sélecteur, utilisez le méthode GetComponentCount.
Personnalisation de l’apparence d’un sélecteur
Pour personnaliser l’apparence d’un sélecteur, utilisez le UIPickerView.UIPickerViewAppearance classe ou remplacement des GetView méthodes GetRowHeight et des méthodes dans le UIPickerViewModel.
Uidatepicker
Implémentation d’un sélecteur de dates
Implémentez un sélecteur de dates en instanciant un UIDatePicker:
UIPickerView pickerView = new UIPickerView(
new CGRect(
UIScreen.MainScreen.Bounds.X - UIScreen.MainScreen.Bounds.Width,
UIScreen.MainScreen.Bounds.Height - 230,
UIScreen.MainScreen.Bounds.Width,
180
)
);
Sélecteurs de dates et storyboards
Pour créer un sélecteur de dates dans le Concepteur iOS, faites glisser un sélecteur de dates de la boîte à outils vers l’aire de conception.
Propriétés du sélecteur de dates
Date minimale et maximale
MinimumDate et MaximumDate limiter la plage de dates disponibles dans le sélecteur de dates. Par exemple, le code suivant limite un sélecteur de dates aux soixante années précédant le moment présent :
var calendar = new NSCalendar(NSCalendarType.Gregorian);
var currentDate = NSDate.Now;
var components = new NSDateComponents();
components.Year = -60;
NSDate minDate = calendar.DateByAddingComponents(components, currentDate, NSCalendarOptions.None);
datePickerView.MinimumDate = minDate;
datePickerView.MaximumDate = currentDate;
Conseil
Il est possible de convertir explicitement un DateTime objet en un NSDate:
DatePicker.MinimumDate = (NSDate)DateTime.Today.AddDays (-7);
DatePicker.MaximumDate = (NSDate)DateTime.Today.AddDays (7);
Intervalle de minute
La MinuteInterval propriété définit l’intervalle auquel le sélecteur affiche les minutes :
datePickerView.MinuteInterval = 10;
Mode
Les sélecteurs de dates prennent en charge quatre modes, décrits ci-dessous :
UIDatePickerMode.Time
UIDatePickerMode.Time affiche l’heure avec un sélecteur d’heure et de minute et une désignation AM ou PM facultative :
datePickerView.Mode = UIDatePickerMode.Time;
UIDatePickerMode.Date
UIDatePickerMode.Date affiche la date avec un sélecteur de mois, de jour et d’année :
datePickerView.Mode = UIDatePickerMode.Date;
L’ordre des sélecteurs dépend des paramètres régionaux du sélecteur de dates, qui utilise par défaut les paramètres régionaux système. L’image ci-dessus montre la disposition des sélecteurs dans les en_US paramètres régionaux, mais les modifications suivantes changent l’ordre de jour | Mois | Année:
datePickerView.Locale = NSLocale.FromLocaleIdentifier("en_GB");
UIDatePickerMode.DateAndTime
UIDatePickerMode.DateAndTime affiche une vue raccourcie de la date, l’heure en heures et en minutes, ainsi qu’une désignation AM ou PM facultative (selon qu’une horloge de 12 ou 24 heures est utilisée) :
datePickerView.Mode = UIDatePickerMode.DateAndTime;
Comme avec UIDatePickerMode.Date, l’ordre des sélecteurs et l’utilisation d’une horloge de 12 ou 24 heures dépend des paramètres régionaux du sélecteur de dates.
Conseil
Utilisez la Date propriété pour capturer la valeur d’un sélecteur de dates en mode UIDatePickerMode.Time, UIDatePickerMode.Dateou UIDatePickerMode.DateAndTime. Cette valeur est stockée en tant que NSDate.
UIDatePickerMode.CountDownTimer
UIDatePickerMode.CountDownTimer affiche les valeurs d’heure et de minute :
datePickerView.Mode = UIDatePickerMode.CountDownTimer;
La CountDownDuration propriété capture la valeur d’un sélecteur de dates en UIDatePickerMode.CountDownTimer mode. Par exemple, pour ajouter la valeur de compte à rebours à la date actuelle :
var currentTime = NSDate.Now;
var countDownTimerTime = datePickerView.CountDownDuration;
var finishCountdown = currentTime.AddSeconds(countDownTimerTime);
dateLabel.Text = "Alarm set for:" + coundownTimeformat.ToString(finishCountdown);
NSDateFormatter
Pour mettre en forme un NSDate, utilisez un NSDateFormatter.
Pour utiliser un NSDateFormatter, appelez sa ToString méthode. Par exemple :
var date = NSDate.Now;
var formatter = new NSDateFormatter();
formatter.DateStyle = NSDateFormatterStyle.Full;
formatter.TimeStyle = NSDateFormatterStyle.Full;
var formattedDate = formatter.ToString(d);
// Tuesday, August 14, 2018 at 11:20:42 PM Mountain Daylight Time
DateFormat
La DateFormat propriété (une chaîne) d’une NSDateFormatter spécification de format de date personnalisable est autorisée :
NSDateFormatter dateFormat = new NSDateFormatter();
dateFormat.DateFormat = "yyyy-MM-dd";
TimeStyle
Propriété TimeStyle (d’une NSDateFormatterStyleNSDateFormatter mise en forme temporelle spécifiée en fonction des styles prédéterminés :
NSDateFormatter timeFormat = new NSDateFormatter();
timeFormat.TimeStyle = NSDateFormatterStyle.Short;
Différentes NSDateFormatterStyle valeurs affichent des heures comme suit :
NSDateFormatterStyle.Full: 17 :46 :00 Heure d’été de l’EstNSDateFormatterStyle.Long: 17 :47 :00 PM EDTNSDateFormatterStyle.Medium: 17 :47 :00 PMNSDateFormatterSytle.Short: 17h47
DateStyle
Propriété DateStyle (a NSDateFormatterStyle) d’une NSDateFormatter mise en forme de date spécifiée en fonction des styles prédéterminés :
NSDateFormatter dateTimeformat = new NSDateFormatter();
dateTimeformat.DateStyle = NSDateFormatterStyle.Long;
Différentes NSDateFormatterStyle valeurs affichent les dates comme suit :
NSDateFormatterStyle.Full: mercredi 2 août 2017 à 17h48NSDateFormatterStyle.Long: 2 août 2017 à 17h49NSDateFormatterStyle.Medium: 2 août 2017, 17h49NSDateFormatterStyle.Short: 2/8/17, 17h50
Remarque
DateFormat et DateStyle/TimeStyle fournissent différentes façons de spécifier la mise en forme de date et d’heure. Les propriétés définies les plus récemment déterminent la sortie du formateur de date.