Esta semana fui invitado a compartir 30 horas de un poco de lo que se de esta tecnología (Xamarin), y me es grato compartir el conocimiento que he estado adquiriendo en mi practica profesional.
Para empezar ¿Que es Xamarin?
Es una herramienta (Framework) para el desarrollo de aplicaciones móviles multi-plataforma (Android, iOS y Windows Phone). Es decir que en vez de hacer código para cada una por separado, podemos compartir código y preocuparnos en programar por separado solo aquellas funciones muy especificas de cada plataforma.
Los lenguajes necesarios para trabajar son C# para programar la lógica de negocios y XAML para el diseño de interfaces gráficas (Aunque estás también se pueden hacer desde código C#).
Comencemos con Interfaces gráficas.
Para entender las interfaces gráficas y el diseño de las mismas, podemos asemejarlas al diseño Web que se hace con HTML. Todo lo que aparece en pantalla está dentro de un contenedor Padre (ContentLayout) mismo que a su vez puede tener “N” cantidad de hijos (Child) los cuales pueden ser controles o contenedores (Layout) mismos que a su vez pueden tener también hijos.
Gracias a NuGet y a la creciente comunidad de Xamarin, podemos descargar muchos tipos de controles personalizados.
Grid
Considero que es uno de los Layout mas útiles al momento de crear interfaces gráficas. Su potencial radica en que al ser una tabla contenedora, es más fácil acomodar los elementos dentro del mismo.
Para crearlo se define el Grid con las etiquetas: <Grid> </Grid>. Y lo primero que se hace al trabajar con un Grid es definir las filas y columnas que lo conformaran.
Las filas se definen dentro de las etiquetas: <Grid.RowDefinitions> </Grid.RowDefinitions>, y cada fila se crea con la etiqueta: <RowDefinition/>. Las columnas se definen dentro de las etiquetas: <Grid.ColumnDefinitions> </Grid.ColumnDefinitions>, y cada fila se crea con la etiqueta: <ColumnDefinition/>.
Cada fila tendrá un alto (Height) y cada columna tendrá un ancho (Width) que puede tener tres tipos de valores que se pueden combinar según se necesite:
- Auto: Automáticamente determina el tamaño (ancho o alto) para ajustarlo al contenido de la fila o columna.
- Proporcional/Estrella(*): Utiliza el espacio disponible y se ajusta según el numero de estrellas en el conjunto. Por ejemplo si tengo una fila cuyo Height sea de 2*, otra de 6* y una ultima de 2*, sumara un total de 10 estrellas y asignara el proporcional a cada Height, cabe mencionar que pueden ser el numero de estrellas que uno considere necesarios.
- Absoluto: Se asigna un valor entero que representa la altura de la fila o columna.
Para agregar elementos (Controles o Layouts) al Grid, se agregan a los controles las propiedades: Grid.Row y Grid.Column, las cuales se asignan con el indice de la fila y columna en la que estarán (El indice inicia en 0).
Para entenderlo mejor veamos el siguiente ejemplo del uso de un Grid:
https://github.com/pavo8899/CursoXamarin/blob/master/EjemploGrid
Para saber más del manejo de Layouts consulte la documentación en el siguiente enlace: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/
