Parcial 2

Temario: 

Interfaz de usuario en Android

1. Layouts
2. Controles básicos (II): Texto e Imágenes
3. Controles básicos (III): RadioButton y CheckBox
4. Desarrollando una aplicación sencilla con más de un activity

Controles de selección 

1.  Listas desplegables (Spinner)
2. Listas (ListView)

Teoria:

Interfaz de usuario en Android

1. Layouts

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.

Los componentes incluidos en un FrameLayout podrán establecer sus propiedades android:layout_widthy android:layout_height, que podrán tomar los valores «match_parent» (para que el control hijo tome la dimensión de su layout contenedor) o «wrap_content» (para que el control hijo tome la dimensión de su contenido).

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.

Los componentes incluidos en un FrameLayout podrán establecer sus propiedades android:layout_widthy android:layout_height, que podrán tomar los valores «match_parent» (para que el control hijo tome la dimensión de su layout contenedor) o «wrap_content» (para que el control hijo tome la dimensión de su contenido). Veamos un ejemplo:

Ejemplo:

1 2 3 4 5 6 7 8 9 10 11

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

Con el código anterior conseguimos un layout tan sencillo como el siguiente:

LinearLayout

El siguiente tipo de layout en cuanto a nivel de complejidad es el LinearLayout. Este layout apila uno tras otro todos sus elementos hijos en sentido horizontal o vertical según se establezca su propiedad android:orientation.

Al igual que en un FrameLayout, los elementos contenidos en un LinearLayout pueden establecer sus propiedades android:layout_width y android:layout_height para determinar sus dimensiones dentro del layout.

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.

GridLayout

Este tipo de layout fue incluido a partir de la API 14 (Android 4.0) y sus características son similares al TableLayout, 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 GridLayout de colocar y distribuir sus elementos hijos en el espacio disponible. En este caso, a diferencia del TableLayout indicaremos el número de filas y columnas como propiedades del layout, mediante android: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 propiedad android: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 propiedades android: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 y android:layout_column. De cualquier forma, salvo para configuraciones complejas del grid no suele ser necesario utilizar estas propiedades.

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. 

Existen otros layouts algo más sofisticados a los que dedicaremos artículos específicos un poco más adelante, como por ejemplo el DrawerLayout para añadir menús laterales deslizantes.

También en próximos artículos veremos otros elementos comunes que extienden a ViewGroup, como por ejemplo las vistas de tipo lista (ListView), de tipo grid (GridView), y las pestañas o tabs (TabHost/TabWidget).

1. Controles básicos (II): Texto e Imágenes

Control ImageView [API]

El control ImageView permite mostrar imágenes en la aplicación. La propiedad más interesante es android:src, que permite indicar la imagen a mostrar. Nuevamente, lo normal será indicar como origen de la imagen el identificador de un recurso de nuestra carpeta /res/drawable, por ejemplo android:src=»@drawable/unaimagen». Además de esta propiedad, existen algunas otras útiles en algunas ocasiones como las destinadas a establecer el tamaño máximo que puede ocupar la imagen, android:maxWidth y android:maxHeight, o para indicar cómo debe adaptarse la imagen al tamaño del control, android:scaleType (5=CENTER, 6=CENTER_CROP, 7=CENTER_INSIDE, …). Además, como ya comentamos para el caso de los controles ImageButton, al tratarse de un control de tipo imagen deberíamos establecer siempre la propiedad android:contentDescription para ofrecer una breve descripción textual de la imagen, algo que hará nuestra aplicación mucho más accesible.

Control TextView [API]

El control TextView es otro de los clásicos en la programación de GUIs, las etiquetas de texto, y se utiliza para mostrar un determinado texto al usuario. Al igual que en el caso de los botones, el texto del control se establece mediante la propiedad android:text. A parte de esta propiedad, la naturaleza del control hace que las más interesantes sean las que establecen el formato del texto mostrado, que al igual que en el caso de los botones son las siguientes: android:background (color de fondo), android:textColor (color del texto), android:textSize (tamaño de la fuente) y android:typeface (estilo del texto: negrita, cursiva, …).

De igual forma, también podemos manipular estas propiedades desde nuestro código. Como ejemplo, en el siguiente fragmento recuperamos el texto de una etiqueta con getText(), y posteriormente le concatenamos unos números, actualizamos su contenido mediante setText() y le cambiamos su color de fondo con setBackgroundColor().

Control EditText [API]

