Tipos de Layouts
En este Post se muestran y explican cinco ejemplos de tipos de layouts utilizados en Xamarin Forms. Layout se podría entender en español como “disposición”, y es así como se puede interpretar en el ámbito de la programación. Como un esquema de distribución de los elementos en el diseño de la aplicación, entendiéndose así como el cuerpo de esta, cuerpo a partir del cual tendrá su contenido específico.
Primero explicare un poco los diferentes tipos de layouts que se suelen utilizar para Xamarin Forms, tras esto explicare los pasos a seguir para realizar un proyecto en el que se expondrán las layouts que explicare a continuación.
StackLayout
Este tipo de layout es el más sencillo y básico, ya que coloca los elementos en una pila horizontal o vertical, basándose así en la propiedad Orientation. Otra propiedad también muy utilizada con este tipo de layout es Spacing, propiedad encargada de controlar el espaciado entre elementos.
Al tratarse de un elemento de uso sencillo, permite poder alinear los diferentes componentes, ya que este se puede alinear al centro, inició o final del diseño principal.
ScrollView
Tipo de layout capaz de desplazar el contenido, como su propio nombre indica permite hacer Scroll. Siendo esto la posibilidad de movernos por el contenido de la vista de una forma muy sencilla, cuando el contenido de esta vista sea demasiado grande. Este elemento suele tener en su interior un StackLayout, para poder posicionar sus elementos.
La propiedad principal utilizada para el ScrollView es Orientation, propiedad que permite indicar como se puede desplazar el contenido de la vista, pudiendo ser vertical, horizontal o ambos.
FrameView
Este layout es simple, pues lo que hace es mostrar un marco rectangular alrededor de sus elementos secundarios.
Las propiedades más utilizadas son OutlineColor, CornerRadius y HasShadow. OutlineColor establece el color del borde del marco que rodea a los elementos secundarios. CornerRadius marca el radio de redondeo del marco, de las esquinas del rectángulo. HasShadow, fija una marca que indica si el marco tiene una sombra se pueda mostrar.
FlexLayout
Este se podría considerar la nueva versión de StackLayout. Pues sus elementos se pueden organizar de forma horizontal y vertical en una pila. No obstante, el FlexLayout también permite ajustar sus elementos secundarios, en caso de haber demasiados como para caber en una sola fila o columna, y también tiene muchas opciones para adaptarse a diversos tamaños de pantalla, la alineación y la orientación.
Algunas de las propiedades más empleadas en este tipo de layouts son JustifyConent, AlignItems y AlignContent. El primero se encarga de determinar cómo están dispuestos los elementos a lo largo del eje principal. AlignItems especifica como los componentes están posicionados a lo largo del eje cruzado, y AlignContent es similar, pero en este caso se aplica a todas las filas o columnas.
AbsoluteLayout
Este tipo de vistas posiciona los elementos secundarios en ubicaciones específicas en función de su elemento primario. Debido a que los elementos se pueden posicionar de forma sencilla, y que estos redimensionan su tamaño, permite poder alinearlos con cualquier lado del diseño. Un AbsoluteLayout es útil para animar las posiciones de las vistas.
Los atributos utilizados principalmente con AbsoluteLayout son LayoutBounds y LayoutFlags. Permitiendo así establecer límites y marcas en el diseño de las vistas utilizando LayoutBounds. Por otro lado, LayoutFlags se encarga de establecer los límites especificados en la declaración de vistas.
Una vez realizada esta breve explicación sobre los diferentes tipos de layouts, pasamos a la explicación de cómo realizar un proyecto en el que podremos ver estos layouts. Para esto lo primero que deberemos de hacer será crear un proyecto, debiendo así seguidamente seleccionar un proyecto de tipo Xamarin Forms.
Cuando ya se haya creado todo el proyecto, empezamos a crear las vistas en las que se podrán ver los ejemplos. Para tener los elementos ordenados, creamos una carpeta donde almacenaremos las vistas, y en esta empezamos a crearlas. Los códigos empleados en las vistas son los siguientes:
StackLayout
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TiposDeLayoutsPV.XamlViews.StackLayoutView">
<ContentPage.Content>
<StackLayout>
<Label Text="Inicio" HorizontalOptions="Start" />
<Label Text="Centro" HorizontalOptions="Center" />
<Label Text="Final" HorizontalOptions="End" />
<Label Text="Bloque" FontSize="35"
HorizontalOptions="CenterAndExpand"
VerticalOptions="Center"
BackgroundColor="Blue"/>
<Label Text="Bloque" FontSize="35"
HorizontalOptions="EndAndExpand"
VerticalOptions="End"
BackgroundColor="Yellow"/>
<Label Text="Bloque" FontSize="35"
HorizontalOptions="FillAndExpand"
VerticalOptions="Fill"
BackgroundColor="GreenYellow"/>
<Label Text="Bloque" FontSize="35"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Red"/>
<StackLayout Spacing="0" Orientation="Horizontal">
<Label Text="Tipos de" />
<Label Text="Layouts" HorizontalOptions="CenterAndExpand" />
<Label Text="StackLayout." />
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>ScrollView
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TiposDeLayoutsPV.XamlViews.ScrollViewPage">
<ContentPage.Content>
<StackLayout Margin="0, 35, 0, 0">
<Label Text="ScrollView" FontSize="35" HorizontalOptions="CenterAndExpand" />
<ScrollView VerticalOptions="FillAndExpand">
<Label FontSize="35" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>
</ScrollView>
</StackLayout>
</ContentPage.Content>
</ContentPage>FrameView
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TiposDeLayoutsPV.XamlViews.FrameView">
<ContentPage.Content>
<StackLayout>
<Label Text="FrameView" FontSize="35" HorizontalOptions="CenterAndExpand" />
<Frame BorderColor="GreenYellow" CornerRadius="25"
OutlineColor="Accent"
HasShadow="True" HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<Label FontSize="25" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>
</Frame>
</StackLayout>
</ContentPage.Content>
</ContentPage>FlexLayout
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TiposDeLayoutsPV.XamlViews.FlexLayoutView">
<ContentPage.Content>
<StackLayout>
<Label Text="FlexLayout" FontSize="35" HorizontalOptions="CenterAndExpand" />
<FlexLayout AlignItems="Center"
Direction="Column"
JustifyContent="Start"
BackgroundColor="LightYellow">
<Label Text="Mi perfil"/>
<Image Source="https://files.merca20.com/uploads/2016/03/foto-perfil-facebook.jpg"
WidthRequest="200" HeightRequest="200"/>
<Label Text="Información sobre mi perfil"/>
<Label Text="Más información sobre mi perfil" />
<Label Text="Aun más información sobre mi perfil" />
<Button Text="Más información" HorizontalOptions="FillAndExpand"/>
</FlexLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>AbsoluteLayout
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TiposDeLayoutsPV.XamlViews.AbsoluteLayoutView">
<ContentPage.Content>
<StackLayout>
<Label Text="AbsoluteLayout" FontSize="35" HorizontalOptions="CenterAndExpand" />
<AbsoluteLayout BackgroundColor="MediumPurple" VerticalOptions="FillAndExpand">
<Label x:Name="text1"
Text="AbsoluteLayout"
TextColor="Black"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0, 0, 150, 150"/>
<BoxView AbsoluteLayout.LayoutBounds="200, 200, 100, 25" BackgroundColor="Fuchsia"/>
</AbsoluteLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>Con las vistas creadas, vamos a organizar una serie de botones en la vista principal, en el MainPage. Con estos botones podremos navegar fácilmente entre los diferentes ejemplos. El código empleado en esta vista es este:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TiposDeLayoutsPV"
x:Class="TiposDeLayoutsPV.MainPage">
<StackLayout Margin="0, 35, 0, 0">
<Button Text="StackLayout" x:Name="botonstack"/>
<Button Text="Frame" x:Name="botonframe"/>
<Button Text="FlexLayout" x:Name="botonflex"/>
<Button Text="AbsoluteLayout" x:Name="botonabsolute"/>
<Button Text="ScrollView" x:Name="botonscroll"/>
</StackLayout>
</ContentPage>
Con esto ya dispondríamos de todo el diseño de nuestras vistas, con lo que pasamos a las funciones que utilizaremos en el MainPage.xaml.cs.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using TiposDeLayoutsPV.XamlViews;
using Xamarin.Forms;
namespace TiposDeLayoutsPV {
public partial class MainPage : ContentPage {
public MainPage() {
InitializeComponent();
this.botonstack.Clicked += async (sender, args) => await Navigation.PushModalAsync(new StackLayoutView());
this.botonscroll.Clicked += async (sender, args) => await Navigation.PushModalAsync(new ScrollViewPage());
this.botonframe.Clicked += async (sender, args) => await Navigation.PushModalAsync(new FrameView());
this.botonflex.Clicked += async (sender, args) => await Navigation.PushModalAsync(new FlexLayoutView());
this.botonabsolute.Clicked += async (sender, args) => await Navigation.PushModalAsync(new AbsoluteLayoutView());
}
}
}Con estas funciones lo que establecemos es que al clicar sobre un botón nos mandara hasta la vista establecida. Y ya, con esto podrás visualizar todos los ejemplos de los tipos de layouts.
No deberías de encontrar ningún problema si sigues estos pasos y empleas estos códigos. Con estos diseños te invito a investigar y probar diferentes diseños, pues pueden dar mucho juego a tus aplicaciones. En la parte baja del post encontraras dos enlaces, uno de ellos te llevara a GitHub, donde podrás descargar el código de este proyecto. El otro te permitirá ver un video donde se muestran tanto el código de este proyecto como las vistas de los tipos de layouts en acción.
Autor: Tomás Serrano Mata
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2018-2019