No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

AbsoluteLayout

13/23
Recursos

Aportes 14

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Este es mi diseño 😃

¡Una imagen de fondo y 8 Labels!

Code

AbsoluteLayoutSample.xaml
Consideraciones: Roboto-Medium.ttf es la fuente que utilizo.

<AbsoluteLayout HorizontalOptions="CenterAndExpand">
    <Image Source="credit_card"
           AbsoluteLayout.LayoutBounds="0,0,250,150"
           AbsoluteLayout.LayoutFlags="PositionProportional"/>
    <Label Text="1111"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.1,0.1,60,40"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="16"
           FontAttributes="Bold"/>
    <Label Text="2222"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.35,0.1,60,40"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="16"
           FontAttributes="Bold"/>
    <Label Text="3333"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.60,0.1,60,40"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="16"
           FontAttributes="Bold"/>
    <Label Text="4444"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.85,0.1,60,40"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="16"
           FontAttributes="Bold"/>
    <Label Text="1111"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.1,0.12,40,40"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="6"
           FontAttributes="Bold"/>
    <Label Text="J. Andrade"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.25,0.145,60,40"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="12"
           FontAttributes="Bold"/>
    <Label Text="VÁLIDA HASTA"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.52,0.145,20,10"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="4"
           FontAttributes="Bold"/>
    <Label Text="06/23"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.654,0.140,60,20"
           AbsoluteLayout.LayoutFlags="XProportional,YProportional"
           TextColor="Silver"
           FontFamily="RobotoMedium"
           FontSize="12"
           FontAttributes="Bold"/>
</AbsoluteLayout>

![](

Asi quedo mi diseño

lo comparto por google drive pero no se ve.

Mi diseño. Ambos, la tarjeta y el cuadro gris fueron hechos con AbsoluteLayout, solo que la tarjeta de fondo usé BoxView.

Cada día es mejor!

Cuando le agrego el "AbsoluteLayout.LayoutFlags=All" No se ven las lineas, por lo que cambien los BoxView 2,3 y 4 a BackgroundColor="Black" para que se vean ![](https://static.platzi.com/media/user_upload/image-160d3210-e256-493f-9beb-6add22eb8de2.jpg)
![](https://static.platzi.com/media/user_upload/image-ab707a4b-58d5-43d5-963e-97ad7fa45dfe.jpg) 😎👍
Asi deje mi diseño ![](https://static.platzi.com/media/user_upload/image-d72eb85f-97a3-4936-ab78-a7bc74d8de7d.jpg)
Hola a todos! Así quedó mi diseño, muy interesante la clase. ![](https://static.platzi.com/media/user_upload/image-e52aba17-9489-4c4d-badc-334854314873.jpg)
```js <AbsoluteLayout HorizontalOptions="CenterAndExpand"> <Image Source="creditcard.png" AbsoluteLayout.LayoutBounds="1,0,350,300" AbsoluteLayout.LayoutFlags="PositionProportional"></Image> <Label AbsoluteLayout.LayoutBounds=".10,.20,60,40" AbsoluteLayout.LayoutFlags="XProportional,YProportional" HorizontalTextAlignment="Center" TextColor="Black" Text="1111" FontAttributes="Bold"></Label> <Label AbsoluteLayout.LayoutBounds=".35,.20,60,40" AbsoluteLayout.LayoutFlags="XProportional,YProportional" HorizontalTextAlignment="Center" TextColor="Black" Text="1111" FontAttributes="Bold"></Label> <Label AbsoluteLayout.LayoutBounds=".60,.20,60,40" AbsoluteLayout.LayoutFlags="XProportional,YProportional" HorizontalTextAlignment="Center" TextColor="Black" Text="1111" FontAttributes="Bold"></Label> <Label AbsoluteLayout.LayoutBounds=".85,.20,60,40" AbsoluteLayout.LayoutFlags="XProportional,YProportional" HorizontalTextAlignment="Center" TextColor="Black" Text="1111" FontAttributes="Bold"></Label> <Label AbsoluteLayout.LayoutBounds=".20,.25,200,40" AbsoluteLayout.LayoutFlags="XProportional,YProportional" HorizontalTextAlignment="Center" TextColor="Black" Text="Nombre del dueno fantasma" FontAttributes="Bold"></Label> </AbsoluteLayout> ```![](https://i.ibb.co/RCwcH6c/1.png)
![](https://static.platzi.com/media/user_upload/image-ab52424d-4b1b-443e-81d4-8669231f6eff.jpg)

Reto cumplido

Reto

Agregue un entry para poder digitar los numeros de la tarjeta