El control EditText es el componente de edición de texto que proporciona la plataforma Android. Permite la introducción y edición de texto por parte del usuario, por lo que en tiempo de diseño la propiedad más interesante a establecer, además de su posición/tamaño y formato, es el texto a mostrar, atributo android:text. Por supuesto si no queremos que el cuadro de texto aparezca inicializado con ningún texto, no es necesario incluir esta propiedad en el layout XML. Lo que sí deberemos establecer será la propiedad android:inputType. Esta propiedad indica el tipo de contenido que se va a introducir en el cuadro de texto, como por ejemplo una dirección de correo electrónico (textEmailAddress), un número genérico (number), un número de teléfono (phone), una dirección web (textUri), o un texto genérico (text). El valor que establezcamos para esta propiedad tendrá además efecto en el tipo de teclado que mostrará Android para editar dicho campo. Así, por ejemplo, si hemos indicado “text” mostrará el teclado completo alfanumérico, si hemos indicado “phone” mostrará el teclado numérico del teléfono, etc.

Al igual que ocurría con los botones, donde podíamos indicar una imagen que acompañara al texto del mismo, con los controles de texto podemos hacer lo mismo. Las propiedades drawableLeft o drawableRight nos permite especificar una imagen, a izquierda o derecha, que permanecerá fija en el cuadro de texto.

Otra opción adicional será indicar un texto de ayuda o descripción (hint), que aparecerá en el cuadro de texto mientras el usuario no haya escrito nada (en cuanto se escribe algo este texto desaparece). Para esto utilizaremos las propiedades android:hint para indicar el texto y android:textColorHint para indicar su color.

Interfaz Spanned

Un objeto de tipo Spanned es algo así como una cadena de caracteres (de hecho deriva de la interfaz CharSequence) en la que podemos insertar otros objetos a modo de marcas o etiquetas(spans) asociados a rangos de caracteres. De esta interfaz deriva la interfaz Spannable, que permite la modificación de estas marcas, y a su vez de ésta última deriva la interfaz Editable, que permite además la modificación del texto.

Aunque en el apartado en el que nos encontramos nos interesaremos principalmente por las marcas de formato de texto, en principio podríamos insertar cualquier tipo de objeto.

Existen muchos tipos de spans predefinidos en la plataforma que podemos utilizar para dar formato al texto, entre ellos:

• TypefaceSpan. Modifica el tipo de fuente.
• StyleSpan. Modifica el estilo del texto (negrita, cursiva, …).
• ForegroudColorSpan. Modifica el color del texto.
• AbsoluteSizeSpan. Modifica el tamaño de fuente.

Texto con formato en controles TextView y EditText

Hemos visto cómo crear un objeto Editable y añadir marcas de formato al texto que contiene, pero todo esto no tendría ningún sentido si no pudiéramos visualizarlo. Como ya podéis imaginar, los controles TextView y EditText nos van a permitir hacer esto. Veamos qué ocurre si asignamos a nuestro control EditText el objeto Editable que hemos creado antes.

Etiquetas Flotantes (Floating Labels)

Como contenido extra de este capítulo vamos a hablar de un nuevo control publicado recientemente por Google dentro de la nueva librería de diseño (Design Support Library) que nos ayuda a implementar uno de los componentes relacionados con los cuadros de texto que se mencionan en las especificaciones de Material Design. Se trata de las etiquetas flotantes, que no es más que un hint (más arriba vimos lo que era esto) que, en vez de desaparecer, se desplaza automáticamente a la parte superior del cuadro de texto cuando el usuario pulsa sobre él.

El componente en cuestión se llama TextInputLayout, y es muy sencillo de utilizar. Lo primero que haremos será añadir la librería de diseño a nuestro proyecto (en el artículo anterior sobre botonesexplicamos con más detalle cómo hacerlo) añadiendo su referencia al fichero build.gradle.

3. Controles básicos (III): RadioButton y CheckBox

Control CheckBox [API]

Un control checkbox se suele utilizar para marcar o desmarcar opciones en una aplicación, y en Android está representado por la clase del mismo nombre, CheckBox. La forma de definirlo en nuestra interfaz y los métodos disponibles para manipularlos desde nuestro código son análogos a los ya comentados para el control ToggleButton.

De esta forma, para definir un control de este tipo en nuestro layout podemos utilizar el código siguiente, que define un checkbox con el texto «Márcame».

En cuanto a la personalización del control podemos decir que éste extiende [indirectamente] del control TextView, por lo que todas las opciones de formato ya comentadas en artículos anteriores son válidas también para este control. Además, podremos utilizar la propiedad android:checked para inicializar el estado del control a marcado (true) o desmarcado (false). Si no establecemos esta propiedad el control aparecerá por defecto en estado desmarcado.

