Ir al contenido principal

Interfaz De Usuario En Android: Layouts

FrameLayout
 
Éste es el más simple de todos los layouts de Android. Un FrameLayout coloca todos los controles dentro del mismo alineados con su esquina superior izquierda, de forma que cada control quedará oculto por el control siguiente. 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.

 
 <FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <EditText android:id="@+id/TxtSaludo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inputType="text"
        android:text="Hola!"/>
 
</FrameLayout>

Con el código anterior conseguiríamos un layout como el siguiente:

layout_framelayout

LinearLayout
 
Este layout apila todos los componentes dentro del mismo de forma horizontal o vertical según se especifique en su propiedad android:orientation.
 
Al igual que en un FrameLayout, los elementos contenidos en un LinearLayout pueden establecer sus propiedades android:layout_widthandroid:layout_height para determinar sus dimensiones dentro del layout. Pero en el caso de un LinearLayout, tendremos otro parámetro con el que jugar, la propiedad android:layout_weight.
 
Con el código anterior conseguiríamos un layout como el siguiente:
 
 
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <EditText android:id="@+id/TxtHola"
        android:layout_width="match_parent"
        android:inputType="text"
        android:layout_height="match_parent" />
 
<EditText android:id="@+id/TxtMundo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inputType="text"
        android:layout_weight="2" />
 
</LinearLayout>

layout_linearlayout
 
TableLayout
 
Un TableLayout permite distribuir sus elementos hijos de forma tabular, definiendo las filas y columnas necesarias, y la posición de cada componente dentro de la tabla.
 
La estructura de la tabla se define de forma similar a como se hace en HTML, es decir, indicando las filas que compondrán la tabla (objetos TableRow), y dentro de cada fila las columnas necesarias, con la salvedad de que no existe ningún objeto especial para definir una columna (algo así como un TableColumn) sino que directamente insertaremos los controles necesarios dentro del TableRow y cada componente insertado (que puede ser un control sencillo o incluso otro ViewGroup) corresponderá a una columna de la tabla. De esta forma, el número final de filas de la tabla se corresponderá con el número de elementos TableRowinsertados, y el número total de columnas quedará determinado por el número de componentes de la fila que más componentes contenga.
 
Por norma general, el ancho de cada columna se corresponderá con el ancho del mayor componente de dicha columna, pero existen una serie de propiedades que nos ayudarán a modificar este comportamiento:
  • android:stretchColumns. Indicará las columnas que pueden expandir para absorver el espacio libre dejado por las demás columnas a la derecha de la pantalla.
  • android:shrinkColumns. Indicará las columnas que se pueden contraer para dejar espacio al resto de columnas que se puedan salir por la derecha de la palntalla.
  • android:collapseColumns. Indicará las columnas de la tabla que se quieren ocultar completamente.

Todas estas propiedades del TableLayout pueden recibir una lista de índices de columnas separados por comas (ejemplo: android:stretchColumns=”1,2,3″) o un asterisco para indicar que debe aplicar a todas las columnas (ejemplo: android:stretchColumns=”*”).
 
Otra característica importante es la posibilidad de que una celda determinada pueda ocupar el espacio de varias columnas de la tabla (análogo al atributo colspan de HTML). Esto se indicará mediante la propiedad android:layout_span del componente concreto que deberá tomar dicho espacio.
 
Veamos un ejemplo para entenderlo mejor:
 
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <TableRow>
        <TextView android:text="1.1" />
        <TextView android:text="1.2" />
        <TextView android:text="1.3" />
    </TableRow>
 
    <TableRow>
        <TextView android:text="2.1" />
        <TextView android:text="2.2" />
        <TextView android:text="2.3" />
    </TableRow>
 
    <TableRow>
        <TextView android:text="3.1"
               android:layout_span="2" />
        <TextView android:text="3.2" />
    </TableRow>
</TableLayout>

Con el código anterior conseguiríamos un layout como el siguiente:
 
layout_tablelayout

GridLayout
 
Este tipo de layout fue incluido a partir de la API 14 (Android 4.0) y sus características son similares alTableLayout, ya que se utiliza igualmente para distribuir los diferentes elementos de la interfaz de forma tabular, distribuidos en filas y columnas. La diferencia entre ellos estriba en la forma que tiene el GridLayoutde colocar y distribuir sus elementos hijos en el espacio disponible. En este caso, a diferencia delTableLayout indicaremos el número de filas y columnas como propiedades del layout, medianteandroid:rowCount y android:columnCount. Con estos datos ya no es necesario ningún tipo de elemento para indicar las filas, como hacíamos con el elemento TableRow del TableLayout, sino que los diferentes elementos hijos se irán colocando ordenadamente por filas o columnas (dependiendo de la propiedadandroid:orientation) hasta completar el número de filas o columnas indicadas en los atributos anteriores. Adicionalmente, igual que en el caso anterior, también tendremos disponibles las propiedadesandroid:layout_rowSpan y android:layout_columnSpan para conseguir que una celda ocupe el lugar de varias filas o columnas.
 
Existe también una forma de indicar de forma explícita la fila y columna que debe ocupar un determinado elemento hijo contenido en el GridLayout, y se consigue utilizando los atributos android:layout_row yandroid:layout_column. De cualquier forma, salvo para configuraciones complejas del grid no suele ser necesario utilizar estas propiedades.
 
Con todo esto en cuenta, para conseguir una distribución equivalente a la del ejemplo anterior del TableLayout, necesitaríamos escribir un código como el siguiente:
 
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="2"
    android:columnCount="3"
    android:orientation="horizontal" >
 
        <TextView android:text="1.1" />
        <TextView android:text="1.2" />
        <TextView android:text="1.3" />
 
        <TextView android:text="2.1" />
        <TextView android:text="2.2" />
        <TextView android:text="2.3" />
 
        <TextView android:text="3.1"
               android:layout_columnSpan="2" />
 
        <TextView android:text="3.2" />
 
</GridLayout>

Y el resultado seria igual que el de TableLayout, tomando en cuenta que es mucho mas simple utilizando GridLayout.
 
RelativeLayout
 
El último tipo de layout que vamos a ver es el RelativeLayout. Este layout permite especificar la posición de cada elemento de forma relativa a su elemento padre o a cualquier otro elemento incluido en el propio layout. De esta forma, al incluir un nuevo elemento X podremos indicar por ejemplo que debe colocarse debajo del elemento Y y alineado a la derecha del layout padre con los atributos layout_alignParent. Veamos esto en el ejemplo siguiente :
 
 
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
 
        <EditText android:id="@+id/TxtHola"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:inputType="text" />
 
        <Button android:id="@+id/BtnAceptar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/TxtHola"
            android:layout_alignParentRight="true" />
</RelativeLayout>

En el ejemplo, el botón BtnAceptar se colocará debajo del cuadro de texto TxtNombre(android:layout_below=”@id/TxtHola”) y alineado a la derecha del layout padre (android:layout_alignParentRight=”true”), Quedaría algo así:
 
layout_relativelayout
 
Esto es todo por hoy, en otros articulos veremos otros elementos como las vistas de tipo lista (ListView) o de tipo grid (GridView) entre otros.

Comentarios

Entradas populares de este blog

Kali Linux Guia Español (Mega)(Pdf)

MEGA PAQUETE CON MAS DE 60 CURSOS DE VIDEO2BRAIN

Curso Certified Ethical Hacker. Seguridad, Penetración, Proteccion Pdf Mega