Layouts en Android Studio

Antes del vídeo 3 deberás aprender todo acerca de los Layouts!

Layouts

Si queremos combinar varios elementos de tipo vista tendremos que utiliza un objeto de tipo Layout. Un Layout es un contenedor de una o más vistas y controla su comportamiento y posición. Hay que destacar que un Layoutpuede contener a otro Layout y que es un descendiente de la clase View.

 La siguiente lista describe los Layout más utilizados en Android:

LinearLayout: Dispone los elementos en una fila o en una columna.

TableLayout: Distribuye los elementos de forma tabular.

RelativeLayout: Dispone los elementos en relación a otro o al padre.

AbsoluteLayout: Posiciona los elementos de forma absoluta.

FrameLayout: Permite el cambio dinámico de los elementos que contiene.

Dado que un ejemplo vale más que mil palabras, pasemos a mostrar cada uno de estos layouts en acción:

LinearLayout es uno de los Layout más utilizado en la práctica. Distribuye los elementos uno detrás de otro, bien de forma horizontal o vertical. 

<LinearLayout  xmlns:android="http://...

       android:layout_height="fill_parent"      

       android:layout_width="fill_parent"

       android:orientation ="vertical">

  <AnalogClock 

       android:layout_width="wrap_content"   

       android:layout_height="wrap_content"/>

  <CheckBox
       android:layout_width="wrap_content"   

       android:layout_height="wrap_content"

       android:text="Un checkBox"/>

  <Button

       android:layout_width="wrap_content"   

       android:layout_height="wrap_content"  

       android:text="Un botón"/>

  <TextView       

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"            

        android:text="Un texto cualquiera"/>
</LinearLayout>

TableLayoutdistribuye los elementos de forma tabular. Se utiliza la etiqueta TableRow cada vez que queremos insertar una nueva línea.

<TableLayout xmlns:android=”http://...

        android:layout_height="fill_parent"        android:layout_width="fill_parent">

  <TableRow>

   <AnalogClock 

        android:layout_width="wrap_content"    

        android:layout_height="wrap_content"/>

   <CheckBox
        android:layout_width="wrap_content"    

        android:layout_height="wrap_content"  

        android:text="Un checkBox"/>

  </TableRow>

  <TableRow>

   <Button

        android:layout_width="wrap_content"    

        android:layout_height="wrap_content"   

        android:text="Un botón"/>

   <TextView 
        android:layout_width="wrap_content"

        android:layout_height="wrap_content"   

        android:text="Un texto cualquiera"/>

  </TableRow>

</TableLayout>

RelativeLayout permite comenzar a situar los elementos en cualquiera de los cuatro lados del contenedor e ir añadiendo nuevos elementos pegados a estos.

<RelativeLayout    

      xmlns:android="http://schemas...

      android:layout_height="fill_parent"               

      android:layout_width="fill_parent">

  <AnalogClock
      android:id="@+id/AnalogClock01"

      android:layout_width="wrap_content"   

      android:layout_height="wrap_content"

      android:layout_alignParentTop="true"/>

  <CheckBox
      android:id="@+id/CheckBox01"
      android:layout_width="wrap_content"     

      android:layout_height="wrap_content"

      android:layout_below="@+id/AnalogClock01"    

      android:text="Un checkBox"/>

  <Button
      android:id="@+id/Button01"       

      android:layout_width="wrap_content"      

      android:layout_height="wrap_content"   

      android:text="Un botón"

      android:layout_below="@+id/CheckBox01"/>

  <TextView
      android:id="@+id/TextView01"     

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"   

      android:layout_alignParentBottom="true"

      android:text="Un texto cualquiera"/>
</RelativeLayout>

AbsoluteLayoutpermite indicar las coordenadas (x,y) donde queremos que se visualice cada elemento.

<AbsoluteLayout

xmlns:android="http://schemas.       

      android:layout_height="fill_parent"       

      android:layout_width="fill_parent">

  <AnalogClock 

      android:layout_width="wrap_content"   

      android:layout_height="wrap_content"

      android:layout_x="50px"

      android:layout_y="50px"/>

  <CheckBox
      android:layout_width="wrap_content"    

      android:layout_height="wrap_content"

      android:text="Un checkBox"

      android:layout_x="150px"

      android:layout_y="50px"/>

  <Button

      android:layout_width="wrap_content"    

      android:layout_height="wrap_content"   

      android:text="Un botón"

      android:layout_x="50px"

      android:layout_y="250px"/>

  <TextView

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"  

       android:text="Un texto cualquiera"

       android:layout_x="150px"

       android:layout_y="200px"/>

</AbsoluteLayout>

FrameLayoutposiciona todos los elementos usando todo el contenedor, sin distribuirlos espacialmente. EsteLayout suele utilizarse cuando queremos que varios elementos ocupen un mismo lugar pero solo uno será visible. Para modificar la visibilidad de un elemento utilizaremos la propiedad visibility.

<FrameLayout  

xmlns:android="http://schemas...

   android:layout_height="fill_parent"       

   android:layout_width="fill_parent">

  <AnalogClock
   android:layout_width="wrap_content"    

   android:layout_height="wrap_content"/>

  <CheckBox
   android:layout_width="wrap_content"    

   android:layout_height="wrap_content"   android:text="Un checkBox"/>

  <Button
   android:layout_width="wrap_content"    

   android:layout_height="wrap_content"
   android:text="Un botón"

   android:visibility="invisible"/>

  <TextView       

   android:layout_width="wrap_content"
   android:layout_height="wrap_content"   android:text="Un texto cualquiera"
   android:visibility="invisible"/>