En el código de la aplicación podremos hacer uso de los métodos isChecked() para conocer el estado del control, y setChecked(estado) para establecer un estado concreto para el control.

En cuanto a los posibles eventos que puede lanzar este control, onClick vuelve a ser el más interesante ya que nos indicará cuándo se ha pulsado sobre el checkbox. Dentro de este evento consultaremos normalmente el estado del control con isChecked() como acabamos de ver.

Control RadioButton [API]

Al igual que los controles checkbox, un radio button puede estar marcado o desmarcado, pero en este caso suelen utilizarse dentro de un grupo de opciones donde una, y sólo una, de ellas debe estar marcada obligatoriamente, es decir, que si se marca una de las opciones se desmarcará automáticamente la que estuviera activa anteriormente. En Android, un grupo de botones radio button se define mediante un elemento RadioGroup, que a su vez contendrá todos los elementos RadioButton necesarios. Veamos un ejemplo de cómo definir un grupo de dos controles radiobutton en nuestra interfaz.

En primer lugar vemos cómo podemos definir el grupo de controles indicando su orientación (vertical u horizontal) al igual que ocurría por ejemplo con un LinearLayout. Tras esto, se añaden todos los objetos RadioButton necesarios indicando su ID mediante la propiedad android:id y su texto mediante android:text.

Una vez definida la interfaz podremos manipular el control desde nuestro código java haciendo uso de los diferentes métodos del control RadioGroup, los más importantes: check(id) para marcar una opción determinada mediante su ID, clearCheck() para desmarcar todas las opciones, y getCheckedRadioButtonId() que como su nombre indica devolverá el ID de la opción marcada (o el valor -1 si no hay ninguna marcada).

4. Desarrollando una aplicación sencilla con más de un activity

Como ya vimos Eclipse había creado por nosotros la estructura de carpetas del proyecto y todos los ficheros necesarios de un Hola Mundo básico, es decir, una sola pantalla donde se muestra únicamente un mensaje fijo.

Lo primero que vamos a hacer es diseñar nuestra pantalla principal modificando la que Eclipse nos ha creado por defecto. Aunque ya lo hemos comentado de pasada, recordemos dónde y cómo se define cada pantalla de la aplicación. En Android, el diseño y la lógica de una pantalla están separados en dos ficheros distintos. Por un lado, en el fichero  /res/layout/activity_main.xml tendremos el diseño puramente visual de la pantalla definido como fichero XML y por otro lado, en el fichero  /src/paquete.java/MainActivity.java, encontraremos el código java que determina la lógica de la pantalla.

Vamos a modificar en primer lugar el aspecto de la ventana principal de la aplicación añadiendo los controles (views) que vemos en el esquema mostrado al principio del apartado. Para ello, vamos a sustituir el contenido del fichero activity_main.xml,

En este XML se definen los elementos visuales que componen la interfaz de nuestra pantalla principal y se especifican todas sus propiedades. No nos detendremos mucho por ahora en cada detalle, pero expliquemos un poco lo que vemos en el fichero.

Lo primero que nos encontramos es un elemento LinearLayout. Los layout son elementos no visibles que determinan cómo se van a distribuir en el espacio los controles que incluyamos en su interior. Los programadores java, y más concretamente de Swing, conocerán este concepto perfectamente. En este caso, un LinearLayout distribuirá los controles simplemente uno tras otro y en la orientación que indique su propiedad android:orientation, que en este caso será “vertical”.

Dentro del layout hemos incluido 3 controles: una etiqueta (TextView), un cuadro de texto (EditText), y un botón (Button). En todos ellos hemos establecido las siguientes propiedades:

• android:id. ID del control, con el que podremos identificarlo más tarde en nuestro código. Vemos que el identificador lo escribimos precedido de “@+id/”. Esto tendrá como efecto que al compilarse el proyecto se genere automáticamente una nueva constante en la clase R para dicho control. Así, por ejemplo, como al cuadro de texto le hemos asignado el ID TxtNombre, podremos más tarde acceder al él desde nuestro código haciendo referencia a la constante R.id.TxtNombre.
• android:layout_height y android:layout_width. Dimensiones del control con respecto al layout que lo contiene. Esta propiedad tomará normalmente los valores “wrap_content” para indicar que las dimensiones del control se ajustarán al contenido del mismo, o bien “match_parent” para indicar que el ancho o el alto del control se ajustará al ancho o alto del layout contenedor respectivamente.

Además de estas propiedades comunes a casi todos los controles que utilizaremos, en el cuadro de texto hemos establecido también la propiedad android:inputType, que indica qué tipo de contenido va a albergar el control, en este caso texto normal (valor “text”), aunque podría haber sido una contraseña (textPassword), un teléfono (phone), una fecha (date), ….

