Layouts, ordena tus apps

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:

FrameLayout
FrameLayout

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.

horizontal
LinearLayout Horizontal
vertical
LinearLayout Vertical

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).

equal_weights
Views con Weights iguales
different_weights
Views con Weights distintos

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.

RelativeLayout
RelativeLayout 

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>

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s