1

Cómo crear layouts en Android

811Puntos

hace 6 años

Un layout es un contenedor o cuadrícula que sirve para dividir espacios en nuestras vistas (view) dentro de una actividad. De esta manera, se facilita la distribución de elementos como textos, gráficos y demás en una aplicación. Permitiendo así una mejor interacción del usuario con la interfaz (UI). Los layouts se pueden escribir en XML o por medio del Asistente Drag and Drop de la interfaz gráfica. Este proceso varía de acuerdo a tu experiencia y nivel de programación. Sin embargo, lo recomendable es escribirlos en XML porque así tendrás un mayor control de las clases y subclases de la vista y cada uno de sus elementos. Cada layout dentro de nuestra aplicación contiene una serie de características y atributos que detallaré a continuación:

  • ID: sirve para identificar únicamente a un objeto view. Este se declara mediante XML y puede ser referencia a través de la clase de recursos R utilizando una @.

Ejemplo: android:id="@+id/textView" – Crea un nuevo atributo en la clase R llamado textView android:id="@id/textView" – Realiza una referencia a un ID ya creado asociado a la etiqueta textview

  • height, width (Parametros – Altura y Ancho): Para que Android pueda dibujar nuestros controles y layouts debemos asignar esta propiedad a cada uno de los elementos. Se trata de la posición en la que van a aparecer dentro de la vista.

Ejemplos: android:layout_height=“match_parent” – aplica la dimensión de su layout contenedor. android:layout_width=“20dp” – unidad de medida (dp) – Densidad de pixeles independientes. android:layout_alignParentBottom=“true” – indica al widget que su borde superior deberá estar alineado con el borde superior del contenedor. Estos son algunos ejemplos de parámetros que pueden ser aplicados a vistas y layouts en Android. Si quieres conocer otros más, te invito a que visites el sitio developer Android.

Tipos de layouts

Ahora sí, entremos en materia con los tipos de layouts.

FrameLayout

Este es el más simple de todos los layouts. Su característica principal es que no realiza ninguna distribución de las vistas y simplemente las agrega unas encima de otras. Veamos un ejemplo: [code] <framelayout    ="" android:layout_width=“match_parent” android:layout_height=“match_parent”></framelayout> [/code] Resultado: framelayout En este layout podemos controlar el alineamiento de las vistas que están en nuestro diseño; utilizando el parámetro gravity (gravedad) que corresponde al parámetro andriod:layout_gravity. Este no es exclusivo de este layout (FrameLayout); también puede ser utilizado en LinearLayout y por método de herencia también puede ser usado por TableLayout y TableRow. Pero, ¿qué hace realmente gravity? Indica cómo se debe alinear la vista sobre la que se aplica. Actúa de forma vertical y horizontal en relación a los limites disponibles en el área para el contenido del framelayout. Veamos un ejemplo para entender un poco mejor:

gravity

[code] <framelayout    ="" android:layout_width=“match_parent” android:layout_height=“match_parent” android:layout_alignparenttop=“true” android:layout_alignparentleft=“true” android:layout_alignparentstart=“true”>    <textview        ="" android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:textappearance="?android:attr/textAppearanceLarge" android:text=“DEMO1” android:id="@+id/textView2" android:layout_gravity=“center_horizontal|top”>    <textview        ="" android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:textappearance="?android:attr/textAppearanceMedium" android:text=“DEMO2” android:id="@+id/textView3" android:layout_gravity=“right|top”>    <textview        ="" android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:textappearance="?android:attr/textAppearanceLarge" android:text=“DEMO3” android:id="@+id/textView5" android:layout_gravity=“left|center_vertical”>    <button        ="" android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:text=“DEMO4” android:id="@+id/button" android:layout_gravity=“center”>    <textview        ="" android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:textappearance="?android:attr/textAppearanceSmall" android:text=“DEMO5” android:id="@+id/textView4" android:layout_gravity=“right|center_vertical”>[/code]

LinearLayout (Horizontal y Vertical)

Este layout agrega cada uno de los elementos hijos de forma horizontal o vertical dependiendo de la característica seleccionada. Realiza este proceso de forma secuencial y nunca coloca un elemento sobre otro. Además, también podemos aplicarle el parámetro gravity. Ejemplos: LinearLayout – Horizontal android:orientation=“horizontal”framelinearhorizontal [code] <linearlayout   ="" android:orientation=“horizontal” android:layout_width=“match_parent” android:layout_height=“match_parent” android:layout_alignparenttop=“true” android:layout_torightof="@+id/textView" android:layout_toendof="@+id/textView">    </linearlayout> [/code] LinearLayout – Vertical  android:orientation=“vertical”framelinearvertical [code] <linearlayout    ="" android:orientation=“vertical” android:layout_width=“match_parent” android:layout_height=“match_parent” android:layout_alignparenttop=“true” android:layout_alignparentleft=“true” android:layout_alignparentstart=“true”>       </linearlayout> [/code] En LinearLayout podemos utilizar Peso - android:layout_weight ¿Qué es? Al utilizar LinearLayout este distribuye por defecto el espacio para cada uno de los elementos que agregamos. El peso permite variar este comportamiento si le asignamos a cada elemento de pantalla un nivel de importancia. Este se verá reflejado en el espacio ocupado. Ejemplo de peso utilizando LienarLayout – Horizontal: HorizontalPeso [code] <linearlayout   ="" android:orientation=“horizontal” android:layout_width=“match_parent” android:layout_height=“match_parent” android:layout_aligntop="@+id/textView" android:layout_alignparentleft=“true” android:layout_alignparentstart=“true”>    </linearlayout>  [/code]

