Nativescript Spanish: Layouts en Nativescript

En las aplicaciones para dispositivos móviles, la experiencia del usuario usando la aplicación es una parte fundamental del éxito de ésta. La funcionalidad es muy importante, pero hoy día existen muchas aplicaciones que hacen casi lo mismo, y lo único que distingue a unas de otras (y que es lo que hace decidir a los usuarios) es la interfaz de usuario.
Cada pantalla de la aplicación tendrá una estructura, dependiendo de la funcionalidad de esa pantalla y de la información que presenta al usuario. Un formulario sitúa un elemento encima de otro (en filas), una lista de elementos tiene un scroll si el número de elementos sobrepasa el alto de la pantalla, una gráfica ocupará el máximo sitio disponible para que se pueda visualizar sin problemas, datos tabulares se muestran en filas y columnas, etc, etc.
Nativescript permite organizar los elementos en la pantalla mediante los denominados Layouts. Un Layout es un elemento de interfaz de usuario que se pone en el fichero XML de la pantalla y que no se muestra en el dispositivo. Sin embargo, aunque no se muestre en pantalla, es capaz de organizar a todos sus elementos hijos (otros elementos de UI, incluidos otros layouts) de una forma determinada; cada tipo de layout organiza a sus hijos de una forma.
Existen cinco tipos de layouts en Nativescript:

StackLayout
GridLayout
WrapLayout
DockLayout
AbsoluteLayout

Resolución, pixels, dp, dpi, ...

Antes de entrar en los distintos layouts, es conveniente explicar (o recordar) cómo se miden los objetos en la pantalla de un dispositivo.

Resolución: es la medida del número de pixels en la pantalla. Normalmente se define como width x height, o sea, el número de pixels en el ancho de la pantalla y el número de pixels en el alto de la pantalla.
dpi, pixels por pulgada: es el número de pixels que hay en cada pulgada de la pantalla. Todos los dispositivos tienen el mismo valor de dpi en horizontal y en vertical (es decir, los pixels son cuadrados), por tanto, sólo se da un número de dpi para un dispositivo (en lugar de uno para horizontal y otro para vertical).
dp, pixels independientes del dispositivo: tal y como se explica aquí, los dp permiten definir las dimensiones de un dispositivo sin mencionar su tamaño físico. 160 dp corresponden a una pulgada en cualquier dispositivo.

AbsoluteLayout

Este layout es el más sencillo de entender, pero también el que menos se utiliza. ¿Por qué? Porque una aplicación se diseña para adaptarse a diversos tamaños de pantalla, y este layout, al situar los elementos en posiciones fijas, no tiene mucha versatilidad para adaptarse a los distintos tamaños.
AbsoluteLayout utiliza las coordenadas left,top de sus elementos hijos para situarlos. Cuando el layout cambiar de tamaño, no cambiará la posición ni el tamaño de sus hijos.
AbsoluteLayout no tiene ningún atributo.
Los hijos de este layout tienen que especificar los siguientes atributos:

left: distancia en pixels desde el lado izquierdo del AbsoluteLayout hasta el lado izquierdo del elemento hijo.
top: distancia en pixels desde el lado superior del AbsoluteLayout hasta el lado superior del elemento hijo.

Los elementos hijos pueden definir además los atributos width y height.
Los elementos hijos se podrían solapar unos encima de otros (en función de left, top, width y height).
Ejemplo:

<Page xmlns="http://schemas.nativescript.org/tns.xsd"> <AbsoluteLayout width="210" height="210" style.backgroundColor="lightgray"> <Label text="10, 10" left="10" top="10" width="90" height="90" backgroundColor="red"/> <Label text="110, 10" left="110" top="10" width="90" height="90" backgroundColor="green"/> <Label text="110, 110" left="110" top="110" width="90" height="90" backgroundColor="blue"/> <Label text="10, 110" left="10" top="110" width="90" height="90" backgroundColor="yellow"/> </AbsoluteLayout> </Page>

DockLayout

Este layout permite situar a sus hijos en cinco posiciones:

left
top
right
bottom
center

No es necesario utilizar los cinco hijos. También se pueden situar varios hijos en una misma posición.
Para definir la posición de un hijo, se utiliza el atributo dock del elemento hijo, el cual puede valer "left", "top", "right" o "bottom". Si no se pone este atributo, se utilizará la posición central.
El elemento en la posición central se debe definir en último lugar, y el atributo stretchLastChild de AbsoluteLayout debe valer "true".
Propiedades de absoluteLayout:

stretchLastChild: indica si el último elemento hijo (sin atributo dock) debe ocupar el espacio restante o no. El valor por defecto es "true".

Propiedades de los elementos hijos:

dock: especifica la posición dentro del DockLayout (left, top, right, bottom).

Ejemplo:

