View: Tipos de Vistas en Android

En uno de los primeros post de la serie de posts sobre Android creamos un proyecto Android en Eclipse y usamos un archivo XML para cargar la vista.
En el post de hoy vamos a ver algunos de los tipos de vistas (Views) que podemos crear en Android, estas vistas serán cargadas desde el XML con la siguiente función de Java:

setContentView(R.layout.main);


Con la función anterior, estamos diciendo que cargue el archivo "main.xml", que se encuentra dentro de la carpeta "res/layout", como vista de la Activity en la que nos encontramos.

En este post voy a poner y explicar ejemplos de las distintas posibilidades a la hora de crear ese archivo XML con la vista, ya que tenemos distintos tipos de vistas en Android.

LinearLayout
Es el tipo más simple y más fácil de usar. De todas formas, debemos ser prudentes al usar este tipo de vista, ya que si empezamos a anidar demasiados LinearLayout deberíamos usar un RelativeLayout.
En este tipo lo que vamos diciendo a los objetos de la vista es cuanto deben ocupar en ancho y alto. Los elementos se van colocando unos al lado de otros de forma lineal.

Por un lado podemos decir que la vista será vertical, por lo que cada elemento se coloca en una línea:


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

<TextView

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="textview1"

    />

<TextView

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="textview2"

    />

</LinearLayout>


O por el contrario, podemos decir que es horizontal de manera que se colocan dentro de la misma línea unos al lado de otros.


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="horizontal"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

<TextView

    android:layout_width="wrap_content"

    android:layout_height="fill_parent"

    android:text="textview1"

    />

<TextView

    android:layout_width="wrap_content"

    android:layout_height="fill_parent"

    android:text="textview2"

    />

</LinearLayout>


A continuación, vemos el resultado en ambos casos:

                                  Vertical                                                         Horizontal

RelativeLayout
El siguiente entre los tipos de vistas en Android es RelativeLayout. En este caso, los elementos de la vista se colocan dependiendo del resto. A continuación, vemos los mismos ejemplos de antes, pero con RelativeLayout. Veremos como el resultado visual es el mismo, pero nos ofrece muchas más posibilidades y es mucho más recomendable que anidar mucho LinearLayouts.

Vemos como el decimos al segundo "TextView" que se coloque debajo del primero.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <TextView

        android:id="@+id/textview1"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="textView1"/>

    <TextView

        android:id="@+id/textview2"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_below="@id/textview1"

        android:text="textView2"/>

</RelativeLayout>


En este caso le decimos al segundo "TextView" que se coloque a la derecha del primero.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <TextView

        android:id="@+id/textview1"

        android:layout_width="wrap_content"

        android:layout_height="fill_parent"

        android:text="textView1"/>

    <TextView

        android:id="@+id/textview2"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_toRightOf="@id/textview1"

        android:text="textView2"/>

</RelativeLayout>


El resultado será el mismo que en el de LinearLayout.

Otros
Además de los dos tipos de vistas de Android mencionadas ahí algunas más:

• TableLayout: Para hacer una vista con forma de tabla.
• GridView: Vista con una malla de imágenes.
• TabLayout: Vista con pestañas
• ListView: Vista con forma de lista.

Los dos primeros no se usan mucho de manera que no voy a pararme a explicarlos, los dos últimos, sin embargo, TabLayout y ListView, se merecen un post para cada uno que podréis leer en breve.

Ahora os toca a vosotros probar y si encontráis problemas no dudéis en comentar o también podéis encontrar más información sobre los tipos de vistas en Android en la web oficial Android Developers.

Artículos relacionados