Elegir un Xamarin.Forms diseño

  • Artículo
  • 9 minutos para leer

Ejemplo de descarga Descarga del 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 conocimiento de cómo el diseño coloca sus elementos secundarios y cómo el diseño tamaño sus elementos secundarios. Además, puede ser necesario anidar diseños para crear el diseño deseado.

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

Xamarin.Forms layout classes" data-linktype="relative-path">The main layout classes in <span class=Xamarin.Forms The main layout classes in <span class= " title=" Xamarin.Forms layout classes" data-linktype="relative-path"/>

StackLayout

organiza StackLayout los elementos en una pila unidimensional, ya sea horizontal o verticalmente. La Xamarin_Forms _StackLayout_Orientation" data-linktype="absolute-path">Orientation 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 una vertical StackLayout que contiene 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 , si el tamaño de un elemento no se establece explícitamente, se expande para rellenar el ancho o alto disponibles si la propiedad StackLayoutStackLayout data-linktype="absolute-path">de Xamarin_Forms _StackLayout_Orientation" está Orientation establecida en Horizontal .

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

<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 , asegúrese de que solo un elemento secundario está establecido en StackLayout Xamarin_Forms StackLayout _LayoutOptions_Expands" data-linktype="absolute-path">LayoutOptions.Expands . 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, vea Xamarin.Forms StackLayout.

Cuadrícula

Se Grid 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 Xamarin_Forms _Grid_RowDefinitions" data-linktype="absolute-path">RowDefinitions and Xamarin_Forms RowDefinitions _Grid_ColumnDefinitions" data-linktype="absolute-path">ColumnDefinitions properties.

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

Nota:

Un Grid diseño no debe confundirse con las tablas y no está diseñado para presentar datos tabulares. A diferencia de las tablas HTML, Grid un objeto está pensado para la colocación de contenido. Para mostrar datos tabulares, considere la posibilidad de usar listView,CollectionViewo TableView.

En el código XAML siguiente se muestra cómo crear Grid un elemento 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 tamaño funciona de la siguiente manera:

El espacio se puede distribuir dentro de una columna o fila mediante el ajuste de tamaño automático, que permite que el tamaño de las columnas y filas se ajuste a su contenido. Esto se consigue estableciendo el alto de , o el ancho de , en RowDefinitionColumnDefinition Xamarin_Forms RowDefinition _GridLength_Auto" data-linktype="absolute-path">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 un , o el ancho RowDefinition de , en un valor que usa el operador ColumnDefinition* .

Precaución

Intente asegurarse de que el número de filas y columnas que sea posible se establezca en Xamarin_Forms _GridLength_Auto" data-linktype="absolute-path">Auto size. 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 valor de enumeración Xamarin_Forms _GridUnitType_Star" data-linktype="absolute-path">. GridUnitType.Star

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

FlexLayout

Es similar a en que muestra elementos secundarios FlexLayoutStackLayout horizontal o verticalmente en una pila. Sin embargo, 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 pormenorizados del tamaño, la orientación y la alineación de sus FlexLayout elementos secundarios.

El código XAML siguiente 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:

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

RelativeLayout

se RelativeLayout usa para colocar y cambiar el tamaño de los elementos en relación con las propiedades del diseño o los elementos relacionados. De forma predeterminada, un elemento se coloca en la esquina superior izquierda del diseño. Se RelativeLayout puede usar para crear URI que se escalan proporcionalmente entre tamaños de dispositivo.

Dentro de RelativeLayout , las posiciones y los tamaños se especifican como restricciones. Las restricciones tienen Xamarin_Forms _ConstraintExpression_Factor" data-linktype="absolute-path">Factor and Xamarin_Forms Factor _ConstraintExpression_Constant" data-linktype="absolute-path">Constant properties, 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:

admite RelativeLayout 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 tiene 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 tiene un tamaño explícito de 50 x 50 unidades independientes del dispositivo. Se coloca en la esquina superior derecha del diseño.
  • El gris tiene un ancho explícito de 15 unidades independientes del dispositivo y su alto se establece en el 75 % del alto de BoxView su elemento primario.
  • El verde BoxView no tiene un tamaño explícito. Su posición se establece en relación con BoxView el 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

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

Debe considerarse como un diseño de propósito especial que solo se debe usar 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 AbsoluteLayout 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 evitar que el usuario interactúe 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 , la propiedad adjunta se usa para especificar la AbsoluteLayoutAbsoluteLayout.LayoutBounds posición horizontal, la posición vertical, el ancho y el alto de un elemento. Además, la propiedad adjunta especifica cómo se interpretarán los AbsoluteLayout.LayoutFlags límites de diseño.

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

<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:

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

Precaución

Evite usar la propiedad Xamarin_Forms _AbsoluteLayout_AutoSize" data-linktype="absolute-path">siempre que sea posible, ya que hará que el motor de diseño realice cálculos de diseño AbsoluteLayout.AutoSize adicionales.

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

Transparencia de entrada

Cada elemento visual tiene una propiedad Xamarin_Forms _VisualElement_InputTransparent" data-linktype="absolute-path">que se usa para definir si el elemento recibe InputTransparent entrada. Su valor predeterminado es false , lo que garantiza que el elemento recibe la entrada.

Cuando esta propiedad se establece en una clase de diseño, su valor se transfiere a los elementos secundarios. Por lo tanto, al establecer la propiedad Xamarin_Forms _VisualElement_InputTransparent" data-linktype="absolute-path">en una clase de diseño, todos los elementos del diseño no recibirán InputTransparenttrue 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.