Por último, en la etiqueta y el botón hemos establecido la propiedad android:text, que indica el texto que aparece en el control. Y aquí nos vamos a detener un poco, ya que tenemos dos alternativas a la hora de hacer esto. En Android, el texto de un control se puede especificar directamente como valor de la propiedad android:text, o bien utilizar alguna de las cadenas de texto definidas en los recursos del proyecto (como ya vimos, en el fichero strings.xml), en cuyo caso indicaremos como valor de la propiedad android:textsu identificador precedido del prefijo “@string/”.

Y la segunda alternativa, la utilizada en el ejemplo, consistiría en definir primero una nueva cadena de texto en el fichero de recursos /res/values/strings.xml, por ejemplo con identificador “nombre” y valor “Escribe tu nombre:”.

Y posteriormente indicar el identificador de la cadena como valor de la propiedad android:text, siempre precedido del prefijo “@string/”.

Esta segunda alternativa nos permite tener perfectamente localizadas y agrupadas todas las cadenas de texto utilizadas en la aplicación, lo que nos podría facilitar por ejemplo la traducción de la aplicación a otro idioma.Con esto ya tenemos definida la presentación visual de nuestra ventana principal de la aplicación. De igual forma definiremos la interfaz de la segunda pantalla, creando un nuevo fichero llamado activity_saludo.xml, y añadiendo esta vez tan solo una etiqueta (TextView) para mostrar el mensaje personalizado al usuario.

Para añadir el fichero, pulsaremos el botón derecho del ratón sobre la carpeta de recursos /res/layout y pulsaremos la opción “New Android XML file”.

En el cuadro de diálogo que nos aparece indicaremos como tipo de recurso “Layout”, indicaremos el nombre del fichero (con extensión “.xml”) y como elemento raíz seleccionaremos LinearLayout. Finalmente pulsamos Finish para crear el fichero.

Eclipse creará entonces el nuevo fichero y lo abrirá en el editor gráfico, aunque como ya indicamos, nosotros accederemos a la solapa de código para modificar directamente el contenido XML del fichero.

Una vez definida la interfaz de las pantallas de la aplicación deberemos implementar la lógica de la misma. Como ya hemos comentado, la lógica de la aplicación se definirá en ficheros java independientes. Para la pantalla principal ya tenemos creado un fichero por defecto llamado MainActivity.java. Empecemos por comentar su código por defecto:

Como ya vimos en un apartado anterior, las diferentes pantallas de una aplicación Android se definen mediante objetos de tipo Activity. Por tanto, lo primero que encontramos en nuestro fichero java es la definición de una nueva clase MainActivity que extiende a Activity. El único método que modificaremos de esta clase será el método onCreate(), llamado cuando se crea por primera vez la actividad. En este método lo único que encontramos en principio, además de la llamada a su implementación en la clase padre, es la llamada al método setContentView(R.layout.activity_main). Con esta llamada estaremos indicando a Android que debe establecer como interfaz gráfica de esta actividad la definida en el recursoR.layout.activity_main, que no es más que la que hemos especificado en el fichero /res/layout/activity_main.xml. Una vez más vemos la utilidad de las diferentes constantes de recursos creadas automáticamente en la clase R al compilar el proyecto.

Además del método onCreate(), vemos que también se sobrescribe el método onCreateOptionsMenu(), que se utiliza para definir menús en la aplicación. Por el momento no tocaremos este método, más adelante en el curso nos ocuparemos de este tema.

Ahora vamos a crear una nueva actividad para la segunda pantalla de la aplicación análoga a ésta primera, para lo que crearemos una nueva clase FrmSaludo que extienda también de Activity y que implemente el método onCreate() pero indicando esta vez que utilice la interfaz definida para la segunda pantalla en R.layout.activity_saludo.

Para ello, pulsaremos el botón derecho sobre la carpeta /src/tu.paquete.java/ y seleccionaremos la opción de menú New / Class.

En el cuadro de diálogo que nos aparece indicaremos el nombre (Name) de la nueva clase y su clase padre (Superclass) como android.app.Activity.

Pulsaremos Finish y Eclipse creará el nuevo fichero y lo abrirá en el editor de código java.

Y vamos a empezar con la actividad principal MainActivity, obteniendo una referencia a los diferentes controles de la interfaz que necesitemos manipular, en nuestro caso sólo el cuadro de texto y el botón. Para ello utilizaremos el método findViewById() indicando el ID de cada control, definidos como siempre en la clase R. Todo esto lo haremos dentro del método onCreate() de la clase MainActivity, justo a continuación de la llamada a setContentView() que ya comentamos:

