Compartir a través de

Resumen del capítulo 15. La interfaz interactiva

  • Artículo

Nota:

Este libro se publicó en la primavera de 2016 y no se ha actualizado desde entonces. Gran parte del libro sigue siendo útil, pero algunos de los materiales están anticuados y algunos temas ya no son completamente correctos o completos.

En este capítulo se exploran ocho derivados de View que permiten la interacción con el usuario.

Información general

Xamarin.Forms contiene 20 clases de las que se pueden crear instancias que se derivan de View, pero no Layout. Seis de ellas se han tratado en capítulos anteriores:

Las ocho vistas de este capítulo permiten al usuario interactuar con los tipos de datos básicos de .NET:

Tipo de datos Vistas
Double Slider, Stepper
Boolean Switch
String Entry, Editor, SearchBar
DateTime DatePicker, TimePicker

Estas vistas se pueden considerar como representaciones interactivas visuales de los tipos de datos subyacentes. Este concepto se analiza con más profundidad en el siguiente capítulo, Capítulo 16. Enlace de datos.

Las seis vistas restantes se describen en los capítulos siguientes:

Control deslizante y control de incremento

Tanto Slider como Stepper permiten al usuario elegir un valor numérico de un intervalo. Slider es un intervalo continuo mientras que Stepper implica valores discretos.

Aspectos básicos del control deslizante

Slider es una barra horizontal que representa un intervalo de valores desde un mínimo a la izquierda a un máximo a la derecha. Define tres propiedades públicas:

  • Value de tipo double, valor predeterminado de 0
  • Minimum de tipo double, valor predeterminado de 0
  • Maximum de tipo double, valor predeterminado de 1

Las propiedades enlazables que respaldan estas propiedades garantizan que son coherentes:

  • Para las tres propiedades, el método coerceValue especificado para la propiedad enlazable garantiza que Value se encuentra entre Minimum y Maximum.
  • El método validateValue de MinimumProperty devuelve false si Minimum se establece en un valor mayor o igual que Maximum, y similar para MaximumProperty. Al devolver false desde el método validateValue, se genera ArgumentException.

Slider activa el evento ValueChanged con un argumento ValueChangedEventArgs cuando cambia la propiedad Value, ya sea mediante programación o cuando el usuario manipula Slider.

En el ejemplo SliderDemo se muestra el uso simple de Slider.

Dificultades habituales

Tanto en código como en XAML, las propiedades Minimum y Maximum se establecen en el orden especificado. Asegúrese de inicializar estas propiedades para que Maximum sea siempre mayor que Minimum. De lo contrario, se producirá una excepción.

La inicialización de las propiedades de Slider puede hacer que cambie la propiedad Value y se desencadene el evento ValueChanged. Debe asegurarse de que el controlador de eventos Slider no tenga acceso a las vistas que todavía no se han creado durante la inicialización de la página.

El evento ValueChanged no se activa durante la inicialización de Slider a menos que cambie la propiedad Value. Puede llamar al controlador de ValueChanged directamente desde el código.

Selección del color del control deslizante

El programa RgbSliders contiene tres elementos de Slider que permiten seleccionar de forma interactiva un color mediante la especificación de sus valores RGB:

Captura de pantalla triple de controles deslizantes de R G B

El ejemplo TextFade utiliza dos elementos Slider para desplazar dos elementos Label a través de un AbsoluteLayout y atenuarlos en el otro.

La diferencia del control de incremento

Stepper define las mismas propiedades y eventos que Slider, pero la propiedad Maximum se inicializa en 100 y Stepper define una cuarta propiedad:

  • Increment de tipo double, inicializado en 1

Visualmente, Stepper se compone de dos botones con las etiquetas - y +. Al presionar - disminuye Value en Increment hasta un mínimo de Minimum. Al presionar + se aumenta Value en Increment hasta un máximo de Maximum.

Esto se muestra en el ejemplo StepperDemo.

Switch y CheckBox

Switch permite al usuario especificar un valor booleano.

Conceptos básicos de Switch

Visualmente, Switch se compone de un comando de alternancia que se puede desactivar y activar. La clase define una propiedad:

Switch define un evento:

El programa SwitchDemo muestra Switch.

Un tradicional valor CheckBox

Algunos desarrolladores podrían preferir un elemento CheckBox más tradicional para Switch. La biblioteca Xamarin.FormsBook.Toolkit contiene una clase CheckBox que se deriva de ContentView. CheckBox se implementa por los archivos CheckBox.xaml y CheckBox.xaml.cs. CheckBox define tres propiedades (Text, FontSizey IsChecked) y un evento CheckedChanged.

En el ejemplo CheckBoxDemo se muestra este CheckBox.

Escritura de texto

