Especificación del tamaño de una vista

Diseñar una interfaz de usuario que sea coherente en varios dispositivos es difícil porque los dispositivos pueden tener tamaños y densidades de píxeles diferentes. Piense en los diferentes dispositivos disponibles: móvil, tableta, equipo de escritorio, etc. ¿Cómo se crea una interfaz de usuario que tenga un aspecto similar en cada uno?

.NET Multi-Platform App UI (MAUI) proporciona paneles de diseño para ayudarle a crear interfaces de usuario coherentes. El panel de diseño se encarga del ajuste de tamaño y el posicionamiento de las vistas de sus elementos secundarios. En esta unidad, aprenderá cómo funciona el sistema de diseño en .NET MAUI. En concreto, veremos cómo se cambia el tamaño de las vistas de forma predeterminada y cómo solicitar una posición y un tamaño específicos para una vista en tiempo de ejecución.

¿Qué es un panel de diseño?

Un panel de diseño es un contenedor .NET MAUI que contiene una colección de vistas secundarias y determina su tamaño y posición. Los paneles de diseño se recalculan de forma automática cuando cambia el tamaño de la aplicación; por ejemplo, cuando el usuario gira el dispositivo.

.NET MAUI tiene varios paneles de diseño entre los que puede elegir. Cada panel administra sus vistas secundarias de manera distinta. En la ilustración siguiente se muestra una descripción general conceptual de algunas de las opciones más comunes.

• StackLayout: organiza sus vistas secundarias en una sola fila o columna. Además de StackLayout, también hay VerticalStackLayout y HorizontalStackLayout optimizados nuevos cuando no es necesario cambiar la orientación.
• AbsoluteLayout: organiza sus vistas secundarias utilizando coordenadas x e y.
• Grid: organiza sus vistas secundarias en celdas que se crean por la intersección de filas y columnas.
• FlexLayout: organiza sus vistas secundarias como una StackLayout, excepto que puede ajustarlas si no caben en una sola fila o columna.

El proceso típico para crear una página .NET MAUI es crear un panel de diseño y, a continuación, agregarle vistas secundarias. Cuando se agrega una vista a un diseño, se puede modificar su tamaño y su posición. Pero el panel tiene la última palabra en función de sus algoritmos de diseño internos.

Antes de ver cómo solicitar un tamaño específico para una vista, examinaremos cómo el sistema de diseño cambia el tamaño de las vistas de forma predeterminada.

Tamaño predeterminado de una vista

Si no se especifica el tamaño de una vista, esta crece automáticamente hasta ser exactamente lo suficientemente grande como para ajustarse alrededor de su contenido. Por ejemplo, considere este lenguaje XAML:

<Label
    Text="Hello"
    BackgroundColor="Silver"
    VerticalOptions="Center"
    HorizontalOptions="Center" 
    FontSize="40"/>

En este ejemplo se define una etiqueta para mostrar la palabra Hello sobre un fondo plateado. Dado que no se especifica el tamaño, la etiqueta se ajusta automáticamente alrededor de la palabra Hello. La imagen siguiente muestra la etiqueta representada en un dispositivo Android:

Especificación del tamaño de una vista

Al compilar una interfaz de usuario, es habitual querer controlar el tamaño de una vista. Por ejemplo, imagine que va a crear una página de inicio de sesión y quiere que el botón de inicio de sesión tenga exactamente la mitad del ancho de la pantalla. Si ha usado el tamaño predeterminado para una vista, el botón solo tendría el tamaño del texto Iniciar sesión. Ese tamaño no es lo suficientemente grande, por lo que debe especificar el tamaño usted mismo.

La clase base View define dos propiedades que influyen en el tamaño de una vista: WidthRequest y HeightRequest. WidthRequest permite especificar el ancho y HeightRequest el alto. Las dos propiedades son de tipo double.

Este es un ejemplo en el que se muestra cómo especificar el ancho y el alto de una etiqueta en XAML:

<Label
    Text="Hello"
    BackgroundColor="Silver"
    VerticalOptions="Center"
    HorizontalOptions="Center"
    WidthRequest="100"
    HeightRequest="300"
    FontSize="40"/>

El resultado tiene el aspecto siguiente:

Un aspecto que conviene destacar son los nombres de estas propiedades. Las dos propiedades contienen la palabra request (solicitud). Esta palabra significa que es posible que el panel de diseño no las respete en tiempo de ejecución. El panel de diseño lee estos valores durante sus cálculos de tamaño e intenta acomodar las solicitudes si puede. Si no hay espacio suficiente, el panel de diseño tiene permiso para ignorar los valores.

