Programación Android, layouts (vistas)

Share if you like...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0

Layouts en Android

Ahora que tenemos una pequeña base de Java, es hora de empezar a ver cómo se generan las vistas de nuestras aplicaciones.

Estas se generan con documentos XML, que como ya vimos se almacenan en la carpeta res/layout de nuestro proyecto, y contienen una serie de etiquetas con las que se diseñan nuestras vistas.

Lo primero que debemos saber es que todos los widgets (botones, cajas de texto, etc.) que queramos mostrar en nuestra aplicación se deben incluir dentro de un contenedor, que gestiona su posicionamiento en la pantalla. A continuación pongo una lista de los tipos que hay:

    • FrameLayout: Éste es el más simple de todos los layouts de Android. Un FrameLayout coloca todos sus controles hijos alineados con su esquina superior izquierda, de forma que cada control quedará oculto por el control siguiente (a menos que éste último tenga transparencia). Por ello suele utilizarse para mostrar un único control en su interior, a modo de contenedor (placeholder) sencillo para un sólo elemento sustituible, por ejemplo una imagen.

  • LinearLayout: Es un contenedor que utiliza el modelo de caja para desplegar los elementos que están dentro de él. Los widgets y contenedores secundarios que se declaren dentro de un elemento LinearLayout se alinearán en una columna o en una fila, uno detrás de otro. Para indicar si se ordena en forma de filas o de columnas lo hacemos a través de su propiedad android:orientation, que admite valores “horizontal” y “vertical”.
    En caso de querer ordenar elementos de forma vertical y horizontal, es preferible, en términos de rendimiento, utilizar un RelativeLayout que varios LinearLayout anidados.
  • RelativeLayout: Su principal característica es que los widgets que estén dentro de este contenedor basarán su posición en relacion con los otros elementos. De esta forma podemos definir que el widget X quede debajo del widget Y, y que éste a su vez se alinee verticalmente con el widget Z. Además, para no depender de la posición de otros widgets se puede establecer la posición en función con el propio layout.
  • TableLayout: Este contenedor ayuda a posicionar los widgets en celdas. Los elementos TableLayout trabajan en conjunto con los elementos TableRow, de esta forma podemos controlar el número de filas que aparecerán en nuestra tabla. El número de columnas dependerá del número máximo de widgets que haya en alguna de sus filas, de manera predeterminada habrá al menos una columna por cada widget. Cada columna se podrá adaptar al contenido que queramos asignar, mostrándolas más estrechas o más amplias según sea el caso.
  • ScrollLayout: Permite mostrar una barra de desplazamiento para el contenido que pongamos dentro de él, con este diseño los usuarios se desplazan por una lista de vistas que ocupan más espacio que la pantalla física. El ScrollView sólo puede contener una vista hijo que suele ser normalmente un LinearLayout.
  • AbsoluteLayout: Este Layout ya está en desuso, se posicionan los elementos con posiciones absolutas, lo que a priori facilita crear nuestras vistas, pero con la enorme cantidad de smartphones Android, con tamaños de pantalla totalmente distintos nos hace imposible controlar que la vista se muestre de forma correcta.

En futuras entradas iremos haciendo ejemplos de cada Layout, pero para empezar a ver qué contenido tiene un XML muestro aquí una sencilla estructura:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/imgCiudad"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:contentDescription="@string/imgCiudad"
        android:src="@drawable/img_ciudad" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/imgCiudad"
        android:fillViewport="true"
        android:layout_margin="10dp"
        android:scrollbars="vertical" >

        <TextView
            android:id="@+id/tvDescription"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/tvDescription" />

    </ScrollView>

</RelativeLayout>

Esto nos va a mostrar una pantalla con una imagen en la parte superior, y un texto que permite scroll vertical para poder visualizar todo su contenido, sin perder de vista la imagen en ningún momento.

Para más información sobre documentos XML: Introducción a XML

Share if you like...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0
The following two tabs change content below.
Reborn as IT Developer. Desarrollador Android y fundador de Proyecto Simio. "En realidad, yo no puedo enseñar nada a nadie, sólo puedo hacerles pensar." - Sócrates.

Deja un comentario