Control de selector en Xamarin.iOS

Un UIPickerView permite elegir un valor de una lista desplazando componentes individuales de una interfaz similar a una rueda.

Los selectores se usan frecuentemente para seleccionar una fecha y una hora; Apple proporciona la clase UIDatePicker para este fin.

El artículo describe cómo implementar y usar los controles UIPickerView y UIDatePicker.

UIPickerView

Implementación de un selector

Implemente un selector mediante la creación de instancias de un nuevo 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
    )
);

Selectores y guiones gráficos

Para crear un selector en el Diseñador de iOS, arrastre una Vista de selector del Cuadro de herramientas a la superficie de diseño.

Trabajar con un control de selector

Un selector usa un modelo para interactuar con los datos:

public override void ViewDidLoad()
{
    base.ViewDidLoad();
    var pickerModel = new PeopleModel(personLabel);
    personPicker.Model = pickerModel;
}

La clase base UIPickerViewModel implementa dos interfaces, IUIPickerDataSource y IUIPickerViewDelegate, que declaran varios métodos que especifican los datos de un selector y cómo controla la interacción:

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 selector puede tener varias columnas o componentes. Los componentes crean particiones de un selector en varias secciones, lo que permite una selección de datos más sencilla y específica:

Para especificar el número de componentes de un selector, use el Método GetComponentCount.

Personalización de la apariencia de un selector

Para personalizar la apariencia de un selector, use la clase UIPickerView.UIPickerViewAppearance o invalide los métodos GetView y GetRowHeight en el UIPickerViewModel.

UIDatePicker

Implementación de un selector de fechas

Implemente un selector de fechas mediante la creación de instancias de 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
     )
);

Selectores de fechas y guiones gráficos

Para crear un selector de fechas en el Diseñador de iOS, arrastre un Selector de fecha del Cuadro de herramientas a la superficie de diseño.

Propiedades del selector de fecha

Fecha mínima y máxima

MinimumDate y MaximumDate limitan el rango de fechas disponibles en el selector de fecha. Por ejemplo, el siguiente código restringe un selector de fecha a los sesenta años anteriores al momento presente:

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;

DatePicker.MinimumDate = (NSDate)DateTime.Today.AddDays (-7);
DatePicker.MaximumDate = (NSDate)DateTime.Today.AddDays (7);

Intervalo de minutos

La propiedad MinuteInterval establece el intervalo en el que el selector mostrará minutos:

datePickerView.MinuteInterval = 10;

Modo

Los selectores de fechas admiten cuatro modos, que se describen a continuación:

UIDatePickerMode.Time

UIDatePickerMode.Time muestra la hora con un selector de horas y minutos y una designación opcional a. m. o p. m.:

datePickerView.Mode = UIDatePickerMode.Time;

UIDatePickerMode.Date

UIDatePickerMode.Date muestra la fecha con un selector de mes, día y año:

datePickerView.Mode = UIDatePickerMode.Date;

El orden de los selectores depende de la configuración regional del selector de fecha, que de forma predeterminada usa la configuración regional del sistema. La imagen anterior muestra el diseño de los selectores en la configuración regional en_US, pero lo siguiente cambia el orden a Día | Mes | Año:

datePickerView.Locale = NSLocale.FromLocaleIdentifier("en_GB");

UIDatePickerMode.DateAndTime

UIDatePickerMode.DateAndTime muestra una vista abreviada de la fecha, la hora en horas y minutos, y una designación opcional a. m. o p. m. (dependiendo de si se usa un reloj de 12 o 24 horas):

datePickerView.Mode = UIDatePickerMode.DateAndTime;

Al igual que con UIDatePickerMode.Date, el orden de los selectores y el uso de un reloj de 12 o 24 horas depende de la configuración regional del selector de fechas.

UIDatePickerMode.CountDownTimer

UIDatePickerMode.CountDownTimer muestra valores de hora y minuto:

datePickerView.Mode = UIDatePickerMode.CountDownTimer;

La propiedad CountDownDuration captura el valor de un selector de fecha en modo UIDatePickerMode.CountDownTimer. Por ejemplo, para agregar el valor de cuenta atrás a la fecha actual:

var currentTime = NSDate.Now;
var countDownTimerTime = datePickerView.CountDownDuration;
var finishCountdown = currentTime.AddSeconds(countDownTimerTime);

dateLabel.Text = "Alarm set for:" + coundownTimeformat.ToString(finishCountdown);

NSDateFormatter

Para dar formato a un NSDate, use un NSDateFormatter.

Para usar un NSDateFormatter, llame a su método ToString. Por ejemplo:

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 propiedad DateFormat (una cadena) de un NSDateFormatter permite una especificación de formato de fecha personalizable:

NSDateFormatter dateFormat = new NSDateFormatter();
dateFormat.DateFormat = "yyyy-MM-dd";

TimeStyle

La propiedad TimeStyle (un NSDateFormatterStyle de un NSDateFormatter especifica el formato de hora en función de los estilos predeterminados:

NSDateFormatter timeFormat = new NSDateFormatter();
timeFormat.TimeStyle = NSDateFormatterStyle.Short;

Varios valores de NSDateFormatterStyle muestran las horas de la siguiente manera:

• NSDateFormatterStyle.Full: 7:46:00 p. m. Hora de verano del Este
• NSDateFormatterStyle.Long: 7:47:00 p. m. EDT
• NSDateFormatterStyle.Medium: 7:47:00 p. m.
• NSDateFormatterSytle.Short: 7:47 p. m.

DateStyle

La propiedad DateStyle (un NSDateFormatterStyle) de un NSDateFormatter especifica el formato de fecha basado en estilos predeterminados:

NSDateFormatter dateTimeformat = new NSDateFormatter();
dateTimeformat.DateStyle = NSDateFormatterStyle.Long;

Varios valores de NSDateFormatterStyle muestran las fechas de la siguiente manera:

• NSDateFormatterStyle.Full: miércoles, 2 de agosto de 2017 a las 7:48 p. m.
• NSDateFormatterStyle.Long: 2 de agosto de 2017 a las 7:49 p. m.
• NSDateFormatterStyle.Medium: 2 de agosto de 2017, 7:49 p. m.
• NSDateFormatterStyle.Short: 8/2/17, 7:50 p. m.