Como vemos, hemos añadido también varios import adicionales para tener acceso a todas las clases utilizadas.

Una vez tenemos acceso a los diferentes controles, ya sólo nos queda implementar las acciones a tomar cuando pulsemos el botón de la pantalla. Para ello, continuando el código anterior, y siempre dentro del método onCreate(), implementaremos el evento onClick de dicho botón.

Como ya indicamos en el apartado anterior, la comunicación entre los distintos componentes y aplicaciones en Android se realiza mediante intents, por lo que el primer paso será crear un objeto de este tipo. Existen varias variantes del constructor de la clase Intent, cada una de ellas dirigida a unas determinadas acciones.  En nuestro caso particular vamos a utilizar el intent para llamar a una actividad desde otra actividad de la misma aplicación, para lo que pasaremos a su constructor una referencia a la propia actividad llamadora(MainActivity.this), y la clase de la actividad llamada (FrmSaludo.class).

Si quisiéramos tan sólo mostrar una nueva actividad ya tan sólo nos quedaría llamar a startActivity()pasándole como parámetro el intent creado. Pero en nuestro ejemplo queremos también pasarle cierta información a la actividad llamada, concretamente el nombre que introduzca el usuario en el cuadro de texto de la pantalla principal. Para hacer esto vamos a crear un objeto Bundle, que puede contener una lista de pares clave-valor con toda la información a pasar entre las actividades. En nuestro caso sólo añadiremos un dato de tipo String mediante el método putString(clave, valor). Tras esto añadiremos la información al intent mediante el método putExtras(bundle).

Con esto hemos finalizado ya actividad principal de la aplicación, por lo que pasaremos ya a la secundaria. Comenzaremos de forma análoga a la anterior, ampliando el método onCreate() obteniendo las referencias a los objetos que manipularemos, esta vez sólo la etiqueta de texto. Tras esto viene lo más interesante, debemos recuperar la información pasada desde la actividad principal y asignarla como texto de la etiqueta. Para ello accederemos en primer lugar al intent que ha originado la actividad actual mediante el método getIntent() y recuperaremos su información asociada (objeto Bundle) mediante el método getExtras().

Hecho esto tan sólo nos queda construir el texto de la etiqueta mediante su método setText(texto) y recuperando el valor de nuestra clave almacenada en el objeto Bundle mediante getString(clave).

Con esto hemos concluido la lógica de las dos pantallas de nuestra aplicación y tan sólo nos queda un paso importante para finalizar nuestro desarrollo. Como ya indicamos en un apartado anterior, toda aplicación Android utiliza un fichero especial en formato XML (AndroidManifest.xml) para definir, entre otras cosas, los diferentes elementos que la componen. Por tanto, todas las actividades de nuestra aplicación deben quedar convenientemente recogidas en este fichero. La actividad principal ya debe aparecer puesto que se creó de forma automática al crear el nuevo proyecto Android, por lo que debemos añadir tan sólo la segunda.

Para este ejemplo nos limitaremos a incluir la actividad en el XML mediante una nueva etiqueta <Activity>, indicar el nombre de la clase java asociada como valor del atributo android:name, y asignarle su título mediante el atributo android:label, más adelante veremos que opciones adicionales podemos especificar. Todo esto lo incluiremos justo debajo de la definición de la actividad principal dentro del fichero AndroidManifest.xml:

Como vemos, el título de la nueva actividad lo hemos indicado como referencia a una nueva cadena de caracteres, que tendremos que incluir como ya hemos comentado anteriormente  en el fichero /res/values/strings.xml

Llegados aquí, y si todo ha ido bien, deberíamos poder ejecutar el proyecto sin errores y probar nuestra aplicación en el emulador.

La forma de ejecutar y depurar la aplicación en Eclipse es análoga a cualquier otra aplicación java, pero por ser el primer capítulo vamos a recordarla.

Lo primero que tendremos que hacer será configurar un nuevo “perfil de ejecución”. Para ello accederemos al menú “Run/ Run Configurations…” y nos aparecerá la siguiente pantalla.

Sobre la categoría “Android Application” pulsaremos el botón derecho y elegiremos la opción “New” para crear un nuevo perfil para nuestra aplicación. En la siguiente pantalla le pondremos un nombre al perfil, en nuestro ejemplo “hola-usuario”, y en la pestaña “Android” seleccionaremos el proyecto que queremos ejecutar.

