You are reading docs for v1.3.1, click here for the latest version.
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 coordinadas absolutas izquierda/derecha para posicioanr 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