Partage via

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.

Faire glisser un affichage sélecteur 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 :

Sélecteur avec deux composants

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.

Faire glisser un sélecteur de dates 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.Time

UIDatePickerMode.Date

UIDatePickerMode.Date affiche la date avec un sélecteur de mois, de jour et d’année :

datePickerView.Mode = UIDatePickerMode.Date;

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");

Jour | Mois | Année

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;

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;

« 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 NSDateFormatterStyle NSDateFormatter 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’Est
  • NSDateFormatterStyle.Long: 17 :47 :00 PM EDT
  • NSDateFormatterStyle.Medium: 17 :47 :00 PM
  • NSDateFormatterSytle.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 à 17h48
  • NSDateFormatterStyle.Long: 2 août 2017 à 17h49
  • NSDateFormatterStyle.Medium: 2 août 2017, 17h49
  • NSDateFormatterStyle.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.

  • Last updated on