El resto de opciones las dejaremos por defecto y pasaremos a la pestaña “Target”. En esta segunda pestaña podremos seleccionar el AVD sobre el que queremos ejecutar la aplicación, aunque suele ser práctico indicarle a Eclipse que nos pregunte esto antes de cada ejecución, de forma que podamos ir alternando fácilmente de AVD sin tener que volver a configurar el perfil. Para ello seleccionaremos la opción “Always prompt to pick device”.

Un poco más abajo en esta misma pestaña es bueno marcar la opción “Disable Boot Animation” para acelerar un poco el primer arranque del emulador, y normalmente también suele ser necesario reducir, o mejor dicho escalar, la pantalla del emulador de forma que podamos verlo completo en la pantalla de nuestro PC. Esto se configura mediante la opción “Additional Emulator Command Line Options”, donde en mi caso indicaré la opción “-scale 0.75”, aunque este valor dependerá de la resolución de vuestro monitor y de la configuración del AVD.

Tras esto ya podríamos pulsar el botón “Run” para ejecutar la aplicación en el emulador de Android. Eclipse nos preguntará en qué dispositivo queremos ejecutar y nos mostrará dos listas. La primera de ellas con los dispositivos que haya en ese momento en funcionamiento (por ejemplo si ya teníamos un emulador funcionando) y la siguiente con el resto de AVDs configurados en nuestro entorno. Elegiré en primer lugar el emulador con Android 2.2. Es posible que la primera ejecución se demore unos minutos, todo dependerá de las posibilidades de vuestro PC, así que paciencia.

Si todo va bien, tras una pequeña espera aparecerá el emulador de Android y se iniciará automáticamente nuestra aplicación. Podemos probar a escribir un nombre y pulsar el botón “Hola” para comprobar si el funcionamiento es el correcto.

Sin cerrar este emulador podríamos volver a ejecutar la aplicación sobre Android 4.2 seleccionando el AVD correspondiente. De cualquier forma, si vuestro PC no es demasiado potente no recomiendo tener dos emuladores abiertos al mismo tiempo.

Controles de selección 

1.  Listas desplegables (Spinner)

Adaptadores en Android (adapters)

Para los desarrolladores de java que hayan utilizado frameworks de interfaz gráfica como Swing, el concepto de adaptador les resultará familiar. Un adaptador representa algo así como una interfaz común al modelo de datos que existe por detrás de todos los controles de selección que hemos comentado. Dicho de otra forma, todos los controles de selección accederán a los datos que contienen a través de un adaptador.

Además de proveer de datos a los controles visuales, el adaptador también será responsable de generar a partir de estos datos las vistas específicas que se mostrarán dentro del control de selección. Por ejemplo, si cada elemento de una lista estuviera formado a su vez por una imagen y varias etiquetas, el responsable de generar y establecer el contenido de todos estos «sub-elementos» a partir de los datos será el propio adaptador.

Android proporciona de serie varios tipos de adaptadores sencillos, aunque podemos extender su funcionalidad facilmente para adaptarlos a nuestras necesidades. Los más comunes son los siguientes:

• ArrayAdapter. Es el más sencillo de todos los adaptadores, y provee de datos a un control de selección a partir de un array de objetos de cualquier tipo.
• SimpleAdapter. Se utiliza para mapear datos sobre los diferentes controles definidos en un fichero XML de layout.
• SimpleCursorAdapter. Se utiliza para mapear las columnas de un cursor abierto sobre una base de datos sobre los diferentes elementos visuales contenidos en el control de selección.

Para no complicar excesivamente los tutoriales, por ahora nos vamos a conformar con describir la forma de utilizar un ArrayAdapter con los diferentes controles de selección disponibles.

Veamos cómo crear un adaptador de tipo ArrayAdapter para trabajar con un array genérico de java,

Comentemos un poco el código. Sobre la primera línea no hay nada que decir, es tan sólo la definición del array java que contendrá los datos a mostrar en el control, en este caso un array sencillo con cinco cadenas de caracteres. En la segunda línea creamos el adaptador en sí, al que pasamos 3 parámetros:

1. El contexto, que normalmente será simplemente una referencia a la actividad donde se crea el adaptador.
2. El ID del layout sobre el que se mostrarán los datos del control. En este caso le pasamos el ID de un layout predefinido en Android (android.R.layout.simple_spinner_item), formado únicamente por un control TextView, pero podríamos pasarle el ID de cualquier layout personalizado de nuestro proyecto con cualquier estructura y conjunto de controles, más adelante veremos cómo (en el apartado dedicado a las listas fijas).
3. El array que contiene los datos a mostrar.

Con esto ya tendríamos creado nuestro adaptador para los datos a mostrar y ya tan sólo nos quedaría asignar este adaptador a nuestro control de selección para que éste mostrase los datos en la aplicación.

