Another Vue of NativeScript Webinar is now on YouTube
AbsoluteLayout

This is an overview of the most common usage of AbsoluteLayout. See the NativeScript docs for more information about AbsoluteLayout. For more information about the available properties, methods, or events, head over to the complete API documentation for AbsoluteLayout.

El contenedor <AbsoluteLayout> es el layout más simple de NativeScript. Usa coordenadas absolutas para posicionar los componentes hijos a partir del vértice superior izquierdo. AbsoluteLayout no aplicará ninguna restricción de diseño a tus elementos hijos y tampoco los redimensionará en tiempo de ejecución (cuando cambie su tamaño).

El contenedor <AbsoluteLayout> es el layout más simple de NativeScript

<AbsoluteLayout> se comporta de la siguiente forma:

  • Usa un par de coordenadas absolutas izquierda/derecha para posicionar los elementos hijos.
  • No fuerza ningún tipo de restricción de posicionamiento sobre los elementos hijos.
  • No redimensiona los elementos hijos en tiempo de ejecución, cuando estos cambien de tamaño.

Ejemplos

Diseño de tipo grilla

El siguiente ejemplo crea una grilla simple. Para más información sobre layouts de grillas puedes ver GridLayout.

<AbsoluteLayout backgroundColor="#3c495e">
  <Label text="10,10" left="10" top="10" width="100" height="100" backgroundColor="#43b883"/>
  <Label text="120,10" left="120" top="10" width="100" height="100" backgroundColor="#43b883"/>
  <Label text="10,120" left="10" top="120" width="100" height="100" backgroundColor="#43b883"/>
  <Label text="120,120" left="120" top="120" width="100" height="100" backgroundColor="#43b883"/>
</AbsoluteLayout>

Superponiendo elementos

El siguiente ejemplo crea un grupo de elementos que se superponen entre ellos.

<AbsoluteLayout backgroundColor="#3c495e">
  <Label text="10,10" left="10" top="10" width="100" height="100" backgroundColor="#289062"/>
  <Label text="30,40" left="30" top="40" width="100" height="100" backgroundColor="#43b883"/>
</AbsoluteLayout>

Propiedades

No tiene propiedades.

Additional children props

Cuando un elemento es hijo directo de <AbsoluteLayout>, las siguientes propiedades pueden ser utilizadas en ese elemento hijo:

NameTypeDescription
topNumberObtiene o establece la distancia (en píxeles) entre el borde superior del elemento hijo y el borde superior del elemento padre.
leftNumberObtiene o establece la distancia (en píxeles) entre el borde izquierdo del elemento hijo y el borde izquierdo del elemento padre.
Contributors