Trabajando con AbsoluteLayout en Xamarin Forms

En ocasiones, al desarrollar una aplicación nos enfrentamos con la situación de que tenemos que implementar diseños que requieren el uso de layouts diferentes a lo que normalmente estamos acostumbrados. (Por ejemplo: StackLayout, GridLayout).

Son mockups con un diseño más complejo en el que necesitamos organizar algunos controles gráficos superpuestos a otros. Es la razón por la cual aprenderemos de una manera fácil a utilizar el AbsoluteLayout.

¡Empecemos!

Conociendo la estructura

Para comenzar a crear un AbsoluteLayout, solo debemos definir las etiquetas <AbsoluteLayout>, declarar todos los elementos gráficos que necesitamos y luego configurar las propiedades que nos permiten colocar estos elementos en la pantalla, estas son: LayoutBounds y LayoutFlags. (Las cuales estaré explicando más abajo).

Paso 1⃣: Agrega las siguientes etiquetas.

Paso 2⃣: Agrega tantos elementos gráficos como necesites y a cada uno de estos agrégale las propiedades: AbsoluteLayout.Bounds y AbsoluteLayout.LayoutFlags.

AbsoluteLayout.LayoutBounds

Esta propiedad se utiliza para establecer las posiciones X, Y y el ancho y alto de los elementos. Estos valores pueden ser Proporcionales o Absolutos, vamos a conocerlos uno por uno:

Valores proporcionales

Definen la relación entre el layout y la vista base. Esta proporción se define en función a la posición de una vista secundaria en proporción al diseño padre. Cuando lo usemos tenemos que asegurarnos de lo siguiente:

🔹 Configurar la propiedad AbsoluteLayout.LayoutFlags con “All” como valor.

🔹 Los valores X y Y deben estar contenidos entre 0 y 1.

🔹 Para obtener los valores proporcionales de una manera correcta, aplica el siguiente calculo: Si tenemos una vista con un ancho de 600, debe dividirse la proporción deseada entre la base del ancho proporcional (En este caso 600), Por ejemplo, si queremos obtener la tercera parte de 600 solo tenemos que hacer esto: 200/600 = 0.33, este es el valor que se establecerá como ancho.

Valores absolutos

A diferencia del proporcional estos valores solo asignan posiciones fijas, sin importar si se ajustan o no a la pantalla. Por ejemplo: Podemos posicionar un botón en el centro de la pantalla de un dispositivo determinado, pero si ejecutamos la misma aplicación en un dispositivo con un tamaño diferente, el botón se posicionará en coordenadas visualmente diferentes.

Para usarlo no tienes que agregar la propiedad LayoutFlags.

AbsoluteLayout.LayoutFlags

Esta propiedad se encarga de configurar cómo se interpretarán los valores en la pantalla. Existen algunas opciones para establecer esta propiedad, tales como:

🔹PositionProportional: Obtiene X y Y como diseño proporcional, los elementos restantes son absolutos.

🔹SizeProportional: Obtiene el ancho y el alto como diseño proporcional, los elementos restantes son absolutos

🔹XProportional — YProportional: Obtiene X o Y respectivamente como diseño proporcional, los elementos restantes son absolutos.

🔹WidthProportional — HeightProportional: Obtiene el ancho o el altura respectivamente como diseño proporcional, los elementos restantes son absolutos

🔹All: Toma todos los valores como proporcionales.

Si deseas que todos los valores permanezcan absolutos, simplemente no le agregues la propiedad.

Establece esta propiedad de la siguiente manera:

Pero, qué pasa si queremos utilizar ambas propiedades al mismo tiempo?🤔

Si te estás preguntando si puedes combinar ambas propiedades, ¡La respuesta es ! 🎉 ¡Puedes hacerlo!

Solo asegúrate de lo siguiente:

Si deseas mezclar LayoutBound con valores proporcionales y absolutos, solo se deben establecer los valores deseados (X, Y, Ancho y altura) y luego establece la propiedad LayoutFlags con el valor correspondiente segun lo explicado más arriba.

Veamos un ejemplo:

En el ejemplo, utilicé la X y el Ancho como valores proporcionales (0,8 y 0,3 respectivamente) por lo que en este caso están configurados los LayoutFlags con XProportional, WidthProportional.

Y ahora, practiquemos 😎

Artículo en inglés: https://askxammy.com/working-with-absolutelayout-in-xamarin-forms/

Referencias: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolute-layout

Y listo! El absoluteLayout está implementado! 🎊

Gracias por leer este artículo!!! 💚