Superponer controles con AbsoluteLayout en MAUI

El AbsoluteLayout en .NET MAUI te permite superponer controles y crear interfaces visualmente atractivas mediante un sistema de posicionamiento proporcional o absoluto. Si buscas diseños con overlapping —como tarjetas de crédito interactivas o UIs con capas— este layout es tu mejor aliado.

¿Qué es el AbsoluteLayout y para qué sirve?

El AbsoluteLayout es un contenedor que te ayuda a posicionar vistas usando coordenadas X, Y junto con un ancho y un alto definidos. Su mayor fortaleza está en permitirte superponer controles, algo que otros layouts no logran con la misma flexibilidad [00:18].

La estructura básica abre y cierra los tags <AbsoluteLayout> y dentro de ellos colocas cualquier control que necesites: un BoxView, una imagen, un Label o un Frame. Cada control hijo recibe dos propiedades anexas que controlan su comportamiento visual.

¿Qué propiedades necesita un control dentro de un AbsoluteLayout? Necesita AbsoluteLayout.LayoutBounds para definir posición X, Y, ancho y alto, y opcionalmente AbsoluteLayout.LayoutFlags para indicar si esos valores son proporcionales o absolutos.

¿Cómo funcionan los valores proporcionales y absolutos en LayoutBounds?

La propiedad LayoutBounds acepta dos tipos de valores y entender la diferencia es clave para no romper tu UI [02:14].

• Valores proporcionales: deben estar entre 0 y 1. Funcionan como porcentajes del contenedor padre, similares a las coordenadas X y Y de un plano cartesiano.
• Valores absolutos: son números enteros que representan píxeles concretos en la pantalla.
• Orden de valores: siempre se escriben como X, Y, ancho, alto.

Cuando usas valores proporcionales, debes acompañarlos de LayoutFlags con un valor que indique cómo interpretarlos. Si usas valores absolutos, no necesitas declarar LayoutFlags.

¿Qué opciones acepta la propiedad LayoutFlags?

El LayoutFlags le indica al motor de renderizado cómo leer los valores que escribiste. Las opciones disponibles son:

• XProportional: solo el eje X se interpreta proporcionalmente.
• YProportional: solo el eje Y es proporcional.
• WidthProportional y HeightProportional: ancho o alto en proporción.
• All: los cuatro valores se interpretan como proporcionales [03:22].

¿Cómo aplicar AbsoluteLayout en un ejemplo real?

En el primer ejercicio se construyen líneas horizontales y verticales con varios BoxView, que es básicamente un recuadro coloreado útil para decorar tu UI [04:35].

Un BoxView con valores proporcionales se ve así:

xml <BoxView AbsoluteLayout.LayoutBounds="0.33, 0.33, 2, 200" AbsoluteLayout.LayoutFlags="All" />

Si cambias un valor absoluto de 0 a 40, el control se desplaza a la derecha de inmediato. Reducir el valor lo mueve a la izquierda. Esto te da control fino sobre cada elemento [05:48].

¿Puedo abreviar los valores de LayoutBounds? Sí. Cuando los cuatro valores son iguales puedes escribir uno solo, y cuando solo se repiten los dos primeros también puedes acortarlos para mantener el código limpio.

¿Cómo diseñar una tarjeta de crédito con overlapping?

El segundo reto consiste en replicar una tarjeta de crédito donde los números aparecen superpuestos sobre una imagen [07:30]. Antes de tocar código, conviene analizar los requerimientos a mano e identificar los componentes:

1. Una imagen principal que actúa como fondo de la tarjeta.
2. Cuatro elementos de texto (uno por cada bloque de números).
3. Cada elemento se posiciona encima de la imagen mediante overlapping.

Para que la imagen cargue correctamente, debes colocarla en la carpeta Resources/Images y verificar con clic derecho que su Build Action esté como MauiImage. Sin esa configuración, el código compilará pero la imagen no se mostrará en el dispositivo [09:47].

xml <AbsoluteLayout> <Image Source="creditcard.png" AbsoluteLayout.LayoutBounds="0.5, 0.2, 0.9, 0.3" AbsoluteLayout.LayoutFlags="All" /> <Label Text="1111" AbsoluteLayout.LayoutBounds="0.2, 0.35, 0.15, 0.05" AbsoluteLayout.LayoutFlags="All" HorizontalTextAlignment="Center" FontAttributes="Bold" /> </AbsoluteLayout>

¿Qué buenas prácticas debes recordar al usar AbsoluteLayout?

Mantener una nomenclatura consistente evita errores entre plataformas. En Android, por ejemplo, los nombres de imágenes no deben llevar mayúsculas, así que escribe siempre los recursos en minúscula para que funcionen tanto en iOS como en Android [10:30].

Piensa en el plano cartesiano cada vez que ajustes coordenadas: el eje X mueve el control horizontalmente y el eje Y verticalmente. Las dos últimas posiciones del LayoutBounds controlan ancho y alto, en ese orden.

Algunas propiedades útiles para mejorar la experiencia visual:

• BackgroundColor: cambia el fondo del control para diferenciarlo.
• HorizontalTextAlignment: acepta Start, Center o End para alinear el texto.
• TextColor: ajusta el color del texto para que contraste con el fondo.
• FontAttributes="Bold": aplica negrita al texto del Label.

Cuando el hot reload no refleje tus cambios, detén la aplicación y vuelve a iniciarla. Es un comportamiento normal cuando se trabaja con cambios estructurales en el XAML.

¿Ya probaste replicar la tarjeta de crédito o algún diseño con overlapping? Comparte tus capturas en los comentarios para que la comunidad pueda darte retroalimentación.