Monkey Conf 2018: Conociendo Xamarin.Forms Shell

Xamarin.Forms Shell
Conociendo lo próximo!

Sponsors
Sin ellos no sería posible el evento!

Software Developer at Microsoft
• Blog: http://geeks.ms/blogs/jsuarez
• Email: javiersuarezruiz@hotmail.com
• Twitter: @jsuarezruiz

Xamarin + Xamarin.Forms
Enfoque tradicional de
Xamarin
Con Xamarin.Forms:
Más código compartido, todo nativo
iOS C# UI Windows C# UIAndroid C# UI
Shared C# Backend
Shared UI Code
Shared C# Backend

¿Qué se incluye?
✓ 40+ páginas, layouts, y
controles
(code behind o XAML)
✓ Two-way data binding
✓ Navegación
✓ API de animaciones
✓ Dependency Service
✓ Messaging Center
Shared C# Backend
Shared UI Code

Stack Absolut
e
Relative Grid ContentVie
w
ScrollView Frame
Content MasterDetai
l
Navigati
on
Tabbed Carousel
ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar Slider
Stepper TableView TimePicker WebView EntryCell
ImageCell SwitchCell TextCell ViewCell

Xamarin.Forms
¿Qué debe mejorar?

Picture of Lego Mess – Lego creatin

Xamarin.Forms Shell
¿Qué es?

Es un “esqueleto” opcional para la App
Estructurado
Tu objetivo es rellenar el contenido
Facilitar apariencia consistente
Configuración global, poder estilar con CSS, etc
Nueva gestion de navegación
¿Qué es Shell?

Deep linking
Las páginas tiene una URLs asignada
La App se puede lanzar con una URL dada
Se añade Soporte a búsquedas
Más acerca de Shell

Xamarin.Forms Shell
<?xml version="1.0" encoding="UTF-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Xamarin.Store"
x:Class="Xamarin.StoreDemoApp"
Route="s">
<Shell.FlyoutHeader>
<local:HeaderView />
</Shell.FlyoutHeader>
<Shell.MenuItems>
<MenuItem x:Name="preferencesMenuItem" Text="Preferences" Icon="prefs.png" />
<MenuItem x:Name="logOutMenuItem" Text="Logout" Icon="logout.png" />
</Shell.MenuItems>
<ShellItem Route="home" Title="Home" Icon="home.png" GroupBehavior="ShowTabs">
<ShellTabItem Route="updates" Title="Home" Icon="home.png"
ContentTemplate="{DataTemplate local:HomePage}" />
<ShellTabItem Route="games" Title="Games" Icon="games.png"
ContentTemplate="{DataTemplate local:GamesPage}" />
<ShellTabItem Route="settings" Title="Settings" Icon="games.png"
ContentTemplate="{DataTemplate local:SettingsPage}" />
</ShellItem>
<ShellItem Route="apps" Title="Media" Icon="media.png">
<ShellTabItem Route="books" Title="Books" Icon="books.png"

La nueva jerarquía con Shell
Xamarin.Forms es un framework usado por desarrolladores multiplataforma
que aman XAML y C#, porque maximiza el uso compartido de código al tiempo
proporciona acceso completo a todas las APIs de la plataforma nativa y los
controles de UI.
El poder combinar código compartido con nativo resulta confuso al principio.
Eliges Xamarin.Forms para ser productivo, y lo último que quieres encontrar es
la falta de la misma.
Xamarin.Forms Shell, llega como nuevo punto de partida predterminado para el
desarrollo de aplicaciones móviles con el objetivo de reducir la complejidad y
aumenta la productividad.

Vamos a desglosar las piezas del ejemplo anterior.
Un Shell consta de 3 elementos jerárquicos: ShellItems, ShellSections y
ShellContent. Cada ShellContent es hijo de ShellSection que a su vez es hijo
de un ShellItem.
Ninguno de estos elementos representa la interfaz de usuario en si, sino la
organización de los elementos que contienen. Shell tomará esos elementos y
producirá la UI de navegación adecuada para la plataforma en la que se
ejecuta.

Elemento Descripción
ShellItem El nivel superior de la estructura de la aplicación. Puede contener
varios ShellSections.
ShellSection Agrupa el contenido de la aplicación. Este contenido es
navegable por pestañas en la parte inferior. Puede contener uno
o más ShellContent. Varios ShellContent son navegables por
pestañas en la parte superior.
ShellContent Las ContentPages de tu aplicación.