TableLayout

Permite distribuir los elementos en una cuadrícula de forma tabular. De esta manera, podemos definir filas y columnas y, por supuesto, la posición de cualquier elemento dentro de la tabla. Este layout es una distinción de LinearLayout vertical y TableRow será siempre un hijo de esta. El ancho de cada columna será igual al ancho del mayor elemento adicionado a la vista. De la misma manera, podemos cambiar este comportamiento utilizando las siguientes propiedades:

  • android:stretchColumns: las columnas se expanden logrando absorber el espacio libre que no usan las otras columnas
  • android:shrinkColumns: las columnas se contraen para lograr espacio entre otras columnas
  • android:collapseColums: permite ocultar las tablas

Estas propiedades las podemos aplicar a todas las columnas o sólo a las que necesitemos. Por ejemplo, si necesitamos aplicarlo a todas las columnas debemos terminar el comando con un asterisco: android:shrinkColumns=”*”. Ejemplo de TableLayout: tablelayout [code] <tablelayout    ="" android:layout_width=“match_parent” android:layout_height=“match_parent” android:layout_aligntop="@+id/textView" android:layout_alignparentleft=“true” android:layout_alignparentstart=“true”><tablerow        ="" android:layout_width=“match_parent” android:layout_height=“match_parent”></tablerow></tablelayout></textview> </button><button            ="" android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:text=“Presiona” android:id="@+id/button" android:layout_column=“2”>           <tablerow        ="" android:layout_width=“match_parent” android:layout_height=“match_parent”></tablerow>       <tablerow        ="" android:layout_width=“match_parent” android:layout_height=“match_parent”></tablerow> </button><button            ="" style="?android:attr/buttonStyleSmall" android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:text=“Presiona2” android:id="@+id/button2" android:layout_column=“2”>       [/code]

GridLayout

Sus características son similares a TableLayout. Éste se incluyó a partir de la API 14 (Android 4.0) y a diferencia de TableLayout, agrega los elementos hijos en un cuadrícula rectangular y agrega los datos de filas y columnas. Ejemplo: android**:layout_row="1"** android:layout_column=**“0”** gridlayout [code] <gridlayout    ="" android:layout_width=“match_parent” android:layout_height=“match_parent” android:layout_aligntop="@+id/textView" android:layout_torightof="@+id/textView" android:layout_toendof="@+id/textView"></gridlayout> </button><button        ="" android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:text=“DEMO4” android:id="@+id/button2" android:layout_row=“2” android:layout_column=“1”>   [/code]

RelativeLayout

Este layout permite especificar la posición de cada elemento utilizando ubicaciones relativas en relación a otro elemento padre o hermano. RelativeLayout es una opción muy útil para diseñar una interfaz de usuario; pues puede eliminar grupos de vistas anidadas y mantener su jerarquía de ubicación o disposición plana. Esto aumenta su rendimiento. relativelayout [code] <relativelayout   ="" android:layout_width=“match_parent” android:layout_height=“match_parent” android:layout_aligntop="@+id/textView" android:layout_torightof="@+id/textView" android:layout_toendof="@+id/textView"></relativelayout> </button><button       ="" android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:text=“DEMO3” android:id="@+id/button2" android:layout_alignbottom="@+id/button" android:layout_torightof="@+id/textView2" android:layout_toendof="@+id/textView2">    <textview       ="" android:layout_width=“wrap_content”     =""    android:layout_height=“wrap_content” android:textappearance="?android:attr/textAppearanceLarge" android:text=“DEMO4” android:id="@+id/textView3" android:layout_below="@+id/button2" android:layout_alignleft="@+id/textView2" android:layout_alignstart="@+id/textView2" android:layout_marginleft=“35dp” android:layout_marginstart=“35dp” android:layout_margintop=“57dp”> [/code] Todos estos layouts nos otorgan un excelente punto de partida para nuestras aplicaciones. Si aprendes a trabajarlos y aplicarlos de la manera adecuada, estarás en el camino correcto para tener éxito en el mundo de las aplicaciones para Android. Existen otros tipos de layouts más complejos con los que podemos trabajar en esta plataforma. Si quieres saber más acerca de ellos, te recomiendo tomar el Curso de Programación en Android en Platzi. Ahí aprenderás a aplicarlos en combinación con otros elementos que le darán más personalidad a tu proyecto.</textview></button></textview></textview></textview></framelayout>

Escribe tu comentario
+ 2