Xamarin.Forms define tres vistas que permiten al usuario escribir y editar texto:

  • Entry para una única línea de texto
  • Editor para varias líneas de texto
  • SearchBar para una única línea de texto para fines de búsqueda.

Entry y Editor se derivan de InputView, que se deriva de View. SearchBar se deriva directamente de View.

Teclado y foco

En teléfonos y tabletas sin teclados físicos, los elementos Entry, Editor y SearchBar hacen que aparezca un teclado virtual. La presencia de este teclado en la pantalla está relacionada con el foco de entrada. Una vista debe tener ambas propiedades IsVisible y IsEnabled establecidas en true para obtener el foco de entrada.

Dos métodos, una propiedad de solo lectura y dos eventos, están implicados con el foco de entrada. Todos se definen mediante VisualElement:

  • El método Focus intenta establecer el foco de entrada en un elemento y devuelve true si lo consigue.
  • El método Unfocus de quita el foco de entrada de un elemento.
  • La propiedad de solo lectura IsFocused indica si el elemento tiene el foco de entrada.
  • El evento Focused indica cuándo obtiene un elemento el foco de entrada.
  • El evento Unfocused indica cuándo pierde un elemento el foco de entrada.

Elección del teclado

La clase InputView de la que se derivan Entry y Editor define solo una propiedad:

Indica el tipo de teclado que se muestra. Algunos teclados están optimizados para los URI o números.

La clase Keyboard permite definir un teclado con un método Keyboard.Create estático con un argumento de tipo KeyboardFlags, una enumeración con las siguientes marcas de bits:

Si se usa Editor cuando se espera un párrafo o más texto, la llamada a Keyboard.Create es un buen enfoque para seleccionar un teclado. Para Entry de una sola línea, son útiles las siguientes propiedades de solo lectura estáticas de Keyboard:

KeyboardTypeConverter permite especificar estas propiedades en XAML, tal y como se muestra en el programa EntryKeyboards.

Propiedades y eventos de entradas

Entry de una única línea define las siguientes propiedades:

En Entry también se definen dos eventos:

  • TextChanged con un objeto TextChangedEventArgs, que se desencadena cuando cambia la propiedad Text.
  • Completed, que se desencadena cuando el usuario finaliza y se descarta el teclado. El usuario indica la finalización de una manera específica de la plataforma.

En el ejemplo QuadraticEquations se muestran estos dos eventos.

La diferencia del editor

El elemento Editor de varias líneas define las mismas propiedades Text y Font que Entry, pero no las demás propiedades. Editor también define las dos mismas propiedades que Entry.

JustNotes es un programa de notas de formato libre que guarda y restaura el contenido de Editor.

El elemento SearchBar no se deriva de InputView, por lo que no tiene una propiedad Keyboard. Pero tiene todas las propiedades Text, Font y Placeholder que define Entry. Además, SearchBar define tres propiedades adicionales:

El botón para cancelar específico de la plataforma borra el texto. El elemento SearchBar también tiene un botón de búsqueda específico de la plataforma. Al presionar cualquiera de estos botones, se produce uno de los dos eventos que define SearchBar:

En el ejemplo SearchBarDemo se muestra SearchBar.

Selección de fecha y hora

Las vistas DatePicker y TimePicker implementan controles específicos de la plataforma que permiten al usuario especificar una fecha o una hora.

DatePicker

DatePicker define cuatro propiedades:

  • MinimumDate de tipo DateTime, inicializado el 1 de enero de 1900.
  • MaximumDate de tipo DateTime, inicializado el 31 de diciembre de 2100.
  • Date de tipo DateTime, inicializado el DateTime.Today.
  • Format de tipo string, la cadena de formato de .NET inicializada en "d", el patrón de fecha corta, que da como resultado una fecha que se muestra como "7/20/1969" en Estados Unidos.

Puede establecer las propiedades de DateTime en XAML si expresa las propiedades como elementos de propiedad y usa el formato de fecha corta ("7/20/1969") de referencia cultural invariable.

En el ejemplo DaysBetweenDates se calcula el número de días entre dos fechas seleccionadas por el usuario.

TimePicker (¿o es TimeSpanPicker?)

TimePicker define dos propiedades y ningún evento:

  • Time es de tipo TimeSpan en lugar de DateTime, que indica el tiempo transcurrido desde la medianoche.
  • Format de tipo string, la cadena de formato .NET inicializada en "t", el patrón de hora corta, que da como resultado una hora que se muestra como "1:45 PM" en Estados Unidos.

El programa SetTimer muestra cómo utilizar TimePicker para especificar una hora para un temporizador. El programa solo funciona si se mantiene en primer plano.

SetTimer también muestra cómo usar el método DisplayAlert de Page para mostrar un cuadro de alerta.