Los Layouts son herramientas visuales que sirven para ordenar y dar estructura a la interfaz de usuario de las aplicaciones. Con los layouts podemos agrupar views, por ejemplo, poner un texto al lado de un botón o debajo de una imagen, al igual que los views, en esta lección aprenderás a usar tres tipos de layouts que son de los más utilizados (Puedes leer la descripción o ir directamente al vídeo tutorial):
- FrameLayout: Se usa normalmente para contener a un solo view, por ejemplo una imagen.
- LineaLayout: Agrupa views de manera horizontal o vertical.
- RelativeLayout: Agrupa views en relación a otros (a la derecha de.., a la izquierda de.. arriba de.. o debajo de..) o en relación con la pantalla del celular (Alinear hasta arriba, alinear hasta abajo, hasta la izquierda, a cierta distancia del borde derecho, etc.).
Al igual que los views, los layouts tienen parámetros de ancho (width), alto (height) entre otros dependiendo del tipo de layout, y se declaran de la misma manera y en los mismos archivos xml que los views.
Frame Layout, el layout más sencillo de todos.
Este layout es un cuadro en cuyo interior normalmente se incluye un solo view, aunque también se pueden incluir 2 o más views apilados, si el o los views que se incluyen son de menor tamaño al del layout, estos por defecto se acomodan en la parte superior izquierda del layout. Este layout por lo general se utiliza para mostrar un solo view como una imagen o para mostrar varios views pero con uno visible a la vez, escondiendo los demás en el archivo xml mediante el parámetro android:visibility=»visible/invisible/gone» donde se puede seleccionar uno de los tres valores visible, invisible o gone, también este parámetro se puede establecer desde los archivos activity.java con los siguientes comandos:
// Crea variable myFrameLayout desde el id del layout.xml FrameLayout myFrameLayout = (FrameLayout) findViewById(R.id.my_frame_layout); // Establece visibilidad, puede ser VISIBLE, INVISIBLE o GONE. myFrameLayout.setVisibility(View.VISIBLE);
Un ejemplo de implementación de FrameLayout es el siguiente;
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:gravity="center">
<ImageView
android:id="@+id/image_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"/>
<ImageView
android:id="@+id/image_2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"/>
<ImageView
android:id="@+id/image_3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"/>
</FrameLayout>
Un FrameLayout con una imagen en el centro tiene el siguiente aspecto:
LinearLayout
Este layout te permite ordenar tus views de manera horizontal o vertical, le debes indicar cual es el modo en el cual quieres que se ordenen mediante el parámetro android:orientation=»horizontal/vertical» dependiendo de tu elección. Si eliges la orientación horizontal, los views se ordenarán automáticamente de izquierda a derecha, mientras que para la orientación vertical los views se ordenarán de arriba hacia abajo.
Para este tipo de layout hay un parámetro muy importante llamado android:layout_weight, este parámetro indica el peso o espacio que abarcará un view con respecto a los demás. Por ejemplo si dos vistas en un renglón tienen pesos idénticos (por ejemplo de 1), ambas abarcarán el mismo espacio (Imagen superior), pero si una de ellas tiene más peso que otra, esta abarcará n veces el espacio de la primera (En la imagen inferior el View 2 con weight = 4 abarca 4 veces el espacio del View 1 con weight = 1). Cuando se usa el parámetro android:layout_weight, es recomendable establecer el width o height a 0dp según sea el caso (android:layout_width = «0dp» si es un LinearLayout horizontal y android:layout_height = «0dp» si se trata de un LinearLayout vertical).
Un ejemplo de implementación de LinearLayout con orientación horizontal es el siguiente.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:orientation:horizontal>
<TextView
android:id="@+id/text_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"/>
<TextView
android:id="@+id/text_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"/>
<TextView
android:id="@+id/text_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"/>
</FrameLayout>
RelativeLayout, El rey de los layouts.
Por último está el RelativeLayout, este layout es muy útil puesto que puede ser personalizado y los views acomodados fácilmente dentro de el, se utiliza de la misma manera que los otros dos Layouts, pero tiene la posibilidad de agregarle parámetros para acomodar Views en relación con otros.
Por ejemplo para formar el RelativeLayout de la imagen se puede implementar el siguiente código, puedes mirar parámetros como layout_alignParentTop, layout_alignBelow, layout_alingEnd, pero puedes usar otros también.
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:padding="16dp">
<ImaveView
android:id="@+id/view_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alignParentTop="true"/>
<TextView
android:id="@+id/view_2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="@id/view_1"
android:gravity="start"/>
<TextView
android:id="@+id/view_3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignBottom="@id/view_2"
android:layout_alignRight="@id/view_2"
android:layout_alignEnd="@id/view_2"/>
</RelativeLayout>
Hackaprende 