Elegir un Xamarin.Forms diseño

  • Artículo

Descargar ejemploDescargar el ejemplo

Xamarin.Forms Las clases de diseño permiten organizar y agrupar controles de interfaz de usuario en la aplicación. La elección de una clase de diseño requiere conocimientos sobre cómo coloca el diseño sus elementos secundarios y cómo el diseño ajusta el tamaño de sus elementos secundarios. Además, puede ser necesario anidar diseños para crear el diseño deseado.

En la imagen siguiente se muestran diseños típicos que se pueden lograr con las clases de diseño principales Xamarin.Forms :

diseño Las clases de diseño principales de Xamarin.Forms

StackLayout

Un StackLayout organiza los elementos de una pila unidimensional, ya sea horizontal o verticalmente. La Orientation propiedad especifica la dirección de los elementos y la orientación predeterminada es Vertical. StackLayout normalmente se usa para organizar una subsección de la interfaz de usuario en una página.

En el código XAML siguiente se muestra cómo crear un objeto vertical StackLayout que contenga tres Label objetos:

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

En , StackLayoutsi el tamaño de un elemento no se establece explícitamente, se expande para rellenar el ancho disponible o el alto si la Orientation propiedad está establecida Horizontalen .

A StackLayout menudo se usa como diseño primario, que contiene otros diseños secundarios. Sin embargo, StackLayout no se debe usar para reproducir un Grid diseño mediante una combinación de StackLayout objetos . En el código siguiente se muestra un ejemplo de esta práctica incorrecta:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Es una pérdida de tiempo porque se realizan cálculos de diseño innecesarios. En su lugar, el diseño deseado se puede lograr mejor mediante un Grid.

Sugerencia

Al usar un StackLayout, asegúrese de que solo un elemento secundario esté establecido LayoutOptions.Expandsen . Esta propiedad garantiza que el elemento secundario especificado ocupa el mayor espacio que el StackLayout puede asignarle y es poco rentable realizar estos cálculos más de una vez.

Para obtener más información, consulte Xamarin.Forms StackLayout.

Cuadrícula

Grid Se usa para mostrar elementos en filas y columnas, que pueden tener tamaños proporcionales o absolutos. Las filas y columnas de una cuadrícula se especifican con las RowDefinitions propiedades y ColumnDefinitions .

Para colocar elementos en celdas específicas Grid , use las Grid.Column propiedades adjuntas y Grid.Row . Para que los elementos abarquen varias filas y columnas, use las Grid.RowSpan propiedades adjuntas y Grid.ColumnSpan .

Nota

Un Grid diseño no debe confundirse con las tablas y no está pensado para presentar datos tabulares. A diferencia de las tablas HTML, está Grid pensada para diseñar contenido. Para mostrar datos tabulares, considere la posibilidad de usar un control ListView, CollectionView o TableView.

En el código XAML siguiente se muestra cómo crear un objeto Grid con dos filas y dos columnas:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

En este ejemplo, el ajuste de tamaño funciona de la siguiente manera:

  • Cada fila tiene un alto explícito de 50 unidades independientes del dispositivo.
  • El ancho de la primera columna se establece Autoen y, por tanto, es tan ancho como sea necesario para sus elementos secundarios. En este caso, es de 200 unidades independientes del dispositivo para acomodar el ancho del primer Label.

El espacio se puede distribuir dentro de una columna o fila mediante el ajuste de tamaño automático, lo que permite que las columnas y el tamaño de las filas se ajusten a su contenido. Esto se logra estableciendo el alto de , RowDefinitiono el ancho de un ColumnDefinition, en Auto. El ajuste de tamaño proporcional también se puede usar para distribuir el espacio disponible entre las filas y columnas de la cuadrícula por proporciones ponderadas. Esto se logra estableciendo el alto de , RowDefinitiono el ancho de un ColumnDefinition, en un valor que usa el * operador .

Precaución

Intente asegurarse de que el tamaño de las pocas filas y columnas posibles.Auto Cada fila o columna de tamaño automático hará que el motor de diseño tenga que realizar cálculos de diseño adicionales. En su lugar, use filas y columnas de tamaño fijo si es posible. Como alternativa, establezca filas y columnas para ocupar una cantidad proporcional de espacio con el GridUnitType.Star valor de enumeración.

Para obtener más información, vea Xamarin.Forms Grid.

FlexLayout

Es FlexLayout similar a en StackLayout que muestra elementos secundarios horizontal o verticalmente en una pila. Sin embargo, un FlexLayout también puede encapsular sus elementos secundarios si hay demasiados para caber en una sola fila o columna, y también permite un control más granular del tamaño, la orientación y la alineación de sus elementos secundarios.

En el código XAML siguiente se muestra cómo crear un FlexLayout objeto que muestra sus vistas en una sola columna:

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

En este ejemplo, el diseño funciona de la siguiente manera:

  • La Direction propiedad se establece Columnen , lo que hace que los elementos secundarios del FlexLayout objeto se organicen en una sola columna de elementos.
  • La AlignItems propiedad se establece Centeren , lo que hace que cada elemento se centre horizontalmente.
  • La JustifyContent propiedad se establece SpaceEvenlyen , que asigna todo el espacio vertical restante de forma equitativa entre todos los elementos, y por encima del primer elemento, y por debajo del último elemento.