Dos páginas con pestañas en la parte inferior

Monkey Conf 2018: Conociendo Xamarin.Forms Shell

Flyout
Podemos seguir creando menus laterales deslizantes, ahora de una forma más
sencilla, utilizando Flyout.
Las claves para crear el menú son:
• FlyoutHeader: Permite añadir cualquier contenido en la parte superior del
menú.
• MenuItems: Los elementos del menú desplegable se rellenan
automáticamente con ShellItems para poder navegar por las diferentes
áreas de la aplicación.

Flyout
Podemos personalizar el comportamiento de
la cabecera gracias a la propiedad
FlyoutHeaderBehavior. Podemos anclar el
contenido para que haga scroll con el resto de
menuitems; se queda fija sin hacer scroll o
bien, hacer un efecto de Parallax.
Shell.FlyoutHeader>
<local:FlyoutHeader />
</Shell.FlyoutHeader>
<Shell
FlyoutHeaderBehavior="Fixed"
…
>  Default
 Scroll
 Fixed
 CollapseOnScroll

Flyout
Desglosando este XAML, hemos
agregado HomePage a la aplicación y
será el primer ContentPage en
iniciarse, ya que es el primer
contenido declarado en el archivo de
Shell.
Para este diseño solo necesitamos
establecer un título, pero ShellItem
también proporciona la propiedad
FlyoutIcon donde podemos
proporcionar una imagen para
mostrar a la izquierda del elemento.
Los íconos toman cualquier
Xamarin.Forms ImageSource.
<ShellItem Title="Home">
<ShellSection>
<ShellContent>
<local:HomePage />
</ShellContent>
</ShellSection>
</ShellItem>

Flyout
En ocasiones, al necesitar varios
elementos de menú, navegando a la
misma página o tener un mayor control
sobre la apariencia; necesitamos una
alternativa.
MenuItem permite establecer el texto y el
icono de igual forma que ShellItem.
En caso de querer personalizar al
completo cada elemento del menú,
contamos con ShellItemTemplate.
<Shell.MenuItems>
<MenuItem
Command="{Binding ProductsCommand}"
CommandParameter="1"
Text=“Products" />
</Shell.MenuItems>
<Shell.MenuItemTemplate>
<DataTemplate>
<ContentView HeightRequest="32">
<Label Text="{Binding Text}"
FontAttributes="Bold" />
</ContentView>
</DataTemplate>
</Shell.MenuItemTemplate>

Navegación
Llegan grandes novedades con Shell

Navegación
Shell introduce un nuevo modelo de navegación basado en URI.
El sistema de URI permiten una navegación mejorada, ya que podemos saltar
instantáneamente a cualquier parte de la aplicación e incluso ofrecer la
posibilidad de retroceder sin tener que crear todas las páginas entre los dos
puntos.

Navegación
Lo primero que debemos hacer esdeclarar nuestras rutas, comenzando con el
esquema y el host de nuestra aplicación.
Al juntar estas piezas en una URL, terminamos con el siguiente URI: "app:
//www.microsoft.com/myapp".
Cada elemento Shell que hemos definido también toma una propiedad de ruta
que luego podemos usar para navegar programáticamente. Para las páginas
que no están representadas por un elemento Shell, podemos registrar
explícitamente una ruta.
<Shell
Route="myapp"
RouteHost="www.microsoft.com"
RouteScheme="app"

Navegación
En el constructor de Shell.cs, o en cualquier lugar que se ejecute antes de que
llamemos a la ruta, podemos declarar las rutas necesarias.
Routing.RegisterRoute("products", typeof(ProductsView));

Navegación
Otra gran ventaja de Shell es que cuenta con métodos de navegación estática
a los que se puede acceder desde cualquier lugar de la aplicación. Podemos
obtener una referencia al Shell de la aplicación que es la página principal de su
aplicación accesible como una propiedad estática desde App.Current .
Para realizar la navegación, utilizamos al método GoToAsync () pasando una
URL válida como un ShellNavigationState. Un ShellNavigationState puede
construirse a partir de una cadena o un URI.
(App.Current.MainPage as
Xamarin.Forms.Shell).GoToAsync($"app:///myapp/products?id={productId}",
true);