<Page xmlns="http://schemas.nativescript.org/tns.xsd"> <DockLayout width="210" height="210" style.backgroundColor="lightgray" stretchLastChild="true"> <Label text="left" dock="left" backgroundColor="red"/> <Label text="top" dock="top" backgroundColor="green"/> <Label text="right" dock="right" backgroundColor="blue"/> <Label text="bottom" dock="bottom" backgroundColor="yellow"/> </DockLayout> </Page>

GridLayout

Este layout organiza a sus elementos hijos en filas y columnas: celdas. Una celda puede contener varios hijos, un hijo puede expandirse a varias filas y/o columnas. Por defecto, GridLayout tiene una sola fila y una sola columna (o sea, una celda), y para definir más filas y columnas tenemos que utilizar los atributos rows y columns de GridLayout. El ancho de una columna se puede definir como un tamaño absoluto en pixels, como un porcentaje del ancho total, o bien automático. Igual para definir el alto de una fila:

absolute: tamaño fijo en pixels (es un número)
auto: toma el espacio que necesiten los elementos hijos
*: toma el espacio restante después de haber utilizado absolute y auto. Permite especificar proporciones, por ejemplo: 2*, 3*

En resumen, y para el caso de las columnas. Disponemos de un ancho total (que es el ancho del GridLayout). En primer lugar se toman las definiciones de columnas de tipo absolute, luego se usan las de tipo Auto (y se utiliza el mayor ancho utilizado por un elemento hijo). Con el espacio que sobra, se divide proporcionalmente entre las columnas *, dando un ancho proporcional a cada columna en función del peso de *.
Propiedades de GridLayout:

columns: especificación de las columnas (separadas por coma).
rows: especificación de las filas (separadas por coma).

Propiedades de los elementos hijos:

row: indica la fila del GridLayout en que se sitúa el elemento
col: indica la columna del GridLayout en que se sitúa el elemento
rowSpan: número de filas que abarca el elemento hijo
colSpan: número de columnas que abarca el elemento hijo

Ejemplo:

<Page xmlns="http://schemas.nativescript.org/tns.xsd"> <GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210" style.backgroundColor="lightgray" > <Label text="Label 1" row="0" col="0" backgroundColor="red"/> <Label text="Label 2" row="0" col="1" colSpan="2" backgroundColor="green"/> <Label text="Label 3" row="1" col="0" rowSpan="2" backgroundColor="blue"/> <Label text="Label 4" row="1" col="1" backgroundColor="yellow"/> <Label text="Label 5" row="1" col="2" backgroundColor="orange"/> <Label text="Label 6" row="2" col="1" backgroundColor="pink"/> <Label text="Label 7" row="2" col="2" backgroundColor="purple"/> </GridLayout> </Page>

StackLayout

Este layout organiza sus elementos hijos unos encima de otro, o bien, uno al lado de otro, dependiendo del atributo orientation, que puede valer:

vertical (por defecto)
horizontal

Propiedades de StackLayout:

orientation: puede valer "vertical" o bien "horizontal"

Los elementos hijos de StackLayout no tienen propiedades específicas para este layout.

Ejemplo vertical:

Ejemplo horizontal:

<Page xmlns="http://schemas.nativescript.org/tns.xsd"> <StackLayout orientation="horizontal" width="210" height="210" style.backgroundColor="lightgray"> <Label text="Label 1" width="50" height="50" backgroundColor="red"/> <Label text="Label 2" width="50" height="50" backgroundColor="green"/> <Label text="Label 3" width="50" height="50" backgroundColor="blue"/> <Label text="Label 4" width="50" height="50" backgroundColor="yellow"/> </StackLayout> </Page>

WrapLayout

Este layout organiza sus elementos hijos de forma similar a StackLayout, pero con la diferencia de que si los elementos no caben en una fila, pasa a la siguiente fila (orientación horizontal). En el caso de orientación vertical, si los elementos no caben en una columna, pasa a la siguiente columna.

Propiedades de WrapLayout:

orientation: horizontal o vertical
itemWidth: ancho de cada elemento hijo
itemHeight: alto de cada elemento hijo

Los elementos hijos de WrapLayout no tienen propiedades específicas para este layout.

Ejemplo:

<Page xmlns="http://schemas.nativescript.org/tns.xsd"> <WrapLayout orientation="horizontal" width="210" height="210" style.backgroundColor="lightgray"> <Label text="Label 1" width="70" height="70" backgroundColor="red"/> <Label text="Label 2" width="70" height="70" backgroundColor="green"/> <Label text="Label 3" width="70" height="70" backgroundColor="blue"/> <Label text="Label 4" width="70" height="70" backgroundColor="yellow"/> </WrapLayout> </Page>

Nativescript Spanish

Vistas de página en total

jueves, 3 de agosto de 2017

Layouts en Nativescript