</FrameLayout>

También podemos utilizar otras clases de Layouts, que son descritas a continuación:

ScrollView: Visualiza una columna de elementos; cuando estos no caben en pantalla se permite un deslizamiento vertical.

HorizontalScrollView: Visualiza una fila de elementos; cuando estos no caben en pantalla se permite un deslizamiento horizontal.

TabHost: Proporciona una lista de ventanas seleccionables por medio de etiquetas que pueden ser pulsadas por el usuario para seleccionar la ventana que desea visualizar. Se estudia al final del capítulo. 

ListView: Visualiza una lista deslizable verticalmente de varios elementos. Su utilización es algo compleja. Se verá un ejemplo en el capítulo siguiente.

GridView: Visualiza una cuadrícula deslizable de varias filas y varias columnas.

ViewFlipper: Permite visualizar una lista de elementos de forma que se visualice uno cada vez. Puede ser utilizado para intercambiar los elementos cada cierto intervalo de tiempo.

Fuente: http://www.androidcurso.com/index.php/tutoriales-android/32-unidad-2-diseno-de-la-interfaz-de-usuario-vistas-y-layouts/114-layouts 

Finalmente les dejo el código del Layout de Por Antioquia para que puedan seguir con el curso en el ritmo adecuado. 

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

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

    android:layout_width="match_parent" android:layout_height="match_parent"

    android:background="@drawable/fondo">

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:textAppearance="?android:attr/textAppearanceLarge"

            android:text="    Por Antioquia..."

            android:id="@+id/textView"

            android:textStyle="bold"

            android:layout_alignWithParentIfMissing="false"

            android:layout_alignParentTop="true"

            android:textIsSelectable="true"

            android:textSize="@dimen/titulo"

            android:layout_gravity="center" />

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:id="@+id/imageView"

            android:layout_below="@+id/textView"

            android:layout_marginTop="13dp"

            android:src="@drawable/entrada"

            android:layout_alignParentRight="true"

            android:layout_alignParentLeft="true"

            android:layout_gravity="center" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="NORTE"

            android:id="@+id/buttonnorte"

            android:textStyle="bold"

            android:textSize="@dimen/titulo"

            android:layout_gravity="center"

            android:layout_marginTop="30dp"

            android:layout_alignParentRight="true"

            android:layout_below="@+id/imageView"

            android:layout_alignParentLeft="true"

            android:layout_alignParentEnd="false" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="ORIENTE"

            android:id="@+id/buttonoriente"

            android:textStyle="bold"

            android:textSize="@dimen/titulo"

            android:layout_gravity="center"

            android:layout_marginTop="90dp"

            android:layout_alignParentRight="true"

            android:layout_below="@+id/imageView"

            android:layout_alignParentLeft="true" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="OCCIDENTE"

            android:id="@+id/buttonoccidente"

            android:textStyle="bold"

            android:textSize="@dimen/titulo"

            android:layout_gravity="center"

            android:layout_marginTop="150dp"

            android:layout_alignParentRight="true"

            android:layout_below="@+id/imageView"

            android:layout_alignParentLeft="true" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="NORDESTE"

            android:id="@+id/buttonnordeste"

            android:textStyle="bold"

            android:textSize="@dimen/titulo"

            android:layout_gravity="center"

            android:layout_marginTop="210dp"

            android:layout_alignParentRight="true"

            android:layout_below="@+id/imageView"

            android:layout_alignParentLeft="true" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="SUROESTE"

            android:id="@+id/buttonsuroeste"

            android:textStyle="bold"

            android:textSize="@dimen/titulo"

            android:layout_gravity="center"

            android:layout_marginTop="270dp"

            android:layout_alignParentRight="true"

            android:layout_below="@+id/imageView"

            android:layout_alignParentLeft="true" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="BAJO CAUCA"

            android:id="@+id/buttonbajocauca"

            android:textStyle="bold"

            android:textSize="@dimen/titulo"

            android:layout_gravity="center"

            android:layout_marginTop="330dp"

            android:layout_alignParentRight="true"

            android:layout_below="@+id/imageView"

            android:layout_alignParentLeft="true" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="URABA"

            android:id="@+id/buttonuraba"

            android:textStyle="bold"

            android:textSize="@dimen/titulo"

            android:layout_gravity="center"

            android:layout_marginTop="390dp"

            android:layout_alignParentRight="true"

            android:layout_below="@+id/imageView"

            android:layout_alignParentLeft="true" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="MAGDALENA MEDIO"

            android:id="@+id/buttonmagdalena"

            android:textStyle="bold"

            android:textSize="@dimen/titulo"

            android:layout_gravity="center"

            android:layout_marginTop="450dp"

            android:layout_alignParentRight="true"

            android:layout_below="@+id/imageView"

            android:layout_alignParentLeft="true" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="AREA METROPOLITANA"

            android:id="@+id/buttonmetropolitana"

            android:textStyle="bold"

            android:textSize="@dimen/titulo"

            android:layout_gravity="center"

            android:layout_marginTop="560dp"

            android:layout_alignParentRight="true"

            android:layout_below="@+id/imageView"

            android:layout_alignParentLeft="true" />

    </RelativeLayout>

</ScrollView>