Xamarin.Forms Layouts

Xamarin.Forms Layouts son usados para componer los controles de Interfaz de usuario en estructuras lógicas

Tipos de Layouts:

El diseño de clases en Xamarin.Forms es un subtipo especializado de Vista, que actúa como un contenedor para otros diseños o vistas. Normalmente contiene la lógica para establecer la posición y el tamaño de los elementos secundarios en aplicaciones Xamarin.Forms.

StackLayout:

StackLayout organiza vistas en una línea unidimensional ( «pila»), ya sea horizontal o verticalmente. Las Vistas en un StackLayout pueden dimensionarse en función del espacio en el diseño utilizando las opciones de diseño. El posicionamiento es determinado por el orden de la  vistas en la que se añadieron al diseño y  las  opciones del diseño de las vistas.

Propósito:

StackLayout es menos complejo que otras vistas. Interfaces lineales simple pueden ser creadas por solo añadiendo vistas al StackLayout, y crear interfaces más complejas anidándolas

Uso y comportamiento: Spacing

De forma predeterminada, StackLayout añadirá un margen 6px entre las vistas. Esto puede ser controlado o ajustando a tener ningún margen ajustando la propiedad Spacing en StackLayout. A continuación se muestra cómo establecer el espaciamiento y el efecto de las diferentes opciones de espacio.

Ejemplo:

<ContentPage.Content>
<StackLayout Spacing="0" x:Name="layout">
<Button Text="StackLayout" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<BoxView Color="Yellow" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
<BoxView Color="#EF7A0B" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
<BoxView HeightRequest="75" Color="Pink" VerticalOptions="End" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Imagen Spacing 0 y Spacing 10

Dimensionamiento

El tamaño de la vista en el StackLayout depende tanto de la altura como el ancho y de las opciones de diseño. StackLayout dispone de los siguientes parámetros de configuración:

• CenterAndExpand – Centra la vista dentro del diseño y se expande tanto como el diseño lo permita.
• EndAndExpand – Coloca la vista al final del diseño y expande tanto el diseño lo permita
• FillAndExpand – Coloca la vista de manera que no tenga relleno y se expanda tanto el diseño lo permita.
• StartAndExpand – Coloca la vista al principio del diseño y se expanda tanto como el principal lo permita.

Posicionamiento

Las Vistas en un StackLayout pueden ser posicionadas y dimensionadas usando LayoutOptions. Cada vista se puede dar VerticalOptions y HorizontalOptions. Las podemos configurar usando las siguientes opciones de diseño:

• Center – centra la vista dentro del diseño.
• End – coloca la vista al final del diseño.
• Fill – coloca la vista de manera que no tenga relleno.
• Start – coloca la vista al principio del diseño

AbsoluteLayout

AbsoluteLayout  coloca y dimensiona los elementos secundarios proporcionalmente a su propio tamaño y posición o por su valor absoluto

Propósito

Debido al modelo de posicionamiento del AbsoluteLayout, el diseño hace sea relativamente fácil de colocar los elementos de manera que son alineados con cualquier lado del diseño, o centrados. Con tamaños y posiciones proporcionados, los elementos en el AbsoluteLayout puede encajar automáticamente en cualquier tamaño de vista.

Uso : Diseños Proporcionales

AbsoluteLayout tiene un modelo único de eje, por el cual el eje del elemento está relativamente posicionado a sus elementos como sus elementos están relativamente posicionados al diseño cuando están colocados proporcionalmente. Cuando el posicionamiento absoluto es usado, el eje es de (0,0) dentro de la vista.

Valores

Las vistas dentro de un AbsoluteLayout son posicionadas usando cuatro valores:

• X – el eje x (horizontal)
• Y – el eje y (vertical)
• Width – el ancho de la vista
• Height – el alto de la vista

Cada uno de esos valores pueden ser establecidos como un valor proporcional o un valor absoluto.

AbsoluteLayoutFlags