Para obtener más información, consulte Xamarin.Forms FlexLayout.

RelativeLayout

RelativeLayout Se usa para colocar y cambiar el tamaño de los elementos relativos a las propiedades de los elementos del diseño o del mismo nivel. De forma predeterminada, un elemento se coloca en la esquina superior izquierda del diseño. RelativeLayout Se puede usar para crear interfaces de usuario que se escalan proporcionalmente entre tamaños de dispositivo.

Dentro de , RelativeLayoutlas posiciones y los tamaños se especifican como restricciones. Las restricciones tienen Factor propiedades y Constant , que se pueden usar para definir posiciones y tamaños como múltiplo (o fracciones) de propiedades de otros objetos, además de una constante. Además, las constantes pueden ser negativas.

Nota

Un RelativeLayout admite la colocación de elementos fuera de sus propios límites.

En el código XAML siguiente se muestra cómo organizar elementos en :RelativeLayout

<RelativeLayout>
    <BoxView Color="Blue"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView Color="Red"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.85}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView x:Name="pole"
             Color="Gray"
             WidthRequest="15"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.75}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.45}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.25}" />
    <BoxView Color="Green"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.10, Constant=10}"
             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.2, Constant=20}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=X, Constant=15}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=Y, Constant=0}" />
</RelativeLayout>

En este ejemplo, el diseño funciona de la siguiente manera:

  • El azul BoxView recibe un tamaño explícito de 50 x 50 unidades independientes del dispositivo. Se coloca en la esquina superior izquierda del diseño, que es la posición predeterminada.
  • El rojo BoxView recibe un tamaño explícito de 50x50 unidades independientes del dispositivo. Se coloca en la esquina superior derecha del diseño.
  • El gris BoxView tiene un ancho explícito de 15 unidades independientes del dispositivo y su alto se establece en un 75 % del alto de su elemento primario.
  • El color verde BoxView no tiene un tamaño explícito. Su posición se establece en relación con el BoxView objeto denominado pole.

Advertencia

Evite el uso de un RelativeLayout siempre que sea posible. Como resultado, la CPU tendrá que realizar mucho más trabajo.

Para obtener más información, vea Xamarin.Forms RelativeLayout.

AbsoluteLayout

AbsoluteLayout se usa para colocar y ajustar el tamaño de los elementos mediante valores explícitos o valores relativos al tamaño del diseño. La posición se especifica mediante la esquina superior izquierda del elemento secundario en relación con la esquina superior izquierda de .AbsoluteLayout

Debe AbsoluteLayout considerarse como un diseño de propósito especial que se usará solo cuando se puede imponer un tamaño a los elementos secundarios, o cuando el tamaño del elemento no afecta al posicionamiento de otros elementos secundarios. Un uso estándar de este diseño es crear una superposición, que cubre la página con otros controles, quizás para proteger al usuario de interactuar con los controles normales de la página.

Importante

Las propiedades HorizontalOptions y VerticalOptions no tienen ningún efecto en los elementos secundarios de un AbsoluteLayout.

Dentro de , AbsoluteLayoutla AbsoluteLayout.LayoutBounds propiedad adjunta se usa para especificar la posición horizontal, la posición vertical, el ancho y el alto de un elemento. Además, la AbsoluteLayout.LayoutFlags propiedad adjunta especifica cómo se interpretarán los límites de diseño.

En el código XAML siguiente se muestra cómo organizar elementos en un AbsoluteLayoutobjeto :

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

En este ejemplo, el diseño funciona de la siguiente manera:

  • A cada BoxView uno se le asigna un tamaño explícito de 100 x 100 y se muestra en la misma posición, centrada horizontalmente.
  • El rojo BoxView gira 30 grados y el verde BoxView gira 60 grados.
  • En cada BoxView, la AbsoluteLayout.LayoutFlags propiedad adjunta se establece PositionProportionalen , lo que indica que la posición es proporcional al espacio restante después de que se tenga en cuenta el ancho y el alto.

Precaución

Evite usar la AbsoluteLayout.AutoSize propiedad siempre que sea posible, ya que hará que el motor de diseño realice cálculos de diseño adicionales.

Para obtener más información, vea Xamarin.Forms AbsoluteLayout.

Transparencia de entrada

Cada elemento visual tiene una InputTransparent propiedad que se usa para definir si el elemento recibe la entrada. Su valor predeterminado es false, asegurándose de que el elemento recibe la entrada.

Cuando esta propiedad se establece en una clase de diseño, su valor se transfiere a elementos secundarios. Por lo tanto, establecer la InputTransparent propiedad true en en una clase de diseño dará lugar a que todos los elementos del diseño no reciban la entrada.

Rendimiento del diseño

Para obtener el mejor rendimiento de diseño posible, siga las instrucciones de Optimización del rendimiento del diseño.

Además, el rendimiento de la representación de páginas también se puede mejorar mediante la compresión de diseño, que quita los diseños especificados del árbol visual. Para obtener más información, vea Compresión de diseño.