Una alternativa a tener en cuenta si los datos a mostrar en el control son estáticos sería definir la lista de posibles valores como un recurso de tipo string-array. Para ello, primero crearíamos un nuevo fichero XML en la carpeta /res/values llamado por ejemplo valores_array.xml.

Tras esto, a la hora de crear el adaptador, utilizaríamos el método createFromResource() para hacer referencia a este array XML que acabamos de crear.

Control Spinner [API]

Las listas desplegables en Android se llaman Spinner. Funcionan de forma similar a cualquier control de este tipo, el usuario selecciona la lista, se muestra una especie de lista emergente al usuario con todas las opciones disponibles y al seleccionarse una de ellas ésta queda fijada en el control.

Poco vamos a comentar de aquí ya que lo que nos interesan realmente son los datos a mostrar. En cualquier caso, las opciones para personalizar el aspecto visual del control (fondo, color y tamaño de fuente, …) son las mismas ya comentadas para los controles básicos.

Comenzamos como siempre por obtener una referencia al control a través de su ID. Y en la última línea asignamos el adaptador al control mediante el método setAdapter(). ¿Y la segunda línea para qué es? Cuando indicamos en el apartado anterior cómo construir un adaptador vimos cómo uno de los parámetros que le pasábamos era el ID del layout que utilizaríamos para visualizar los elementos del control. Sin embargo, en el caso del control Spinner, este layout tan sólo se aplicará al elemento seleccionado en la lista, es decir, al que se muestra directamente sobre el propio control cuando no está desplegado. Sin embargo, antes indicamos que el funcionamiento normal del control Spinner incluye entre otras cosas mostrar una lista emergente con todas las opciones disponibles. Pues bien, para personalizar también el aspecto de cada elemento en dicha lista emergente tenemos el método setDropDownViewResource(ID_layout), al que podemos pasar otro ID de layout distinto al primero sobre el que se mostrarán los elementos de la lista emergente. En este caso hemos utilizado otro layout predefinido an Android para las listas desplegables (android.R.layout.simple_spinner_dropdown_item), formado por una etiqueta de texto con la descripción de la opción (en Android 2.x también se muestra un marcador circular a la derecha que indica si la opción está o no seleccionada).

Con estas simples lineas de código conseguiremos mostrar un control como el que vemos en la siguiente imagen:

En cuanto a los eventos lanzados por el control Spinner, el más comunmente utilizado será el generado al seleccionarse una opción de la lista desplegable, onItemSelected. Para capturar este evento se procederá de forma similar a lo ya visto para otros controles anteriormente, asignadole su controlador mediante el método setOnItemSelectedListener()

A diferencia de ocasiones anteriores, para este evento definimos dos métodos, el primero de ellos (onItemSelected) que será llamado cada vez que se selecciones una opción en la lista desplegable, y el segundo (onNothingSelected) que se llamará cuando no haya ninguna opción seleccionada (esto puede ocurrir por ejemplo si el adaptador no tiene datos). Además, vemos cómo para recuperar el dato seleccionado utilizamos el método getItemAtPosition() del parámetro AdapterView que recibimos en el evento.

2. Listas (ListView)

Un control ListView muestra al usuario una lista de opciones seleccionables directamente sobre el propio control, sin listas emergentes como en el caso del control Spinner. En caso de existir más opciones de las que se pueden mostrar sobre el control se podrá por supuesto hacer scroll sobre la lista para acceder al resto de elementos.

Para empezar, veamos como podemos añadir un control ListView a nuestra interfaz de usuario.

Una vez más, podremos modificar el aspecto del control utilizando las propiedades de fuente y color ya comentadas en artículos anteriores. Por su parte, para enlazar los datos con el control podemos utlizar por ejemplo el mismo código que ya vimos para el control Spinner. Definiremos primero un array con nuestros datos de prueba, crearemos posteriormente el adaptador de tipo ArrayAdapter y lo asignaremos finalmente al control mediante el método setAdapter().

En el código anterior, para mostrar los datos de cada elemento hemos utilizado otro layout genérico de Android para los controles de tipo ListView (android.R.layout.simple_list_item_1), formado únicamente por un TextView con unas dimensiones determinadas.

Como podéis comprobar el uso básico del control ListView es completamente análogo al ya comentado para el control Spinner.

Hasta aquí todo sencillo. Pero, ¿y si necesitamos mostrar datos más complejos en la lista? ¿qué ocurre si necesitamos que cada elemento de la lista esté formado a su vez por varios elementos? Pues vamos a provechar este artículo dedicado a los ListView para ver cómo podríamos conseguirlo, aunque todo lo que comentaré es extensible a otros controles de selección.

