Elementos comunes en Xamarin.Forms: Páginas

Buenas!

Como hemos comentado en el post donde introducimos Xamarin.Forms, esta plataforma nos permite escribir solamente una vez el diseño y comportamiento de nuestras pantallas para que luego podamos ejecutarlas en distintos sistemas operativos. Para lograr este cometido nos ofrece un conjunto de elementos predefinidos y de cierta forma generales, es decir que tienen un equivalente similar en todas las plataformas.

La documentación oficial de Xamarin.Forms establece los distintos tipos de controles:

  • Páginas
  • Layouts
  • Vistas
  • Celdas

En este post veremos las páginas, el elemento inicial que nos permitirá definir la estructura general de nuestras pantallas y su flujo de navegación.

Páginas

Son el elemento de más alto nivel en Xamarin.Forms y define el comportamiento general que tendrá una pantalla o un conjunto de ellas.

Las alternativas que tenemos disponibles son las siguientes:

XamarinFormsControles - Pages.png

Como podemos ver por los iconos de cada una de ellas, tienen un comportamiento característico. Lo muy bueno de esto es que todas ellas tienen un equivalente en todas las plataformas que Xamarin.Forms soporta y nos abstrae de cómo se implementa en cada una. Nosotros solo definiremos que use esquema con sus propiedades generales,

El más básico es el ContentPage, el cual es una pantalla básica donde podremos agregar cualquier tipo de contenido pero sin ningún comportamiento particular del mismo como si sucederá con los demás. En el ejemplo que vimos en el post inicial de Xamarin.Forms estamos usando este tipo de página:

Luego ya tenemos opciones más complejas, las cuales heredan de ContentPage.

Una de estas opciones es el MasterDetailPage, el cual es muy usado para proveer un panel de acceso lateral a distintas partes de la aplicación, mientras también tiene una página de contenido. Esta es tal vez el formato de aplicación que más solemos usar a menudo y que por ejemplo está dentro de los lineamientos de Material Design para Android.

Veamos el código para lograr usar este tipo de página:

Como se puede apreciar tenemos dos propiedades, Master y Detail. Ambos son páginas a su vez, y de tipo ContentPage. Para este caso solamente mostraremos algo de contenido estático y con colores diferentes para que resalte.

Veamos como queda para WindowsAndroid:

XamarinFormsControles - MasterDetailPageWindows

XamarinFormsControles - MasterDetailPageAndroid.gif

 

Otro tipo de página bastante común a la hora de hacer una aplicación móvil es el NavigationPage. Es muy usado en general cuando vamos a mostrar el contenido de un detalle desde una pantalla que tiene una referencia al mismo, dándonos la posibilidad de volver hacia atrás.

Luego tenemos otros casos más particulares, como el TabbedPage y el CarouselPage. Dependiendo del planeamiento y diseño de nuestra aplicación, su uso podrá variar significativamente. En general, al primero lo usaremos en aquellos casos donde tenemos contenido asociado pero donde cada uno tiene su importancia/contenido propio. Dependiendo del tamaño y tipo de nuestra aplicación, puede que en todo el contenido estemos usando sólo este tipo de página. En su uso contaremos don diferentes Tabs, los cuales tienen un título y contenido propio, el cual podremos ir navegando seleccionando el título del Tab o a través del gesto swipe (deslizar lateralmente).

El segundo es similar, la principal diferencia es que no contamos con elementos de cabecera donde tenemos el título de cada Tab y la posibilidad de navegar entre ellos. Solamente lo podremos hacer a través de los gestos (swipe).

XamarinFormsControles - TabbedPageWindows

XamarinFormsControles - TabbedPageAndroid

 

Conclusión

Como podemos apreciar en este ejemplo rápido, vemos en acción las facilidades que nos ofrece Xamarin.Forms a la hora de realizar una aplicación móvil multiplataforma. Con tan solo decidir cómo será el comportamiento base de cada una de las pantallas (y con esto me refiero al tipo de página que deseemos utilizar) y la configuración mínima sobre cada plataforma (sobre todo en Android en los colores principales de la aplicación) ya tenemos el comportamiento base de la aplicación ejecutándose con el comportamiento nativo de las distintas plataformas, sin necesidad de conocer cuál es el componente específico que lo resuelve para cada una. Además de que estaremos reutilizando al máximo el código de nuestra aplicación.

Les dejo el link del repositorio de GitHub donde está el código de este ejemplo. Gracias por leer!!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s