Especifica como los valores serán interpretados y tiene las siguientes opciones predefinidas:

• None – interpreta todos los valores como absoluto.
• All – Interpreta todos los valores como proporcionales.
• WidhtProporcional – interpreta el valor del ancho como proporcional y todos los otros valores como absolutos.
• HeightProportional – interpreta solo el valor del alto como proporcional con todos los otros valores como absoluto.
• XProporcional – interpreta el valor de x como proporcional, mientras que todos los otros valores como absolutos.
• YProporcional – interpreta el valore de y como proporcional, mientras que todos los otros valores como absolutos.
• PositionProportional – interpreta los valores de x e y como proporcionales, mientras que los valores de tamaño son interpretados como absoluto.
• SizeProportional – interpreta los valores de Width y Height como proporcionales mientras que los valores de posición son absolutos.

Ejemplo:

<ContentPage.Content>
<AbsoluteLayout>
<Label Text="Centrado para Iphone 4." AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap" FontSize="10"/>
<Label Text="Centrado en cualquier dispositivo." AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All" FontSize="10" LineBreakMode="WordWrap"/>
<BoxView Color="Yellow"  AbsoluteLayout.LayoutBounds="1,.5, 25, 100" AbsoluteLayout.LayoutFlags="PositionProportional"/>
<BoxView Color="#EF7A0B" AbsoluteLayout.LayoutBounds="0,.5,25,100" AbsoluteLayout.LayoutFlags="PositionProportional"/>
<BoxView Color="Pink" AbsoluteLayout.LayoutBounds=".5,0,100,25" AbsoluteLayout.LayoutFlags="PositionProportional"/>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>

Imagen AbsoluteLayout

RelativeLayout

Es usado para la posicionar y dimensionar las vistas relativo a las propiedades del diseño.  A diferencia de AbsoluteLayout, RelativeLayout no tiene bajo concepto ejes movibles y no tiene la facilidad de posicionar elementos relativos al inferior o en bordes derechos del diseño.

Propósito

RelativeLayout puede usarse para posicionar vistas en pantalla relacionado con el diseño general o con otras dos vistas.

Uso

Posicionar y dimensionar una vista dentro de un RelativeLayout se realiza con constraints (restricciones). Una expresión constraint puede incluir la siguiente información:

• Type – si la restricción es relativa a la vista u otra vista.
• Property – cuya propiedad de uso tal como la restricción.
• Factor – el factor para aplicarse al valor de la propiedad.
• Constant – el valor a usar como compensación del valor.
• ElementName – el nombre de la vista que la restricción es relativa.

Ejemplo:

<ContentPage.Content>
<AbsoluteLayout BackgroundColor="Yellow">
<RelativeLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"  x:Name="layout" >
<BoxView x:Name="box" Color="Red" HeightRequest="50" WidthRequest="100"
RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = .1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = .1}" />
<Label x:Name="centerLabel" FontSize="30" Text="RelativeLayout" RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = .5}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor =.1}" />
</RelativeLayout>
<AbsoluteLayout AbsoluteLayout.LayoutBounds="0,1,1,50" AbsoluteLayout.LayoutFlags="PositionProportional,WidthProportional" BackgroundColor="Green">
<Button BackgroundColor="Blue" FontSize="20" TextColor="Red" Text="Move" BorderRadius="0"  AbsoluteLayout.LayoutBounds="0,1,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="moveButton" />
</AbsoluteLayout>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>

Imagen RelativeLayout

GridLayout

Grid soporta la organización de vistas en filas y columnas. Filas y columnas puede ser ajustadas a tener tamaños proporcionales o tamaños absolutos. El GridLayout no debe ser confundido con las conocidas tablas y no intenta presentar datos tabulares.  A diferencia de tablas HTML, GridLayout esta puramente destinado para trazado de contenido.

Propósito

GridLayout puede ser usado para organizar vistas dentro de una cuadrícula. Puede ser de gran utilidad en los siguientes casos:

• Organizando botones en una aplicación Calculadora.
• Organizando botones/opciones en una cuadrícula, como por ejemplo en las ventanas principales en IOS o Android.
• Organizando vistas de tal manera que sean de el mismo tamaño en una dimensión.

Usos

A diferencia de las tablas tradicionales, GridLayout no reduce el número de tamaños de filas y columnas de el contenido. En lugar de ello, GridLayout tiene un RowCollection y HeigthCollection. Estas colecciones tienen definiciones de como filas y columnas serán distribuidas. Vistas son añadidas al GridLayout con un índice detallado de filas y columnas, el cual identifica que fila y columna debe ser colocada en una vista.

Filas y Columnas

La información de Filas y Columnas están almacenados en las propiedades de RowDefinition y ColumDefinitions. Row tiene una única propiedad, Height, y Columna tiene una única propiedad, Width.

Las opciones para alto y ancho son las siguientes:

• Auto
• Proportional
• Absolute

Ejemplo:

<ContentPage.Content>
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5*" x:Name="firstRow" />
<RowDefinition Height="3*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<Column Definition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<StackLayout x:Name="s1" BackgroundColor="Aqua" Grid.Row="0" Grid.Column="0" BindingContext="{x:Reference Name=s1}"  >
<Label  Text="{Binding Path=Width}" />
<Label Text=" x " />
<Label  Text="{Binding Path=Height}" />
</StackLayout>
<StackLayout x:Name="s2" BackgroundColor="Black" Grid.Row="0" Grid.Column="1" BindingContext="{x:Reference Name=s2}">
<Label  Text="{Binding Path=Width}" />
<Label Text=" x " />
<Label  Text="{Binding Path=Height}" />
</StackLayout>
<StackLayout x:Name="s3" BackgroundColor="Gray" Grid.Row="1" Grid.Column="0" BindingContext="{x:Reference Name=s3}">
<Label  Text="{Binding Path=Width}" />
<Label Text=" x " />
<Label  Text="{Binding Path=Height}" />
</StackLayout>
<StackLayout x:Name="s4" BackgroundColor="Green" Grid.Row="1" Grid.Column="1" BindingContext="{x:Reference Name=s4}">
<Label  Text="{Binding Path=Width}" />
<Label Text=" x " />
<Label  Text="{Binding Path=Height}" />
</StackLayout>
<StackLayout x:Name="s5" BackgroundColor="Yellow" Grid.Row="2" Grid.Column="0" BindingContext="{x:Reference Name=s5}">
<Label  Text="{Binding Path=Width}" />
<Label Text=" x " />
<Label  Text="{Binding Path=Height}" />
</StackLayout>
<StackLayout x:Name="s6" BackgroundColor="Purple" Grid.Row="2" Grid.Column="1" BindingContext="{x:Reference Name=s6}">
<Label  Text="{Binding Path=Width}" />
<Label Text=" x " />
<Label  Text="{Binding Path=Height}" />
</StackLayout>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Imagen GridLayout

ScrollView

ScrollView contiene diseños y permite desplazarse. ScrollView es tambien usado para permitir a las vistas automáticamente moverse a un zona visible de la pantalla cuando el teclado esta mostrándose.

Propósito

ScrollView puede ser usado para asegurar que vistas largas se vean bien en una pantalla de móvil pequeña. Por ejemplo, un diseño que funciona en un IPhone6 puede ser recortado en un IPhone4.

 

Usos

Scrollview expone una propiedad Content el cual puede ser ajustado a una vista o diseño.

Propiedades

• Content
• ContentSize
• Orientation
• ScrollX
• ScrollY

Ejemplo:

<?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="App1.Ejemplos.Ejemplo5"
Title="ScrollView">
<ContentPage.Content>
<ScrollView>
<StackLayout>
<BoxView BackgroundColor="Green"
HeightRequest="600"
WidthRequest="150" />
<Entry />
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>

Imagen ScrollView