Introducción a Xamarin.Forms Shell

Ejemplo de descarga Descarga del ejemplo

Xamarin.Forms Shell reduce la complejidad del desarrollo de aplicaciones móviles al proporcionar las características fundamentales que requieren la mayoría de aplicaciones móviles, como por ejemplo:

  • Un único lugar para describir la jerarquía visual de una aplicación.
  • Una interfaz de usuario de navegación común.
  • Un esquema de navegación basado en URI que permite la navegación a cualquier página de la aplicación.
  • Un controlador de búsqueda integrado.

Además, las aplicaciones de Shell se benefician de una mayor velocidad de representación y un consumo reducido de memoria.

Importante

Las aplicaciones existentes pueden adoptar Shell y aprovechar inmediatamente las mejoras de navegación, rendimiento y extensibilidad.

Jerarquía visual de la aplicación

En una aplicación de Xamarin.Forms Shell, la jerarquía visual de la aplicación se describe en una clase que genera subclases de la clase Shell. Esta clase puede constar de tres objetos jerárquicos principales:

  1. FlyoutItem o TabBar. Un objeto FlyoutItem representa uno o varios elementos en el control flotante y debe usarse cuando el modelo de navegación de la aplicación incluye un control flotante. Un objeto TabBar representa la barra de pestañas inferior y debe usarse cuando el modelo de navegación de la aplicación comienza con pestañas en la parte inferior y no requiere control flotante.
  2. Tab, que representa contenido agrupado, navegable mediante las pestañas inferiores.
  3. ShellContent, que representa los objetos ContentPage de cada pestaña.

Estos objetos no representan ninguna interfaz de usuario, sino más bien la organización de la jerarquía visual de la aplicación. Shell tomará estos elementos y generará la interfaz de usuario de navegación del contenido.

Nota:

En una aplicación de Shell, las páginas se crean a petición en respuesta a la navegación.

Para obtener más información, vea Create a Xamarin.Forms Shell application.

La experiencia de navegación proporcionada por Xamarin.Forms Shell se basa en controles flotantes y pestañas. El nivel superior del panel de navegación en una aplicación de Shell es un control flotante o una barra de pestañas inferior, según los requisitos de navegación de la aplicación. El ejemplo siguiente muestra una aplicación donde el nivel superior de navegación es un control flotante:

Captura de pantalla de un menú desplegable de Shell en iOS y Android

En este ejemplo, algunos elementos de control flotante se duplican como elementos de barra de pestañas. Aunque también hay elementos a los que solo se puede tener acceso desde el control flotante. Al seleccionar un elemento de control flotante, se selecciona y muestra la pestaña inferior que representa el elemento:

Captura de pantalla de las pestañas inferiores de Shell en iOS y Android

Nota:

Cuando el control flotante no está abierto, la barra de pestañas inferior se puede considerar el nivel superior de navegación en la aplicación.

Cada pestaña de la barra de pestañas muestra un ContentPage. Sin embargo, si una pestaña inferior contiene más de una página, las páginas son navegables mediante la barra de pestañas superior:

Captura de pantalla de las pestañas superiores de Shell en iOS y Android

En cada pestaña, se puede navegar por objetos ContentPage adicionales que se conocen como páginas de detalles:

Captura de pantalla del panel de navegación de la página de Shell en iOS y Android

Shell incluye una experiencia de navegación basada en URI que emplea rutas para navegar a cualquier página de la aplicación, sin tener que seguir una jerarquía de navegación establecida. También ofrece la posibilidad de navegar hacia atrás sin tener que visitar todas las páginas de la pila de navegación. Para obtener más información, vea Xamarin.Forms Shell navigation.

Xamarin.Forms Shell incluye la funcionalidad de búsqueda integrada que proporciona la clase SearchHandler. Se puede agregar funcionalidad de búsqueda a una página agregando un objeto SearchHandler con subclases a esta. Esto se traduce en que se agrega un cuadro de búsqueda en la parte superior de la página. Cuando se escriben datos en el cuadro de búsqueda, el área de sugerencias de búsqueda se rellena con datos:

Captura de pantalla de la búsqueda de Shell en iOS y Android

A continuación, cuando se selecciona un resultado en el área de sugerencias de búsqueda, se puede ejecutar la lógica personalizada; por ejemplo, navegar a una página de detalles.

Para obtener más información, vea Xamarin.Forms Shell search.

Compatibilidad con la plataforma

Xamarin.Forms Shell está totalmente disponible en iOS y Android, pero solo parcialmente disponible en la Plataforma universal de Windows (UWP). Además, Shell es actualmente experimental en UWP y solo se puede usar agregando la siguiente línea de código a la clase App en el proyecto de UWP, antes de llamar a Forms.Init:

global::Xamarin.Forms.Forms.SetFlags("Shell_UWP_Experimental");

Para obtener más información sobre el estado de Shell en UWP, vea Xamarin.Forms /projects/54" data-linktype="external">Shell Project Board en Xamarin.Forms github.com.