Interceptar la navegación atrás
Esta ha sido una gran solicitud y algo que ha sido difícil de manejar en
Xamarin.Forms.
Ahora, podemos capturar la navegación antes y después de que se haya
completado para implementar código personalizado.
<Shell
…
Navigating="Shell_Navigating"
private void Shell_Navigating(object sender, ShellNavigatingEventArgs e)
{
if (//some Boolean evaluation)
{
e.Cancel(); // do not allow this navigation AND/OR do something else
}
}

ShellNavigatingEventArgs
Elemento Tipo Descripción
Current ShellNavigationState La URI de la página actual.
Source ShellNavigationState La URI que representa de donde se ha originado la
navegación.
Target ShellNavigationState La URI que representa hacia donde se navegará.
CanCancel Boolean Propiedad que indica si la navegación se puede cancelar.
Cancel Boolean Método para cancelar la navegación requerida.
Canceled Boolean Propiedad que indica si la navegación ha sido cancelada.

La barra de navegación
Shell está enfocado en facilitar las cosas, y la barra de navegación es uno de
los controles nativos más difíciles de personalizar en las plataformas móviles.
Las personalizaciones comunes incluyen la capacidad de agregar imágenes
personalizadas para el botón Atrás o para agregar contenido personalizado al
espacio de título y el comportamiento de búsqueda plegable.
<Shell.TitleView>
<StackLayout>
<Image Margin="10,0,0,0" Source="gear"/>
</StackLayout>
</Shell.TitleView>

La barra de navegación
Es un patrón común integrar un campo de búsqueda en la barra de navegación y, en
algunos casos, incluso tenerlo dentro y fuera de ese espacio. Shell presenta
SearchHandler que contiene toda la lógica de búsqueda de ContentPage, así como el
comportamiento deseado de la UI. SearchHandler expone SearchBoxVisibility para
controlar el estado de la interfaz de usuario y otras propiedades.
• Collapsable
• Expanded
• Hidden
• IsSearchEnabled
• ShowResults
• Placeholder

DEMO
La nueva navegación en Shell

Visuals
Facilitar conseguir misma UI en diferentes plataformas

Drawing Spec
Actualmente, muchas aplicaciones se ven a nivel estético exactamente igual en
todas las plataformas. En Xamarin.Forms, para conseguir este resultado, en
ocasiones hacen falta Custom Renders o efectos (código específico de
plataforma) para conseguirlo.
Por ese motivo, junto a Shell llega una nueva opción para conseguir la misma
interfaz de usuario en diferentes plataformas sin necesidad de requerir tanto a
Custom Renders o efectos.

MaterialShell
MaterialShell consigue mantener utilizando controls 100% nativos pero
aplicando interfaz Material en Android e iOS.
Para comenzar a utilizarlo, es necesario establecer el flag, Visual_Experimental
antes de inicializar Forms.
global::Xamarin.Forms.Forms.SetFlags("Visual_Experimental");

MaterialShell
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
Visual="Material"
Title="Visual Material">
Contamos con una nueva propiedad, Visual, disponible en ContentPage para
establecer que usaremos un dibujado específico en todas las plataformas, en el
ejemplo que puedes ver a continuación, Material.

CollectionView
Más opciones, rendimiento y personalización con colecciones

Soporta layouts Horizontal/Vertical
Es como una versión moderna de ListView
No es necesario usar Cells
Se usan Views y DataTemplates
CollectionView
https://github.com/xamarin/Xamarin.Forms/issues/3172

DEMO
Probamos todas las opciones de CollectionView

Xamarin.Forms Shell
• Mejor rendimiento
• Mismo diseño en Android e iOS con
MaterialShell
• Facilitar crear Layouts complejos
• Navegación con Flyout y pestañas
• URL routed navigation, deep linking
• Mejoras en la navegación, gestion de
navegar atrás
• Search handler
• Snackbar
• Bottom Sheet
• Floating Action Button
• Left Bar Button
• Screen segues
• Transiciones de páginas
• Nueva API de gestos
• Además de todo lo que ya era possible
con Xamarin.Forms antes

Monkey Conf 2018: Conociendo Xamarin.Forms Shell

Más contenido relacionado

Similar a Monkey Conf 2018: Conociendo Xamarin.Forms Shell (20)

Más de Javier Suárez Ruiz (20)

Último (20)

Monkey Conf 2018: Conociendo Xamarin.Forms Shell

Notas del editor