Para no complicar mucho el tema vamos a hacer que cada elemento de la lista muestre por ejemplo dos líneas de texto a modo de título y subtítulo con formatos diferentes (por supuesto se podrían añadir muchos más elementos, por ejemplo imágenes, checkboxes, etc).

En primer lugar vamos a crear una nueva clase java para contener nuestros datos de prueba. Vamos a llamarla Titular y tan sólo va a contener dos atributos, título y subtítulo.

En cada elemento de la lista queremos mostrar ambos datos, por lo que el siguiente paso será crear un layout XML con la estructura que deseemos. En mi caso voy a mostrarlos en dos etiquetas de texto (TextView), la primera de ellas en negrita y con un tamaño de letra un poco mayor. Llamaremos a este layout «listitem_titular.xml«:

Ahora que ya tenemos creados tanto el soporte para nuestros datos como el layout que necesitamos para visualizarlos, lo siguiente que debemos hacer será indicarle al adaptador cómo debe utilizar ambas cosas para generar nuestra interfaz de usuario final. Para ello vamos a crear nuestro propio adaptador extendiendo de la clase ArrayAdapter.

Lo primero que encontramos es el constructor para nuestro adaptador, al que sólo pasaremos el contexto (que normalmente será la actividad desde la que se crea el adaptador) y el array de datos a mostrar, que en nuestro caso es un array de objetos de tipo Titular. En este constructor tan sólo llamaremos al constructor padre tal como ya vimos al principio de este artículo, pasándole nuestros dos parámetros (contexto y datos) y el ID del layout que queremos utilizar (en nuestro caso el nuevo que hemos creado, listitem_titular).

Posteriormente, redefinimos el método encargado de generar y rellenar con nuestros datos todos los controles necesarios de la interfaz gráfica de cada elemento de la lista. Este método es getView().

El método getView() se llamará cada vez que haya que mostrar un elemento de la lista. Lo primero que debe hacer es «inflar» el layout XML que hemos creado. Esto consiste en consultar el XML de nuestro layout y crear e inicializar la estructura de objetos java equivalente. Para ello, crearemos un nuevo objeto LayoutInflater y generaremos la estructura de objetos mediante su método inflate(id_layout).

Tras esto, tan sólo tendremos que obtener la referencia a cada una de nuestras etiquetas como siempre lo hemos hecho y asignar su texto correspondiente según los datos de nuestro array y la posición del elemento actual (parámetro position del método getView()).

Una vez tenemos definido el comportamiento de nuestro adaptador la forma de proceder en la actividad principal será análoga a lo ya comentado, definiremos el array de datos de prueba, crearemos el adaptador y lo asignaremos al control mediante setAdapter().

Hecho esto, y si todo ha ido bien, nuestra nueva lista debería quedar como vemos en la imagen siguiente:

Otra posible personalización de nuestra lista podría ser añadirle una cabecera o un pie. Para esto, definiremos un nuevo layout XML para la cabecera/pie y lo añadiremos a la lista antes de asignar el adaptador.

Así por ejemplo, podríamos crear la siguiente cabecera compuesta por una etiqueta de texto centrada y en negrita sobre fondo azul, en un fichero XML situado en layout/list_header.xml.

Y una vez creada la añadiríamos a nuestra lista inflando su layout y llamando al método addHeaderView()con la vista resultante.

Por último comentemos un poco los eventos de este tipo de controles. Si quisiéramos realizar cualquier acción al pulsarse sobre un elemento de la lista creada tendremos que implementar el evento onItemClick. 

Este evento recibe 4 parámetros:

• Referencia al control lista que ha recibido el click (AdapterView a).
• Referencia al objeto View correspondiente al ítem pulsado de la lista (View v).
• Posición del elemento pulsado dentro del adaptador de la lista (int position).
• Id del elemento pulsado (long id).

Con todos estos datos, si quisiéramos por ejemplo mostrar el título de la opción pulsada en la etiqueta de texto superior (lblEtiqueta) tendríamos dos posibilidades:

1. Acceder a la vista asociada al adaptador y a partir de ésta obtener mediante getItemAtPosition() el elemento cuya posición sea position. Esto nos devolvería un objeto de tipo Titular, por lo que obtendríamos el título llamando a su método getTitulo().
2. Acceder directamente a la vista que se ha pulsado, que tendría la estructura definida en nuestro layout personalizado listitem_titular.xml, y obtener mediante findViewById() y getText() el texto del control que alberga el campo título.