Unidades de tamaño

Al establecer WidthRequest y HeightRequest, se usan valores literales como 100. En el nivel de .NET MAUI estos valores no tienen unidades. No son puntos ni píxeles. Son solo valores de tipo double. .NET MAUI pasa estos valores al sistema operativo subyacente en tiempo de ejecución. El sistema operativo es el que proporciona el contexto necesario para determinar qué significan los números:

• En iOS los valores se denominan puntos.
• En Android, son píxeles independientes de la densidad.

Tamaño representado de una vista

Como es decisión del panel de diseño determinar el tamaño de una vista, no se puede usar WidthRequest y HeightRequest para indicar el tamaño real en tiempo de ejecución. Por ejemplo, imagine que establece WidthRequest en 100 para la etiqueta, pero el panel no tiene espacio suficiente para satisfacer la solicitud. En su lugar, el panel proporciona un ancho de 80 a la etiqueta. En este punto, si comprueba el valor de la propiedad WidthRequest, pone 100 aunque el valor representado es 80.

Para resolver este problema, la clase base View define otras dos propiedades, llamadas Width y Height. Estas propiedades son de tipo double y representan el ancho y el alto representados de una vista. Use las propiedades Width y Height siempre que recupere el tamaño de una vista.

Especificación de la posición de una vista

También tendrá que establecer la posición de una vista. Por ejemplo, recuerde que, en el ejemplo de la página de inicio de sesión, quería cambiar el tamaño del botón de inicio de sesión para que fuera la mitad del ancho de la pantalla. Dado que el botón de inicio de sesión no tiene el ancho completo de la pantalla, hay algo de espacio disponible para moverlo. Puede colocarlo en el lado izquierdo, en el lado derecho o en el centro de la pantalla.

La clase base View tiene dos propiedades que se usan para establecer la posición de una vista: VerticalOptions y HorizontalOptions. Estas opciones afectan al posicionamiento de la vista dentro del rectángulo que le asigna el panel de diseño. Puede especificar que quiere que la vista se alinee con uno de los cuatro bordes del rectángulo, o que ocupe todo el rectángulo.

Especificar un valor para VerticalOptions o HorizontalOptions es más complicado que establecer el tamaño, ya que estas propiedades son de tipo LayoutOptions.

¿Qué es el tipo LayoutOptions?

LayoutOptions es un tipo de C# que encapsula dos preferencias de diseño: Alignment y Expands. Las dos propiedades están relacionadas con el posicionamiento, pero no están relacionadas entre sí. La definición del tipo tiene este aspecto:

public struct LayoutOptions
{
    public LayoutAlignment Alignment { get; set; }
    public bool Expands { get; set; }
    ...
}

A continuación, veremos más detenidamente Alignment, ya que es la opción de diseño más común e intuitiva.

¿Qué es la enumeración LayoutAlignment?

LayoutAlignment es una enumeración que contiene cuatro valores: Start, Center, End y Fill. Puede usar estos valores para controlar cómo se coloca la vista secundaria dentro del rectángulo que le ha asignado su panel de diseño. Por ejemplo, tenga en cuenta la siguiente captura de pantalla de código y Android:

<StackLayout>
    <Label Text="Start" HorizontalOptions="Start" BackgroundColor="Silver" FontSize="40" />
    <Label Text="Center" HorizontalOptions="Center" BackgroundColor="Silver"  FontSize="40" />
    <Label Text="End" HorizontalOptions="End" BackgroundColor="Silver"  FontSize="40"/>
    <Label Text="Fill" HorizontalOptions="Fill" BackgroundColor="Silver"  FontSize="40"/>
</StackLayout>

En el ejemplo se usa una StackLayout vertical para que a cada vista secundaria se le proporcione una fila. HorizontalOptions determina la posición de la vista dentro de su fila.

¿Qué es Expands?

La segunda propiedad de la estructura LayoutOptions es Expands. La propiedad Expands es un bool que en Xamarin.Forms permitió que una vista solicitara de un StackLayout espacio adicional si hay alguno disponible. Esta propiedad está obsoleta y ya no se usa en .NET MAUI. Más tarde, explorará cómo lograr el mismo tipo de expansión en la unidad sobre el diseño Grid.