Introducción a Xamarin.Forms Shell

  • Artículo

Download SampleDescargar el 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 pestañas en la parte inferior.
  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, consulte Creación de una aplicación de Xamarin.Forms Shell.

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:

Screenshot of a Shell flyout, on iOS and 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:

Screenshot of Shell bottom tabs, on iOS and 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:

Screenshot of Shell top tabs, on iOS and Android

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

Screenshot of Shell page navigation, on iOS and 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, consulte Navegación en Xamarin.Forms Shell.

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:

Screenshot of Shell search, on iOS and 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, consulte Búsqueda en Xamarin.Forms Shell.

Compatibilidad con plataformas

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 el Panel de proyectos de Shell de Xamarin.Forms en github.com.