Compartir vía

Control de selector en Xamarin.iOS

  • Artículo

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.

Arrastre una vista selector 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:

Selector con dos componentes

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.

Arrastre un selector de fecha 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;

Sugerencia

Es posible convertir explícitamente un DateTime en un NSDate:

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.Time

UIDatePickerMode.Date

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

datePickerView.Mode = UIDatePickerMode.Date;

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

Día | Mes | Año

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;

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.

Sugerencia

Use la propiedad Date para capturar el valor de un selector de fecha en modo UIDatePickerMode.Time, UIDatePickerMode.Date o UIDatePickerMode.DateAndTime. Este valor se almacena como un NSDate.

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.

Nota:

DateFormat y DateStyle/TimeStyle proporcionan diferentes formas de especificar el formato de fecha y hora. Las propiedades establecidas más recientemente determinan la salida del formateador de fecha.