Entorno de desarrollo Android

A partir de ahora voy a publicar tambin algunos artculos sobre desarrollo paar la plataforma Android. Y para empezar, voy a describir los pasos bsicos para disponer en nuestro PC del entorno y las herramientas necesarias para comenzar a programar aplicaciones Android. No voy a ser exhaustivo, ya existen muy buenos tutoriales sobre la instalacin de Eclipse y Android, incluida al documentacin oficial de la plataforma. Adems, si has llegado hasta este blog quiero suponer que tienes unos conocimientos bsicos de Eclipse y Java, por lo que tan slo enumerar los pasos necesarios de instalacin y configuracin, y proporcionar los enlaces a las distintas herramientas. Vamos all.

Paso 1. Descarga e instalacin de Eclipse.

Si an no tienes instalado Eclipse, puedes descargar la ltima versin (la 3.7.1 en la ltima revisin de este artculo) desde este enlace. Recomiendo descargar por ejemplo la versin Eclipse IDE for Java Developers, y por supuesto descargar la versin apropiada para tu sistema operativo. La instalacin consiste simplemente en descomprimir el zip en la ubicacin deseada.

Paso 2. Descargar el SDK de Android.

El SDK de la plataforma Android se puede descargar desde aqu (en el momento de revisar este artculo la ltima versin es la r16, que funciona perfectamente con Eclipse 3.7.1). Una vez descargado, de nuevo bastar con descomprimir el zip en cualquier ubicacin o ejecutar el instalador estandar de windows.

Paso 3. Descargar el plugin Android para Eclipse.

Google pone a disposicin de los desarrolladores un plugin para Eclipse llamado Android Development Tools (ADT) que facilita en gran medida el desarrollo de aplicaciones para la plataforma. Podis descargarlo mediante las opciones de actualizacin de Eclipse, accediendo al men Help / Install new software e indicando la URL de descarga: https://dl-ssl.google.com/android/eclipse/ Se debe seleccionar e instalar el paquete completo Developer Tools, formado por Android DDMS yAndroid Development Tools.

Paso 4. Configurar el plugin ADT.

En la ventana de configuracin de Eclipse, se debe acceder a la seccin de Android e indicar la ruta en la que se ha instalado el SDK (paso 2).

Paso 5. Descargar los targets necesarios.

Adems del SDK de Android comentado en el paso 2, tambin debemos descargar los llamados SDK Targets de Android, que no son ms que las libreras necesarias para desarrollar en cada una de las versiones concretas de Android. As, si queremos desarrollar por ejemplo para Android 1.6 tendremos que descargar su target correspondiente. Para ello, desde Eclipse debemos acceder al men Window / Android SDK and AVD Manager, y en la seccin Available Packages seleccionar e instalar todos los paquetes deseados.

Paso 6. Configurar un AVD.

A la hora de probar y depurar aplicaciones Android no tendremos que hacerlo necesariamente sobre un dispositivo fsico, sino que podremos configurar un emulador o dispositivo virtual (Android Virtual Device, o AVD) donde poder realizar fcilmente estas tareas. Para ello, volveremos a acceder al AVD Manager, y en la seccin Virtual Devices podremos aadir tantos AVD como se necesiten (por ejemplo, configurados para distintas versiones de Android). Para configurar el AVD tan slo tendremos que indicar un nombre descriptivo, el target de Android que utilizar, y las caractersticas de hardware del dispositivo virtual, como por ejemplo su resolucin de pantalla, el tamao de la tarjeta SD, o la disponibilidad de GPS.

Y con este paso ya estamos preparados para crear nuestro primer proyecto para Android.

Paso 7. Hola Mundo! en Android.

Creamos un nuevo proyecto de tipo Android Project. Indicamos su nombre, el target deseado, el nombre de la aplicacin, el paquete java por defecto para nuestras clases y el nombre de la clase (Activity) principal.

Esta accin crear toda la estructura de carpetas necesaria para compilar un proyecto para Android. Hablaremos de ella ms adelante. Para ejecutar el proyecto tal cual podremos hacerlo como cualquier otro proyecto java configurando una nueva entrada de tipo Android Applications en la ventana de Run Configurations. Al ejecutar el proyecto, se abrir un nuevo emulador Android y se cargar automticamente nuestra aplicacin.

Estructura de un proyecto Android

Seguimos con el Curso de Programacin Android. Para empezar a comprender cmo se construye una aplicacin Android vamos a echar un vistazo a la estructura general de un proyecto tipo. Cuando creamos un nuevo proyecto Android en Eclipse se genera automticamente la estructura de carpetas necesaria para poder generar posteriormente la aplicacin. Esta estructura ser comn a cualquier aplicacin, independientemente de su tamao y complejidad. En la siguiente imagen vemos los elementos creados inicialmente para un nuevo proyecto Android:

Describamos los elementos principales.

Carpeta /src/
Contiene todo el cdigo fuente de la aplicacin, cdigo de la interfaz grfica, clases auxiliares, etc. Inicialmente, Eclipse crear por nosotros el cdigo bsico de la pantalla (Activity) principal de la aplicacin, siempre bajo la estructura del paquete java definido.

Carpeta /res/
Contiente todos los ficheros de recursos necesarios para el proyecto: imgenes, vdeos, cadenas de texto, etc. Los diferentes tipos de recursos de debern distribuir entre las siguientes carpetas: /res/drawable/. Contienen las imgenes de la aplicacin. Se puede dividir en /drawableldpi, /drawable-mdpi y /drawable-hdpi para utilizar diferentes recursos dependiendo de la resolucin del dispositivo. /res/layout/. Contienen los ficheros de definicin de las diferentes pantallas de la interfaz grfica. Se puede dividir en /layout y /layout-land para definir distintos layouts dependiendo de la orientacin del dispositivo. /res/anim/. Contiene la definicin de las animaciones utilizadas por la aplicacin. /res/menu/. Contiene la definicin de los mens de la aplicacin. /res/values/. Contiene otros recursos de la aplicacin como por ejemplo cadenas de texto (strings.xml), estilos (styles.xml), colores (colors.xml), etc. /res/xml/. Contiene los ficheros XML utilizados por la aplicacin. /res/raw/. Contiene recursos adicionales, normalmente en formato distinto a XML, que no se incluyan en el resto de carpetas de recursos. Como ejemplo, para un proyecto nuevo Android, se crean los siguientes recursos para la aplicacin:

Carpeta /gen/
Contiene una serie de elementos de cdigo generados automticamente al compilar el proyecto. Cada vez que generamos nuestro proyecto, la maquinaria de compilacin de Android genera por nosotros una serie de ficheros fuente en java dirigidos al control de los recursos de la aplicacin.

El ms importante es el que se puede observar en la imagen, el fichero R.java, y la clase R. Esta clase R contendr en todo momento una serie de constantes con los ID de todos los recursos de la aplicacin incluidos en la carpeta /res/, de forma que podamos acceder facilmente a estos recursos desde nuestro cdigo a traves de este dato. As, por ejemplo, la constanteR.drawable.icon contendr el ID de la imagen icon.png contenida en la carpeta/res/drawable/. Veamos como ejemplo la clase R creada por defecto para un proyecto nuevo:
1package net.sgoliver; 2public final class R { 3 public static final class attr { 4 } 5 public static final class drawable { 6 public static final int icon=0x7f020000; 7 } 8 public static final class layout { 9 public static final int main=0x7f030000; 10 } 11 public static final class string { 12 public static final int app_name=0x7f040001; 13 public static final int hello=0x7f040000; 14 } 15 16}

Carpeta /assets/
Contiene todos los dems ficheros auxiliares necesarios para la aplicacin (y que se incluirn en su propio paquete), como por ejemplo ficheros de configuracin, de datos, etc. La diferencia entre los recursos incluidos en la carpeta /res/raw/ y los incluidos en la carpeta/assets/ es que para los primeros se generar un ID en la clase R y se deber acceder a ellos con los diferentes mtodos de acceso a recursos. Para los segundos sin embargo no se generarn ID y se podr acceder a ellos por su ruta como a cualquier otro fichero del sistema. Usaremos uno u otro segn las necesidades de nuestra aplicacin.

Fichero AndroidManifest.xml
Contiene la definicin en XML de los aspectos principales de la aplicacin, como por ejemplo su identificacin (nombre, versin, icono, ), sus componentes (pantallas, mensajes, ), o los permisos necesarios para su ejecucin. Veremos ms adelante ms detalles de este fichero.

Componentes de una aplicacin Android

En el post anterior vimos la estructura de un proyecto Android y aprendimos dnde colocar cada uno de los elementos que componen una aplicacin, tanto elementos de software como recursos grficos o de datos. En ste nuevo post vamos a centrarnos especficamente en los primeros, es decir, veremos los distintos tipos de componentes de software con los que podremos construir una aplicacin Android. En Java o .NET estamos acostumbrados a manejar conceptos comoventana,control,eventos oservicios como los elementos bsicos en la construccin de una aplicacin. Pues bien, en Android vamos a disponer de esos mismos elementos bsicos aunque con un pequeo cambio en la terminologa y el enfoque. Repasemos los componentes principales que pueden formar parte de una aplicacin Android [Por claridad, y para evitar confusiones al consultar documentacin en ingls, intentar traducir lo menos posible los nombres originales de los componentes].

Activity
Las actividades (activities) representan el componente principal de la interfaz grfica de una aplicacin Android. Se puede pensar en una actividad como el elemento anlogo a una ventana en cualquier otro lenguaje visual.

View
Los objetos view son los componentes bsicos con los que se construye la interfaz grfica de la aplicacin, anlogo por ejemplo a los controles de Java o .NET. De inicio, Android pone a nuestra disposicin una gran cantidad de controles bsicos, como cuadros de texto, botones, listas desplegables o imgenes, aunque tambin existe la posibilidad de extender la funcionalidad de estos controles bsicos o crear nuestros propios controles personalizados.

Service
Los servicios son componentes sin interfaz grfica que se ejecutan en segundo plano. En concepto, son exactamente iguales a los servicios presentes en cualquier otro sistema operativo. Los servicios pueden realizar cualquier tipo de acciones, por ejemplo actualizar datos, lanzar notificaciones, o incluso mostrar elementos visuales (activities) si se necesita en algn momento la interaccin con del usuario.

Content Provider
Un content provider es el mecanismo que se ha definido en Android para compartir datos entre aplicaciones. Mediante estos componentes es posible compartir determinados datos de nuestra aplicacin sin mostrar detalles sobre su almacenamiento interno, su estructura, o su implementacin. De la misma forma, nuestra aplicacin podr acceder a los datos de otra a travs de los content provider que se hayan definido.

Broadcast Receiver
Un broadcast receiver es un componente destinado a detectar y reaccionar ante determinados mensajes o eventos globales generados por el sistema (por ejemplo: Batera baja, SMS recibido, Tarjeta SD insertada, ) o por otras aplicaciones (cualquier aplicacin puede generar

mensajes (intents, en terminologa Android) broadcast, es decir, no dirigidos a una aplicacin concreta sino a cualquiera que quiera escucharlo).

Widget
Los widgets son elementos visuales, normalmente interactivos, que pueden mostrarse en la pantalla principal (home screen) del dispositivo Android y recibir actualizaciones peridicas. Permiten mostrar informacin de la aplicacin al usuario directamente sobre la pantalla principal.

Intent
Un intent es el elemento bsico de comunicacin entre los distintos componentes Android que hemos descrito anteriormente. Se pueden entender como los mensajes o peticiones que son enviados entre los distintos componentes de una aplicacin o entre distintas aplicaciones. Mediante un intent se puede mostrar una actividad desde cualquier otra, iniciar un servicio, enviar un mensaje broadcast, iniciar otra aplicacin, etc.

Desarrollando una aplicacin Android sencilla

Despus de instalar nuestro entorno de desarrollo para Android y comentar la estructura bsica de un proyecto y los diferentes componentes software que podemos utilizar ya es hora de empezar a escribir algo de cdigo. Y como siempre lo mejor es empezar por escribir una aplicacin sencilla. En un principio me plante analizar en este post el clsico Hola Mundo pero ms tarde me pareci que se iban a quedar algunas cosas bsicas en el tintero. As que he versionado a mi manera elHola Mundo transformndolo en algo as como un Hola Usuario, que es igual de sencilla pero aade un par de cosas interesantes de contar. La aplicacin constar de dos pantallas, por un lado la pantalla principal que solicitar un nombre al usuario y una segunda pantalla en la que se mostrar un mensaje personalizado para el usuario. Sencillo, intil, pero aprenderemos muchos conceptos bsicos, que para empezar no est mal.

En primer lugar vamos a crear un nuevo proyecto Android tal como vimos al final del primer post de la serie. Llamaremos al proyecto HolaUsuario, indicaremos como target por ejemplo Android 1.6, daremos un nombre a la aplicacin e indicaremos que se cree una actividad llamada HolaUsuario.

Como ya vimos esto nos crea la estructura de carpetas del proyecto y todos los ficheros necesarios de un Hola Mundo bsico, es decir, una sola pantalla donde se muestra nicamente un mensaje fijo.

Lo primero que vamos a hacer es disear nuestra pantalla principal modificando la que Eclipse nos ha creado por defecto. Pero dnde y cmo se define cada pantalla de la aplicacin? En Android, el diseo y la lgica de una pantalla estan separados en dos ficheros distintos. Por un lado, en el fichero /res/layout/main.xml tendremos el diseo puramente visual de la pantalla definido como fichero XML y por otro lado, en el fichero /src/paquetejava/HolaUsuario.java, encontraremos el cdigo java que determina la lgica de la pantalla. Vamos a modificar en primer lugar el aspecto de la ventana principal de la aplicacin aadiendo los controles (views) que vemos en la primera captura de pantalla. Para ello, vamos a sustituir el contenido del fichero main.xml por el siguiente: 1 2<?xml version="1.0" encoding="utf-8"?> 3<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4 android:orientation="vertical" 5 android:layout_width="fill_parent" 6 android:layout_height="fill_parent" > 7 8 <TextView android:text="@string/nombre" 9 android:layout_width="fill_parent" 10 android:layout_height="wrap_content" /> 11 <EditText android:id="@+id/TxtNombre" 12 android:layout_height="wrap_content" 13 android:layout_width="fill_parent" /> 14 15 <Button android:id="@+id/BtnHola" 16 android:layout_width="wrap_content" 17 android:layout_height="wrap_content" android:text="@string/hola" /> 18 19 20</LinearLayout> 21 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 en cada detalle porque se ser tema de otro artculo, 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 cmo se van a distribuir en el espacio los controles que incluyamos en su interior. Los programadores java, y ms concretamente de Swing, conocern este concepto perfectamente. En este caso, un LinearLayout distribuir los controles uno tras otro y en la orientacin que indique su propiedad android:orientation. Dentro del layout hemos incluido 3 controles: una etiqueta (TextView), un cuadro de texto (EditText), y un botn (Button). En todos ellos hemos establecido las siguientes propiedades: android:id. ID del control, con el que podremos identificarlo ms tarde en nuestro cdigo.Vemos que el identificador lo escribimos precedido de @+id/. Esto tendr como efecto que al compilarse el proyecto se genere automticamente una nueva constante en la clase R para dicho control [Aprende ms sobre la clase R en el post anterior]. android:text. Texto del control. El texto de un control se puede especificar directamente o bien utilizar alguna de las cadenas de texto definidas en los recursos del proyecto (ficherostrings.xml), en cuyo caso indicaremos su identificador precedido del prefijo @string/.

 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 ajustarn al contenido del mismo, o bien fill_parent para indicar que el ancho o el alto del control se ajustar al ancho o alto del layout contenedor respectivamente. Con esto ya tenemos definida la presentacin visual de nuestra ventana principal de la aplicacin. De igual forma definiremos la interfaz de la segunda pantalla, creando un nuevo fichero llamadofrmmensaje.xml, y aadiendo esta vez tan solo una etiqueta (TextView) para mostrar el mensaje personalizado al usuario. Veamos cmo quedara nuestra segunda pantalla:
1<?xml version="1.0" encoding="utf-8"?> 2<LinearLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 android:layout_width="wrap_content" 5 android:layout_height="wrap_content"> 6 7<TextView android:id="@+id/TxtMensaje" 8 android:layout_height="wrap_content" 9 android:layout_width="fill_parent" 10 android:text="$mensaje"></TextView> 11 12</LinearLayout>

Una vez definida la interfaz de las pantallas de la aplicacin deberemos implementar la lgica de la misma. Como ya hemos comentado, la lgica de la aplicacin se definir en ficheros java independientes. Para la pantalla principal ya tenemos creado un fichero por defecto llamadoHolaUsuario.java. Empecemos por comentar su cdigo por defecto:
1public class HolaUsuario extends Activity { /** Called when the activity is first created. */ 2 @Override 3 public void onCreate(Bundle savedInstanceState) { 4 5 super.onCreate(savedInstanceState); 6 setContentView(R.layout.main); 7 } 8}

Como ya vimos en un post anterior, las diferentes pantallas de una aplicacin Android se definen mediante objetos de tipo Activity. Por tanto, lo primero que encontramos en nuestro fichero java es la definicin de una nueva clase HolaUsuario que extiende a Activity. El nico mtodo que sobreescribiremos de esta clase ser el mtodo OnCreate, llamado cuando se crea por primera vez la actividad. En este mtodo lo nico que encontramos en principio, adems de la llamada a su implementacin en la clase padre, es la llamada al mtodo setContentView(R.layout.main). Con esta llamada estaremos indicando a Android que debe establecer como interfaz grfica de esta actividad la definida en el recurso R.layout.main, que no es ms que la que hemos especificado en el fichero /res/layout/main.xml. Una vez ms vemos la utilidad de las diferentes constantes de recursos creadas automticamente en la clase R al compilar el proyecto.

En principio vamos a crear una nueva actividad para la segunda pantalla de la aplicacin anloga a sta primera, para lo que crearemos una nueva clase FrmMensaje que exienda de Activity y que implemente el mtodo onCreate indicando que utilice la interfaz definida en R.layout.frmmensaje.

1public class FrmMensaje extends Activity { @Override 2 public void onCreate(Bundle savedInstanceState) { 3 super.onCreate(savedInstanceState); 4 5 setContentView(R.layout.frmmensaje); 6 } 7}

Como vemos, el cdigo incluido por defecto en estas clases lo nico que hace es generar la interfaz de la actividad. A partir de aqu nosotros tendremos que incluir el resto de la lgica de la aplicacin. Y vamos a empezar con la actividad principal HolaUsuario, obteniendo una referencia a los diferentes controles de la interfaz que necesitemos manipular, en nuestro caso slo el cuadro de texto y el botn. Para ello utilizaremos el mtodo findViewById() indicando el ID de cada control, definidos como siempre en la clase R: 1final EditText txtNombre =(EditText)findViewById(R.id.TxtNombre); 2final Button btnHola = (Button)findViewById(R.id.BtnHola); Una vez tenemos acceso a los diferentes controles, ya slo nos queda implementar las acciones a tomar cuando pulsemos el botn de la pantalla. Para ello implementaremos el evento onClick de dicho botn, veamos cmo: 1btnHola.setOnClickListener(new OnClickListener() { @Override 2 public void onClick(View arg0) { 3 Intent intent = new Intent(HolaUsuario.this, FrmMensaje.class); 4 5 Bundle bundle = new Bundle(); 6 7 bundle.putString("NOMBRE", txtNombre.getText().toString()); 8 intent.putExtras(bundle); 9 10 startActivity(intent); 11 } 12}); Como ya indicamos en el artculo anterior, la comunicacin 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, pero en nuestro caso particular vamos a utilizar el intent para llamar a una actividad desde otra de la misma aplicacin, para lo que pasaremos al constructor una referencia a la propia actividad llamadora (HolaUsuario.this), y la clase de la actividad llamada (FrmMensaje.class). Si quisiramos tan slo mostrar una nueva actividad ya tan slo nos quedara llamar astartActivity() pasndole como parmetro el intent creado. Pero en nuestro ejemplo queremos tambin pasarle cierta informacin a la actividad, concretamente el nombre que introduzca el usuario en el cuadro de texto. Para hacer esto vamos a crear un objeto Bundle, que puede contener una lista de pares clave-valor con toda la informacin a pasar entre las actividades. En nuestro caso slo aadiremos un dato de tipo String mediante el mtodo putString(clave,valor). Tras esto aadiremos la informacin al intent mediante el mtodo putExtras(bundle). Finalizada la actividad principal de la aplicacin pasamos ya a la secundaria. Comenzaremos de forma anloga a la anterior, ampliando el mtodo onCreate obteniendo las referencias a los

objetos que manipularemos, esta vez slo la etiqueta de texto. Tras esto viene lo ms interesante, debemos recuperar la informacin 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 mtodo getIntent() y recuperaremos su informacin asociada (objeto Bundle) mediante el mtodo getExtras(). Hecho esto tan slo nos queda construir el texto de la etiqueta mediante su mtodosetText(texto) y recuperando el valor de nuestra clave almacenada en el objeto Bundlemediante getString(clave). 1public class FrmMensaje extends Activity { 2 @Override 3 public void onCreate(Bundle savedInstanceState) { 4 super.onCreate(savedInstanceState); 5 setContentView(R.layout.frmmensaje); 6 TextView txtMensaje = (TextView)findViewById(R.id.TxtMensaje); 7 8 Bundle bundle = getIntent().getExtras(); 9 10 txtMensaje.setText("Hola " + bundle.getString("NOMBRE")); 11 } 12} 13 14 Con esto hemos concluido la lgica de las dos pantallas de nuestra aplicacin y tan slo nos queda un paso importante para finalizar nuestro desarrollo. Como indicamos en uno de los artculos anteriores, cualquier aplicacin 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 aplicacin deben quedar convenientemente recogidas en este fichero. La actividad principal ya debe aparecer puesto que se cre de forma automtica al crear el nuevo proyecto Android, por lo que debemos aadir tan slo la segunda. Para este ejemplo nos limitaremos a incluir la actividad en el XML, ms adelante veremos que opciones adicionales podemos especificar. 1 2<?xml version="1.0" encoding="utf-8"?> 3<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="net.sgoliver" 4 android:versionCode="1" 5 android:versionName="1.0"> 6 <application android:icon="@drawable/icon" android:label="@string/app_name"> 7 <activity android:name=".HolaUsuario" 8 android:label="@string/app_name"> 9 <intent-filter> 10 <action android:name="android.intent.action.MAIN" /> 11 <category android:name="android.intent.category.LAUNCHER" /> 12 </intent-filter> 13 </activity> 14 <activity android:name=".FrmMensaje"></activity> 15 </application> 16 17 <uses-sdk android:minSdkVersion="4" /> 18 19</manifest> 20

21 Una vez llegado aqu, si todo ha ido bien, deberamos poder ejecutar el proyecto sin errores y probar nuestra aplicacin en el emulador. Descarga el cdigo fuente de este artculo. Espero que esta aplicacin de ejemplo os haya servido para aprender temas bsicos en el desarrollo para Android, como por ejemplo la definicin de la interfaz grfica, el cdigo java necesario para acceder y manipular los elementos de dicha interfaz, o la forma de comunicar diferentes actividades de Android. En los artculos siguientes veremos algunos de estos temas de forma ms especfica y ampliaremos con algunos temas ms avanzados.

Interfaz de Usuario en Android

Layouts
En el artculo anterior del curso, donde desarrollamos una sencilla aplicacin Android desde cero, ya hicimos algunos comentarios sobre los layouts. Como ya indicamos, los layoutsson elementos no visuales destinados a controlar la distribucin, posicin y dimensiones de los controles que se insertan en su interior. Estos componentes extienden a la clase baseViewGroup, como muchos otros componentes contenedores, es decir, capaces de contener a otros controles. En el post anterior conocimos la existencia de un tipo concreto de layout, LinearLayout, aunque Android nos proporciona algunos otros. Vemos cuntos y cules.

FrameLayout
ste es el ms 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 slo elemento sustituible, por ejemplo una imagen. Los componentes incluidos en un FrameLayout podrn establecer sus propiedadesandroid:layout_width y android:layout_height, que podrn tomar los valores fill_parent (para que el control hijo tome la dimensin de su layout contenedor) o wrap_content (para que el control hijo tome la dimensin de su contenido). Ejemplo: <FrameLayout 1 xmlns:android="http://schemas.android.com/apk/res/android 2" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent"> 5 6 <EditText android:id="@+id/TxtNombre" 7 android:layout_width="fill_parent" 8 android:layout_height="fill_parent" /> 9 10 </FrameLayout>

LinearLayout
El siguiente layout Android en cuanto a nivel de complejidad es el LinearLayout. Este layout apila uno tras otro todos sus elementos hijos de forma horizontal o vertical segn 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. Pero en el caso de un LinearLayout, tendremos otro parmetro con el que jugar, la propiedad android:layout_weight. <LinearLayout 1 xmlns:android="http://schemas.android.com/apk/res/android 2" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:orientation="vertical"> 6 7 <EditText android:id="@+id/TxtNombre" 8 android:layout_width="fill_parent" 9 android:layout_height="fill_parent" /> 10 11 <Button android:id="@+id/BtnAceptar" 12 android:layout_width="wrap_content" 13 android:layout_height="fill_parent" /> 14 15 </LinearLayout> Esta propiedad nos va a permitir dar a los elementos contenidos en el layout unas dimensiones proporcionales entre ellas. Esto es ms dificil de explicar que de comprender con un ejemplo. Si incluimos en un LinearLayout vertical dos cuadros de texto (EditText) y a uno de ellos le establecemos un layout_weight=1 y al otro un layout_weight=2 conseguiremos como efecto que toda la superficie del layout quede ocupada por los dos cuadros de texto y que adems el segundo sea el doble (relacin entre sus propiedades weight) de alto que el primero. LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <EditText android:id="@+id/TxtDato1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" /> <EditText android:id="@+id/TxtDato2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="2" /> </LinearLayout> As pues, a pesar de la simplicidad aparente de este layout resulta ser lo suficiente verstil como para sernos de utilidad en muchas ocasiones.

TableLayout
Un TableLayoutpermite distribuir sus elementos hijos de forma tabular, definiendo las filas y columnas necesarias, y la posicin 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 compondrn la tabla (objetos TableRow), y dentro de cada fila las columnas

necesarias, con la salvedad de que no existe ningn objeto especial para definir una columna (algo as como unTableColumn) 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 nmero final de filas de la tabla se corresponder con el nmero de elementos TableRowinsertados, y el nmero total de columnas quedar determinado por el nmero de componentes de la fila que ms 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 ayudarn a modificar este comportamiento: android:stretchColumns. Indicar las columnas que pueden expandir para absorver el espacio libre dejado por las dems 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 caracterstica importante es la posibilidad de que una celda determinada pueda ocupar el espacio de varias columnas de la tabla (anlogo 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 con varios de estos elementos: <TableLayout 1 xmlns:android="http://schemas.android.com/apk/res/android 2" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:stretchColumns="1" > 6 7 <TableRow> 8 <TextView android:text="Celda 1.1" /> 9 <TextView android:text="Celda 1.2" /> 10 </TableRow> 11 12 <TableRow> 13 <TextView android:text="Celda 2.1" /> 14 <TextView android:text="Celda 2.2" /> 15 </TableRow> 16 17 <TableRow> 18 <TextView android:text="Celda 3" 19 android:layout_span="2" /> 20 </TableRow> 21 22 </TableLayout>

RelativeLayout
El ltimo tipo de layout que vamos a ver es el RelativeLayout. Este layout permite especificar la posicin 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. Veamos esto en el ejemplo siguiente: 1 2<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" > 5 6 <EditText android:id="@+id/TxtNombre" 7 android:layout_width="fill_parent" 8 android:layout_height="wrap_content" /> 9 <Button android:id="@+id/BtnAceptar" 10 android:layout_width="wrap_content" 11 android:layout_height="wrap_content" 12 android:layout_below="@id/TxtNombre" 13 android:layout_alignParentRight="true" /> 14 15</RelativeLayout> 16 En el ejemplo, el botn BtnAceptar se colocar debajo del cuadro de texto TxtNombre(android:layout_below=@id/TxtNombre) y alineado a la derecha del layout padre (android:layout_alignParentRight=true), adems de dejar un margen a su izquierda de 10 pixeles (android:layout_marginLeft=10px). Al igual que estas tres propiedades, en un RelativeLayout tendremos un sinfn de propiedades para colocar cada control justo donde queramos. Veamos las principales [creo que sus propios nombres explican perfectamente la funcin de cada una]: Posicin relativa a otro control: android:layout_above. android:layout_below. android:layout_toLeftOf. android:layout_toRightOf. android:layout_alignLeft. android:layout_alignRight. android:layout_alignTop. android:layout_alignBottom. android:layout_alignBaseline. Posicin relativa al layout padre: android:layout_alignParentLeft. android:layout_alignParentRight. android:layout_alignParentTop. android:layout_alignParentBottom. android:layout_centerHorizontal. android:layout_centerVertical. android:layout_centerInParent.

Opciones de margen (tambin disponibles para el resto de layouts): android:layout_margin. android:layout_marginBottom. android:layout_marginTop. android:layout_marginLeft. android:layout_marginRight. Opciones de espaciado o padding (tambin disponibles para el resto de layouts): android:padding. android:paddingBottom. android:paddingTop. android:paddingLeft. android:paddingRight.

Controles bsicos (I)

En el artculo anterior del Curso de Programacin en Android ya vimos los distintos tipos de layouts con los que contamos en Android para distribuir los controles de la interfaz por la pantalla del dispositivo. En los prximos artculos dedicados a Android vamos a hacer un repaso de los diferentes controles que pone a nuestra disposicin la plataforma de desarrollo de este sistema operativo. Empezaremos con los controles ms bsicos y seguiremos posteriormente con algunos algo ms elaborados. En este primer post sobre el tema nos vamos a centrar en los diferentes tipos de botones y cmo podemos personalizarlos. El SDK de Android nos proporciona tres tipos de botones: el clsico (Button), el de tipo on/off (ToggleButton), y el que puede contener una imagen (ImageButton). En la imagen siguiente vemos el aspecto por defecto de estos tres controles.

No vamos a comentar mucho sobre ellos dado que son controles de sobra conocidos por todos, ni vamos a enumerar todas sus propiedades porque existen decenas. A modo de referencia, a medida que los vayamos comentando ir poniendo enlaces a su pgina de la documentacin oficial de Android para poder consultar todas sus propiedades en caso de necesidad.

Control Button [API]

Un control de tipo Button es el botn ms bsico que podemos utilizar. En el ejemplo siguiente definimos un botn con el texto Plsame asignando su propiedad android:text. Adems de esta propiedad podramos utilizar muchas otras como el color de fondo (android:background), estilo de fuente (android:typeface), color de fuente (android:textcolor), tamao de fuente (android:textSize), etc. 1 <Button android:id="@+id/BtnBoton1" android:text="Plsame" 2 android:layout_width="wrap_content" 3 android:layout_height="wrap_content" /> 4

Control ToggleButton [API]

Un control de tipo ToggleButton es un tipo de botn que puede permanecer en dos estados, pulsado/no_pulsado. En este caso, en vez de definir un slo texto para el control definiremos dos, dependiendo de su estado. As, podremos asignar las propiedades android:textOn y android:textoOff para definir ambos textos. Veamos un ejemplo a continuacin. 1 <ToggleButton android:id="@+id/BtnBoton2" android:textOn="ON" 2 android:textOff="OFF" 3 android:layout_width="wrap_content" 4 android:layout_height="wrap_content" /> 5

Control ImageButton [API]

En un control de tipo ImageButton podremos definir una imagen a mostrar en vez de un texto, para lo que deberemos asignar la propiedad android:src. Normalmente asignaremos esta propiedad con el descriptor de algn recurso que hayamos incluido en la carpeta /res/drawable. As, por ejemplo, en nuestro

caso hemos incluido una imagen llamada ok.png por lo que haremos referencia al recurso @drawable/ok. 1 <ImageButton android:id="@+id/BtnBoton3" android:layout_width="wrap_content" 2 android:layout_height="wrap_content" 3 android:src="@drawable/ok" /> 4

Eventos de un botn
Como podis imaginar, aunque estos controles pueden lanzar muchos otros eventos, el ms comn de todos ellos y el que querremos capturar en la mayora de las ocasiones es el evento onClick. Para definir la lgica de este evento tendremos que implementarla definiendo un nuevo objeto View.OnClickListener() y asocindolo al botn mediante el mtodo setOnClickListener(). La forma ms habitual de hacer esto es la siguiente:
1 final Button btnBoton1 = (Button)findViewById(R.id.BtnBoton1); 2 3 btnBoton1.setOnClickListener(new View.OnClickListener() { @Override 4 5 public void onClick(View arg0) 6 { 7 lblMensaje.setText("Botn 1 pulsado!"); 8 } 9 });

En el caso de un botn de tipo ToggleButton suele ser de utilidad conocer en qu estado ha quedado el botn tras ser pulsado, para lo que podemos utilizar su mtodo isChecked(). En el siguiente ejemplo se comprueba el estado del botn tras ser pulsado y se realizan acciones distintas segn el resultado. 1 2 final ToggleButton btnBoton2 = (ToggleButton)findViewById(R.id.BtnBoton2); 3 btnBoton2.setOnClickListener(new View.OnClickListener() { 4 @Override 5 public void onClick(View arg0) 6 { if(btnBoton2.isChecked()) 7 lblMensaje.setText("Botn 2: ON"); 8 else 9 lblMensaje.setText("Botn 2: OFF"); 10 } 11 }); 12

Personalizar el aspecto un botn [y otros controles]

En la imagen anterior vimos el aspecto que presentan por defecto los tres tipos de botones disponibles. Pero, y si quisiramos personalizar su aspecto ms all de cambiar un poco el tipo o el color de la letra o el fondo? Para cambiar la forma de un botn podramos simplemente asignar una imagen a la propiedad android:background, pero esta solucin no nos servira de mucho porque siempre se mostrara la misma imagen incluso con el botn pulsado, dando poca sensacin de elemento clickable. La solucin perfecta pasara por tanto por definir diferentes imgenes de fondo dependiendo del estado del botn. Pues bien, Android nos da total libertad para hacer esto mediante el uso de selectores. Un selector se define mediante un fichero XML localizado en la carpeta /res/drawable, y en l se pueden establecer los diferentes valores de una propiedad determinada de un control dependiendo de su estado. Por ejemplo, si quisiramos dar un aspecto plano a un botn ToggleButton, podramos disear las imgenes necesarias para los estados pulsado (en el ejemplo toggle_on.png) y no pulsado (en el ejemplo toggle_off.png) y crear un selector como el siguiente:

1 <?xml version="1.0" encoding="UTF-8"?> 2 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 3 4 <item android:state_checked="false" 5 android:drawable="@drawable/toggle_off" /> 6 7 <item android:state_checked="true" 8 android:drawable="@drawable/toggle_on" /> 9 10 </selector> Este selector lo guardamos por ejemplo en un fichero llamado toggle_style.xml y lo colocamos como un recurso ms en nuestra carpeta de recursos /res/drawable. Hecho esto, tan slo bastara hacer referencia a este nuevo recurso que hemos creado en la propiedad android:background del botn: 1 <ToggleButton android:id="@+id/BtnBoton4" android:textOn="ON" 2 android:textOff="OFF" 3 android:padding="10dip" 4 android:layout_width="wrap_content" 5 android:layout_height="wrap_content" 6 android:background="@drawable/toggle_style"/> 7 En la siguiente imagen vemos el aspecto por defecto de un ToggleButton y cmo ha quedado nuestro ToggleButton personalizado.

Podis descargar el cdigo fuente de este artculo pulsando aqu: android-botones.

Controles bsicos (II)

Despus de haber hablado en el artculo anterior de los controles de tipo botn, en esta nueva entrega nos vamos a centrar en otros tres componentes bsicos imprescindibles en nuestras aplicaciones: las imgenes (ImageView), las etiquetas (TextView) y por ltimo los cuadros de texto (EditText).

Control ImageView [API]

El control ImageView permite mostrar imgenes en la aplicacin. La propiedad ms 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. Adems de esta propiedad, existen algunas otras tiles en algunas ocasiones como las destinadas a establecer el tamao mximo que puede ocupar la imagen, android:maxWidth y android:maxHeight. 1 <ImageView android:id="@+id/ImgFoto" android:layout_width="wrap_content" 2 android:layout_height="wrap_content" 3 android:src="@drawable/icon" /> 4 En la lgica de la aplicacin, podramos establecer la imagen mediante el mtodo setImageResorce(), pasndole el ID del recurso a utilizar como contenido de la imagen. 1 ImageView img= (ImageView)findViewById(R.id.ImgFoto); 2 img.setImageResource(R.drawable.icon);

Control TextView [API]

El control TextView es otro de los clsicos en la programacin 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 ms 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 (tamao de la fuente) y android:typeface (estilo del texto: negrita, cursiva, ). 1 <TextView android:id="@+id/LblEtiqueta" android:layout_width="fill_parent" 2 android:layout_height="wrap_content" 3 android:text="Escribe algo:" 4 android:background="#AA44FF" 5 android:typeface="monospace" /> 6 De igual forma, tambin podemos manipular estas propiedades desde nuestro cdigo. Como ejemplo, en el siguiente fragmento recuperamos el texto de una etiqueta con getText(), y posteriormente le concatenamos unos nmeros, actualizamos su contenido mediante setText() y le cambiamos su color de fondo con setBackgroundColor(). 1 final TextView lblEtiqueta = (TextView)findViewById(R.id.LblEtiqueta); 2 String texto = lblEtiqueta.getText().toString(); 3 texto += "123"; 4 lblEtiqueta.setText(texto);

Control EditText [API]

El control EditText es el componente de edicin de texto que proporciona la plataforma Android. Permite la introduccin y edicin de texto por parte del usuario, por lo que en tiempo de diseo la propiedad ms interesante a establecer, adems de su posicin/tamao y formato, es el texto a mostrar, atributo android:text. 1 <EditText android:id="@+id/TxtTexto" android:layout_width="fill_parent" 2 android:layout_height="wrap_content" 3 android:layout_below="@id/LblEtiqueta" /> 4 De igual forma, desde nuestro cdigo podremos recuperar y establecer este texto mediante los mtodos getText() y setText(nuevoTexto) respectivamente: 1 final EditText txtTexto = (EditText)findViewById(R.id.TxtTexto); 2 String texto = txtTexto.getText().toString(); 3 txtTexto.setText("Hola mundo!"); Un detalle que puede haber pasado desapercibido. Os habis fijado en que hemos tenido que hacer un toString() sobre el resultado de getText()? La explicacin para esto es que el mtodo getText() no devuelve un String sino un objeto de tipo Editable, que a su vez implementa la interfaz Spannable. Y esto nos lleva a la caracterstica ms interesante del control EditText, y es que no slo nos permite editar texto plano sino tambin texto enriquecido o con formato. Veamos cmo y qu opciones tenemos, y para empezar comentemos algunas cosas sobre los objetos Spannable.

Interfaz Spanned
Un objeto de tipo Spanned es algo as como una cadena de caracteres (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 modificacin de estas marcas, y a su vez de sta ltima deriva la interfaz Editable, que permite adems la modificacin del texto. Aunque en el apartado en el que nos encontramos nos interesaremos principalmente por las marcas de formato de texto, en principio podramos 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 tamao de fuente.

De esta forma, para crear un nuevo objeto Editable e insertar una marca de formato podramos hacer lo siguiente:

//Creamos un nuevo objeto de tipo Editable 1 Editable str = Editable.Factory.getInstance().newEditable("Esto es un 2 simulacro."); 3 4 //Marcamos cono fuente negrita la palabra "simulacro" 5 str.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), 11, 19, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); En este ejemplo estamos insertando un span de tipo StyleSpan para marcar un fragmento de texto con estilo negrita. Para insertarlo utilizamos el mtodo setSpan(), que recibe como parmetro el objeto Span a insertar, la posicin inicial y final del texto a marcar, y un flag que indica la forma en la que el span se podr extender al insertarse nuevo texto.

Texto con formato en controles TextView y EditText

Hemos visto cmo crear un objeto Editable y aadir marcas de formato al texto que contiene, pero todo esto no tendra ningn sentido si no pudiramos visualizarlo. Como ya podis imaginar, los controles TextView y EditText nos van a permitir hacer esto. Vemos qu ocurre si asignamos al nuestro control EditText el objeto Editable que hemos creado antes: 1 txtTexto.setText(str); Tras ejecutar este cdigo veremos como efectivamente en el cuadro de texto aparece el mensaje con el formato esperado:

Ya hemos visto cmo asignar texto con y sin formato a un cuadro de texto, pero qu ocurre a la hora de recuperar texto con formato desde el control?. Ya vimos que la funcin getText() devuelve un objeto de tipo Editable y que sobre ste podamos hacer un toString(). Pero con esta solucin estamos perdiendo todo el formato del texto, por lo que no podramos por ejemplo salvarlo a una base de datos. La solucin a esto ltimo pasa obviamente por recuperar directamente el objeto Editable y serializarlo de algn modo, mejor an si es en un formato estandar. Pues bien, en Android este trabajo ya nos viene hecho de fbrica a travs de la clase Html [API], que dispone de mtodos para convertir cualquier objeto Spanned en su representacin HTML equivalente. Veamos cmo.

Recuperemos el texto de la ventana anterior y utilicemos el mtodo Html.toHtml(Spannable) para convertirlo a formato HTML: 1 //Obtiene el texto del control con etiquetas de formato HTML 2 String aux2 = Html.toHtml(txtTexto.getText()); Haciendo esto, obtendramos una cadena de texto como la siguiente, que ya podramos por ejemplo almacenar en una base de datos o publicar en cualquier web sin perder el formato de texto establecido: 1 <p>Esto es un <b>simulacro</b>.</p> La operacin contraria tambin es posible, es decir, cargar un cuadro de texto de Android (EditText) o una etiqueta (TextView) a partir de un fragmento de texto en formato HTML. Para ello podemos utilizar el mtodo Html.fromHtml(String) de la siguiente forma: 1 //Asigna texto con formato HTML 2 txtTexto.setText( Html.fromHtml("<p>Esto es un <b>simulacro</b>.</p>"), 3 BufferType.SPANNABLE); 4 Desgraciadamente, aunque es de agradecer que este trabajo venga hecho de casa, hay que decir que tan slo funciona de forma completa con las opciones de formato ms bsicas, como negritas, cursivas, subrayado o colores de texto, quedando no soportadas otras sorprendentemente bsicas como el tamao del texto, que aunque s es correctamente traducido por el mtodo toHtml(), es descartado por el mtodo contrario fromHtml(). S se soporta la inclusin de imgenes, aunque esto lo dejamos para un artculo aparte (prometido!) ya que requiere algo ms de explicacin. Podis descargar parte del cdigo de este artculo desde este enlace.

Controles bsicos (III)

Tras hablar de varios de los controles indispensables en cualquier aplicacin Android, como son los botones y los cuadros de texto, en este artculo vamos a ver cmo utilizar otros dos tipos de controles bsicos en muchas aplicaciones, los checkboxes y los radio buttons.

Control CheckBox [API]

Un control checkbox se suele utilizar para marcar o desmarcar opciones en una aplicacin, y en Android est representado por la clase del mismo nombre, CheckBox. La forma de definirlo en nuestra interfaz y los mtodos disponibles para manipularlos desde nuestro cdigo son anlogos a los ya comentados para el control ToggleButton. De esta forma, para definir un control de este tipo en nuestro layout podemos utilizar el cdigo siguiente, que define un checkbox con el texto Mrcame: 1 <CheckBox android:id="@+id/ChkMarcame" android:layout_width="wrap_content" 2 android:layout_height="wrap_content" 3 android:text="Mrcame!" /> 4 En cuanto a la personalizacin del control podemos decir que ste extiende [indirectamente] del control TextView, por lo que todas las opciones de formato ya comentadas en artculos anteriores son vlidas tambin para este control. En el cdigo de la aplicacin podremos hacer uso de los mtodos isChecked() para conocer el estado del control, y setChecked(estado) para establecer un estado concreto para el control. 1 if (checkBox.isChecked()) { checkBox.setChecked(false); 2 3} En cuanto a los posibles eventos que puede lanzar este control, el ms interesante es sin duda el que informa de que ha cambiado el estado del control, que recibe el nombre de onCheckedChanged. Para implementar las acciones de este evento podramos utilizar por tanto la siguiente lgica: 1 final CheckBox cb = (CheckBox)findViewById(R.id.chkMarcame); 2 3 cb.setOnCheckedChangeListener( new CheckBox.OnCheckedChangeListener() { 4 public void onCheckedChanged(CompoundButton buttonView, 5 6 boolean isChecked) { 7 if (isChecked) { 8 cb.setText("Checkbox marcado!"); 9 } 10 else { 11 cb.setText("Checkbox desmarcado!"); 12 } 13 } 14 });

Control RadioButton [API]

Al igual que los controles checkbox, un radiobutton puede estar marcado o desmarcado, pero en este caso suelen utilizarse dentro de un grupo de opciones donde una, y slo una, de ellas debe estar marcada obligatoriamente, es decir, que si se marca una de ellas se desmarcar automticamente la que estuviera activa anteriormente. En Android, un grupo de botones radiobutton se define mediante un elemento RadioGroup, que a su vez contendr todos los elementos RadioButton necesarios. Veamos un ejemplo de cmo definir un grupo de dos controles radiobutton en nuestra interfaz: 1 <RadioGroup android:id="@+id/gruporb" android:orientation="vertical" 2 android:layout_width="fill_parent" 3 android:layout_height="fill_parent" > 4 5 <RadioButton android:id="@+id/radio1" android:layout_width="wrap_content" 6 android:layout_height="wrap_content" 7 android:text="Opcin 1" /> 8 9 <RadioButton android:id="@+id/radio2" 10 android:layout_width="wrap_content" 11 android:layout_height="wrap_content" 12 android:text="Opcin 2" /> 13 </RadioGroup> En primer lugar vemos cmo podemos definir el grupo de controles indicando su orientacin (vertical u horizontal) al igual que ocurra por ejemplo con un LinearLayout. Tras esto, se aaden 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 cdigo java haciendo uso de los diferentes mtodos del control RadioGroup, los ms importantes: check(id) para marcar una opcin determinada mediante su ID, clearCheck() para desmarcar todas las opciones, y getCheckedRadioButtonId() que como su nombre indica devolver el ID de la opcin marcada (o el valor -1 si no hay ninguna marcada). Veamos un ejemplo: 1 final RadioGroup rg = (RadioGroup)findViewById(R.id.gruporb); 2 rg.clearCheck(); 3 rg.check(R.id.radio1); 4 int idSeleccionado = rg.getCheckedRadioButtonId(); En cuanto a los eventos lanzados, al igual que en el caso de los checkboxes, el ms importante ser el que informa de los cambios en el elemento seleccionado, llamado tambin en este caso onCheckedChange. Vemos cmo tratar este evento del objeto RadioGroup: 1 final RadioGroup rg = (RadioGroup)findViewById(R.id.gruporb); 2 3 rg.setOnCheckedChangeListener( new RadioGroup.OnCheckedChangeListener() { 4 5 public void onCheckedChanged(RadioGroup group, int checkedId) { 6 lblMensaje.setText("ID opcion seleccionada: " + checkedid); 7 } 8 }); Veamos finalmente una imagen del aspecto de estos dos nuevos tipos de controles bsicos que hemos comentado en este artculo:

Podis descargar el cdigo de este artculo desde este enlace.

Controles de seleccin (I)

Una vez repasados los controles bsicos (I, II, III) que podemos utilizar en nuestras aplicaciones Android, vamos a dedicar los prximos artculos a describir los diferentes controles de seleccin disponibles en la plataforma. Al igual que en otros frameworks Android dispone de diversos controles que nos permiten seleccionar una opcin dentro de una lista de posibilidades. As, podremos utilizar listas desplegables (Spinner), listas fijas (ListView), tablas (GridView) y otros controles especficos de la plataforma como por ejemplo las galeras de imgenes (Gallery). En este primer artculo dedicado a los controles de seleccin vamos a describir un elemento importante y comn a todos ellos, los adaptadores, y lo vamos a aplicar al primer control de los indicados, las listas desplegables.

Adaptadores en Android (adapters)

Para los desarrolladores de java que hayan utilizado frameworks de interfaz grfica como Swing, el concepto de adaptador les resultar familiar. Un adaptador representa algo as como una interfaz comn al modelo de datos que existe por detrs de todos los controles de seleccin que hemos comentado. Dicho de otra forma, todos los controles de seleccin accedern a los datos que contienen a travs de un adaptador. Adems de proveer de datos a los controles visuales, el adaptador tambin ser responsable de generar a partir de estos datos las vistas especficas que se mostrarn dentro del control de seleccin. 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 ms comunes son los siguientes: ArrayAdapter. Es el ms sencillo de todos los adaptadores, y provee de datos a un control de seleccin 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 sobre los diferentes elementos visuales contenidos en el control de seleccin. 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 seleccin disponibles. Ms adelante aprenderemos a utilizar el resto de adaptadores en contextos ms especficos. Veamos cmo crear un adaptador de tipo ArrayAdapter para trabajar con un array genrico de java:
1 2 final String[] datos =new String[]{"Elem1","Elem2","Elem3","Elem4","Elem5"}; 3 4 ArrayAdapter<String> adaptador = 5 new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, datos); 6

Comentemos un poco el cdigo. Sobre la primera lnea no hay nada que decir, es tan slo la definicin 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 lnea creamos el adaptador en s, al que pasamos 3 parmetros: 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 mostrarn 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 podramos pasarle el ID de cualquier layout de nuestro proyecto con cualquier estructura y conjunto de controles, ms adelante veremos cmo. 3. El array que contiene los datos a mostrar. Con esto ya tendramos creado nuestro adaptador para los datos a mostrar y ya tan slo nos quedara asignar este adaptador a nuestro control de seleccin para que ste mostrase los datos en la aplicacin.

Control Spinner [API]

Las listas desplegables en Android se llaman Spinner. Funcionan de forma similar al de 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. Para aadir una lista de este tipo a nuestra aplicacin podemos utilizar el cdigo siguiente: 1 <Spinner android:id="@+id/CmbOpciones" android:layout_width="fill_parent" 2 android:layout_height="wrap_content" /> 3 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 tamao de fuente, ) son las mismas ya comentadas para los controles bsicos. Para enlazar nuestro adaptador (y por tanto nuestros datos) a este control utilizaremos el siguiente cdigo java:
1 final Spinner cmbOpciones = (Spinner)findViewById(R.id.CmbOpciones); 2 3 adaptador.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); 4 5 cmbOpciones.setAdapter(adaptador); 6

Comenzamos como siempre por obtener una referencia al control a travs de su ID. Y en la ltima lnea asignamos el adaptador al control mediante el mtodo setAdapter(). Y la segunda lnea para qu es? Cuando indicamos en el apartado anterior cmo construir un adaptador vimos cmo uno de los parmetros que le pasbamos era el ID del layout que utilizaramos para visualizar los elementos del control. Sin embargo, en el caso del control Spinner, este layout tan slo 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 tambin el aspecto de cada elemento en dicha lista emergente tenemos el mtodo setDropDownViewResource(ID_layout), al que podemos pasar otro ID de layout distinto al primero sobre el que se mostrarn 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). Con estas simples lineas de cdigo conseguiremos mostrar un control como el que vemos en las siguientes imgenes:

Como se puede observar en las imgenes, la representacin del elemento seleccionado (primera imagen) y el de las opciones disponibles (segunda imagen) es distinto, incluyendo el segundo de ellos incluso algn elemento grfico a la derecha para mostrar el estado de cada opcin. Como hemos comentado, esto es debido a la utilizacin de dos layouts diferentes para uno y otros elementos. En cuanto a los eventos lanzados por el control Spinner, el ms comunmente utilizado ser el generado al seleccionarse una opcin 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 mtodo setOnItemSelectedListener(): 1 2 cmbOpciones.setOnItemSelectedListener( new AdapterView.OnItemSelectedListener() { 3 public void onItemSelected(AdapterView<?> parent, 4 android.view.View v, int position, long id) { 5 lblMensaje.setText("Seleccionado: " + datos[position]); } 6 7 public void onNothingSelected(AdapterView<?> parent) { 8 lblMensaje.setText(""); 9 } 10 }); 11 Para este evento definimos dos mtodos, el primero de ellos (onItemSelected) que ser llamado cada vez que se selecciones una opcin en la lista desplegable, y el segundo (onNothingSelected) que se llamar cuando no haya ninguna opcin seleccionada (esto puede ocurrir por ejemplo si el adaptador no tiene datos). Podis descargar el cdigo fuente de este artculo pulsando aqu.

Controles de seleccin (II)

En el artculo anterior ya comenzamos a hablar de los controles de seleccin en Android, empezando por explicar el concepto de adaptador y describiendo el control Spinner. En este nuevo artculo nos vamos a centrar en el control de seleccin ms utilizado de todos, el:

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 ms 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 aadir un control ListView a nuestra interfaz de usuario: 1 <ListView android:id="@+id/LstOpciones" android:layout_width="wrap_content" 2 android:layout_height="wrap_content" /> 3 Una vez ms, podremos modificar el aspecto del control utilizando las propiedades de fuente y color ya comentadas en artculos anteriores. Por su parte, para enlazar los datos con el control podemos utlizar por ejemplo el mismo cdigo 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 mtodo setAdapter(): 1 2 final String[] datos = new String[]{"Elem1","Elem2","Elem3","Elem4","Elem5"}; 3 4 5 ArrayAdapter<String> adaptador = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, datos); 6 7 ListView lstOpciones = (ListView)findViewById(R.id.LstOpciones); 8 9 lstOpciones.setAdapter(adaptador); 10 En este caso, para mostrar los datos de cada elemento hemos utilizado otro layout genrico de Android para los controles de tipo ListView (android.R.layout.simple_list_item_1), formado nicamente por un TextView con unas dimensiones determinadas. La lista creada quedara como se muestra en la imagen siguiente:

Como podis comprobar el uso bsico del control ListView es completamente anlogo al ya comentado para el control Spinner. Si quisiramos realizar cualquier accin al pulsarse sobre un elemento de la lista creada tendremos que implementar el evento onItemClick. Veamos cmo con un ejemplo: lstOpciones.setOnItemClickListener(new OnItemClickListener() { 1 @Override 2 public void onItemClick(AdapterView<?> a, View v, int position, long id) 3 { 4 //Acciones necesarias al hacer click 5 } 6 }); Hasta aqu todo sencillo. Pero, y si necesitamos mostrar datos ms 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 artculo dedicado a los ListView para ver cmo podramos conseguirlo, aunque todo lo que comentar es extensible a otros controles de seleccin. Para no complicar mucho el tema vamos a hacer que cada elemento de la lista muestre por ejemplo dos lneas de texto a modo de ttulo y subttulo con formatos diferentes (por supuesto se podran aadir muchos ms elementos, por ejemplo imgenes, checkboxes, etc). En primer lugar vamos a crear una nueva clase java para contener nuestros datos de prueba. Vamos a llamarla Titular y tan slo va a contener dos atributos, ttulo y subttulo.

1 package net.sgoliver; 2 3 public class Titular 4 { private String titulo; 5 private String subtitulo; 6 7 8 public Titular(String tit, String sub){ titulo = tit; 9 subtitulo = sub; 10 } 11 12 13 public String getTitulo(){ 14 return titulo; 15 } 16 17 public String getSubtitulo(){ 18 return subtitulo; 19 } 20 } 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 tamao de letra un poco mayor. Llamaremos a este layout listitem_titular.xml: 1 <?xml version="1.0" encoding="utf-8"?> 2 3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4 android:layout_width="wrap_content" 5 android:layout_height="wrap_content" 6 android:orientation="vertical"> 7 8 9 <TextView android:id="@+id/LblTitulo" android:layout_width="fill_parent" 10 android:layout_height="wrap_content" 11 android:textStyle="bold" 12 android:textSize="20px" /> 13 14 15 <TextView android:id="@+id/LblSubTitulo" android:layout_width="fill_parent" 16 android:layout_height="wrap_content" 17 android:textStyle="normal" 18 19 android:textSize="12px" /> 20 21 </LinearLayout> 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 cmo debe utilizar ambas cosas para generar nuestra interfaz de usuario final. Para ello vamos a crear nuestro propio adaptador extendiendo de la clase ArrayAdapter.

class AdaptadorTitulares extends ArrayAdapter { 1 Activity context; 2 3 AdaptadorTitulares(Activity context) { 4 super(context, R.layout.listitem_titular, datos); 5 this.context = context; 6 } 7 8 public View getView(int position, View convertView, ViewGroup parent) 9 { 10 LayoutInflater inflater = context.getLayoutInflater(); 11 View item = inflater.inflate(R.layout.listitem_titular, null); 12 13 TextView lblTitulo = 14 (TextView)item.findViewById(R.id.LblTitulo); 15 lblTitulo.setText(datos[position].getTitulo()); 16 17 TextView lblSubtitulo = 18 (TextView)item.findViewById(R.id.LblSubTitulo); 19 lblSubtitulo.setText(datos[position].getSubtitulo()); 20 21 return(item); 22 } } Analicemos el cdigo anterior. Lo primero que encontramos es el constructor para nuestro adaptador, al que slo pasaremos el contexto (que ser la actividad desde la que se crea el adaptador). En este constructor tan slo guardaremos el contexto para nuestro uso posterior y llamaremos al constructor padre tal como ya vimos al principio de este artculo, pasndole el ID del layout que queremos utilizar (en nuestro caso el nuevo que hemos creado, listitem_titular) y el array que contiene los datos a mostrar. Posteriormente, redefinimos el mtodo encargado de generar y rellenar con nuestros datos todos los controles necesarios de la interfaz grfica de cada elemento de la lista. Este mtodo es getView(). El mtodo 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 mtodo inflate(id_layout). Tras esto, tan slo tendremos que obtener la referencia a cada una de nuestras etiquetas como siempre lo hemos hecho y asignar su texto correspondiente segn los datos de nuestro array y la posicin del elemento actual (parmetro position del mtodo getView()). Una vez tenemos definido el comportamiento de nuestro adaptador la forma de proceder en la actividad principal ser anloga a lo ya comentado, definiremos el array de datos de prueba, crearemos el adaptador y lo asignaremos al control mediante setAdapter():

1 private Titular[] datos = new Titular[]{ 2 new Titular("Ttulo 1", "Subttulo largo 1"), 3 new Titular("Ttulo 2", "Subttulo largo 2"), 4 5 new Titular("Ttulo 3", "Subttulo largo 3"), 6 new Titular("Ttulo 4", "Subttulo largo 4"), 7 new Titular("Ttulo 5", "Subttulo largo 5")}; 8 9 //... 10 //... 11 12 AdaptadorTitulares adaptador = 13 new AdaptadorTitulares(this); 14 15 ListView lstOpciones = (ListView)findViewById(R.id.LstOpciones); 16 17 lstOpciones.setAdapter(adaptador); Hecho esto, y si todo ha ido bien, nuestra nueva lista debera quedar como vemos en la imagen siguiente:

Podis descargar el cdigo de este artculo desde este enlace.

Controles de seleccin (III)

En el artculo anterior ya vimos cmo utilizar los controles de tipo ListView en Android. Sin embargo, acabamos comentando que exista una forma ms eficiente de hacer uso de dicho control, de forma que la respuesta de nuestra aplicacin fuera ms agil y se reduciese el consumo de batera, algo que en plataformas mviles siempre es importante. Como base para este artculo vamos a utilizar como cdigo que ya escribimos en el artculo anterior, por lo que si has llegado hasta aqu directamente te recomiendo que leas primero el primer post dedicado al control ListView. Cuando comentamos cmo crear nuestro propio adaptador, extendiendo de ArrayAdapter, para personalizar la forma en que nuestros datos se iban a mostrar en la lista escribimos el siguiente cdigo: 1 2 AdaptadorTitulares(Activity context) { 3 super(context, R.layout.listitem_titular, datos); 4 this.context = context; 5 } 6 7 public View getView(int position, View convertView, ViewGroup 8 parent) { 9 LayoutInflater inflater = context.getLayoutInflater(); 10 View item = inflater.inflate(R.layout.listitem_titular, null); 11 12 TextView lblTitulo = 13 (TextView)item.findViewById(R.id.LblTitulo); 14 lblTitulo.setText(datos[position].getTitulo()); 15 16 TextView lblSubtitulo = 17 (TextView)item.findViewById(R.id.LblSubTitulo); 18 lblSubtitulo.setText(datos[position].getSubtitulo()); 19 20 return(item); 21 } } Centrndonos en la definicin del mtodo getView() vimos que la forma normal de proceder consista en primer lugar en inflar nuestro layout XML personalizado para crear todos los objetos correspondientes (con la estructura descrita en el XML) y posteriormente acceder a dichos objetos para modificar sus propiedades. Sin embargo, hay que tener en cuenta que esto se hace todas y cada una de las veces que se necesita mostrar un elemento de la lista en pantalla, se haya mostrado ya o no con anterioridad, ya que Android no guarda los elementos de la lista que desaparecen de pantalla (por ejemplo al hacer scroll sobre la lista). El efecto de esto es obvio, dependiendo del tamao de la lista y sobre todo de la complejidad del layout que hayamos definido esto puede suponer la creacin y destruccin de cantidades ingentes de objetos (que puede que ni siquiera nos sean necesarios), es decir, que la accin de inflar un layout XML puede ser bastante costosa, lo que podra aumentar mucho, y sin necesidad, el uso de CPU, de memoria, y de batera. Para aliviar este problema, Android nos propone un mtodo que permite reutilizar algn layout que ya hayamos inflado con anterioridad y que ya no nos haga falta por algn motivo, por ejemplo porque el elemento correspondiente de la lista ha desaparecido de la pantalla al hacer scroll. De esta forma evitamos todo el trabajo de crear y estructurar todos los objetos asociados al layout, por lo que tan slo nos quedara class AdaptadorTitulares extends ArrayAdapter { Activity context;

obtener la referencia a ellos mediante findViewById() y modificar sus propiedades. Pero cmo podemos reutilizar estos layouts obsoletos? Pues es bien sencillo, siempre que exista algn layout que pueda ser reutilizado ste se va a recibir a travs del parmetro convertView del mtodo getView(). De esta forma, en los casos en que ste no sea null podremos obviar el trabajo de inflar el layout. Veamos cmo quedara el mtod getView() tras esta optimizacin: 1 public View getView(int position, View convertView, ViewGroup parent) { 2 View item = convertView; 3 4 if(item == null) 5 { 6 LayoutInflater inflater = context.getLayoutInflater(); 7 item = inflater.inflate(R.layout.listitem_titular, null); 8 } 9 10 TextView lblTitulo = (TextView)item.findViewById(R.id.LblTitulo); 11 lblTitulo.setText(datos[position].getTitulo()); 12 13 TextView lblSubtitulo = 14 (TextView)item.findViewById(R.id.LblSubTitulo); 15 lblSubtitulo.setText(datos[position].getSubtitulo()); 16 17 return(item); 18 } Si aadimos ms elementos a la lista y ejecutamos ahora la aplicacin podemos comprobar que al hacer scroll sobre la lista todo sigue funcionando con normalidad, con la diferencia de que le estamos ahorrando gran cantidad de trabajo a la CPU.

Pero vamos a ir un poco ms all. Con la optimizacin que acabamos de implementar conseguimos ahorrarnos el trabajo de inflar el layout definido cada vez que se muestra un nuevo elemento. Pero an hay otras dos llamadas relativamente costosas que se siguen ejecutando en todas las llamadas. Me refiero a la obtencin de la referencia a cada uno de los objetos a modificar mediante el mtodo findViewById(). La bsqueda por ID de un control determinado dentro del rbol de objetos de un layout tambin puede ser una tarea costosa dependiendo de la complejidad del propio layout.Por qu no aprovechamos que estamos guardando un layout anterior para guardar tambin la referencia a los controles que lo forman de forma que no tengamos que volver a buscarlos? Pues eso es exactamente lo que vamos a hacer mediante lo que en los ejemplos de Android llaman un ViewHolder. La clase ViewHolder tan slo va a contener una

referencia a cada uno de los controles que tengamos que manipular de nuestro layout, en nuestro caso las dos etiquetas de texto. Definamos por tanto esta clase de la siguiente forma: 1 static class ViewHolder { TextView titulo; 2 TextView subtitulo; 3 4} La idea ser por tanto crear e inicializar el objeto ViewHolder la primera vez que inflemos un elemento de la lista y asociarlo a dicho elemento de forma que posteriormente podamos recuperarlo fcilmente. Pero dnde lo guardamos? Fcil, en Android todos los controles tienen una propiedad llamada Tag (podemos asignarla y recuperarla mediante los mtodos setTag() y getTag() respectivamente) que puede contener cualquier tipo de objeto, por lo que resulta ideal para guardar nuestro objeto ViewHolder. De esta forma, cuando el parmetro convertView llegue informado sabremos que tambin tendremos disponibles las referencias a sus controles hijos a travs de la propiedad Tag. Veamos el cdigo modificado de getView() para aprovechar esta nueva optimizacin: 1 public View getView(int position, View convertView, ViewGroup parent) { 2 View item = convertView; 3 ViewHolder holder; 4 5 if(item == null) 6 { 7 LayoutInflater inflater = context.getLayoutInflater(); 8 item = inflater.inflate(R.layout.listitem_titular, null); 9 10 holder = new ViewHolder(); 11 holder.titulo = (TextView)item.findViewById(R.id.LblTitulo); 12 holder.subtitulo = 13 (TextView)item.findViewById(R.id.LblSubTitulo); 14 15 item.setTag(holder); 16 } 17 else 18 { 19 holder = (ViewHolder)item.getTag(); 20 } 21 22 holder.titulo.setText(datos[position].getTitulo()); 23 holder.subtitulo.setText(datos[position].getSubtitulo()); 24 25 return(item); 26 } Con estas dos optimizaciones hemos conseguido que la aplicacin sea mucho ms respetuosa con los recursos del dispositivo de nuestros usuarios, algo que sin duda nos agradecern. Podis descargar el cdigo fuente de este artculo desde este enlace.

Controles de seleccin (IV)

Tras haber visto en artculos anteriores los dos controles de seleccin ms comunes en cualquier interfaz grfica, como son las listas desplegables (Spinner) y las listas fijas (ListView), tanto en su versin bsica como optimizada, en este nuevo artculo vamos a terminar de comentar los controles de seleccin con otro menos comn pero no por ello menos til, el control :

GridView.
El control GridView de Android presenta al usuario un conjunto de opciones seleccionables distribuidas de forma tabular, o dicho de otra forma, divididas en filas y columnas. Dada la naturaleza del control ya podis imaginar sus propiedades ms importantes, que paso a enumerar a continuacin: android:numColumns, indica el nmero de columnas de la tabla o auto_fit si queremos que sea calculado por el propio sistema operativo a partir de las siguientes propiedades. android:columnWidth, indica el ancho de las columnas de la tabla. android:horizontalSpacing, indica el espacio horizontal entre celdas. android:verticalSpacing, indica el espacio vertical entre celdas. android:stretchMode, indica qu hacer con el espacio horizontal sobrante. Si se establece al valor columnWidth este espacio ser absorbido a partes iguales por las columnas de la tabla. Si por el contrario se establece a spacingWidth ser absorbido a partes iguales por los espacios entre celdas. Veamos cmo definiramos un GridView de ejemplo en nuestra aplicacin: 1 <GridView android:id="@+id/GridOpciones" android:layout_width="fill_parent" 2 android:layout_height="fill_parent" 3 android:numColumns="auto_fit" 4 android:columnWidth="80px" 5 android:horizontalSpacing="5px" 6 android:verticalSpacing="10px" 7 android:stretchMode="columnWidth" /> 8 Una vez definida la interfaz de usuario, la forma de asignar los datos desde el cdigo de la aplicacin es completamente anloga a la ya comentada tanto para las listas desplegables como para las listas estticas: creamos un array genrico que contenga nuestros datos de prueba, declaramos un adaptador de tipo ArrayAdapter pasndole en este caso un layout genrico (simple_list_item_1, compuesto por un simple TextView) y asociamos el adaptador al control GridView mediante su mtodo setAdapter(): 1 2 private String[] datos = new String[25]; 3 //... 4 for(int i=1; i<=25; i++) datos[i-1] = 5 ArrayAdapter<String> "Dato " + i; adaptador = 6 new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, datos); 7 8 final GridView grdOpciones = (GridView)findViewById(R.id.GridOpciones); 9 grdOpciones.setAdapter(adaptador); 10

Por defecto, los datos del array se aadirn al control GridView ordenados por filas, y por supuesto, si no caben todos en la pantalla se podr hacer scroll sobre la tabla. Vemos en una imagen cmo queda nuestra aplicacin de prueba:

En cuanto a los eventos disponibles, el ms interesante vuelve a ser el lanzado al seleccionarse una celda determinada de la tabla: onItemSelected. Este evento podemos capturarlo de la misma forma que hacamos con los controles Spinner y ListView. Veamos un ejemplo de cmo hacerlo: 1 grdOpciones.setOnItemSelectedListener( 2 new AdapterView.OnItemSelectedListener() { 3 public void onItemSelected(AdapterView<?> parent, 4 android.view.View v, int position, long id) { 5 lblMensaje.setText("Seleccionado: " + datos[position]); 6 } 7 public void onNothingSelected(AdapterView<?> parent) { 8 lblMensaje.setText(""); 9 } 10 11 }); Todo lo comentado hasta el momento se refiere al uso bsico del control GridView, pero por supuesto podramos aplicar de forma practicamente directa todo lo comentado para las listas en los dos artculos anteriores, es decir, la personalizacin de las celdas para presentar datos complejos creando nuestro propio adaptador, y las distintas optimizaciones para mejorar el rendiemiento de la aplicacin y el gasto de batera. Y con esto finalizamos todo lo que tena previsto contar sobre los distintos controles disponibles de serie en Android para construir nuestras interfaces de usuario. Existen muchos ms, y es posible que los comentemos ms adelante en algn otro artculo, pero por el momento nos vamos a conformar con los ya vistos. En el prximo artculo, y para terminar con la serie dedicada a los controles Android, veremos las distintas formas de crear controles de usuario personalizados. Podis descargar el cdigo fuente de este artculo desde este enlace.

Controles personalizados (I)

En artculos anteriores de la serie hemos conocido y aprendido a utilizar muchos de los controles que proporciona Android en su SDK. Con la ayuda de estos controles podemos disear interfaces grficas de lo ms variopinto pero en ocasiones, si queremos dar un toque especial y original a nuestra aplicacin, o simplemente si necesitamos cierta funcionalidad no presente en los componentes estandar de Android, nos vemos en la necesidad de crear nuestros propios controles personalizados, diseados a medida de nuestros requisitos. Android admite por supuesto crear controles personalizados, y permite hacerlo de diferentes formas: 1. Extendiendo la funcionalidad de un control ya existente. 2. Combinando varios controles para formar un otro ms complejo. 3. Diseando desde cero un nuevo control. En este primer artculo sobre el tema vamos a hablar de la primera opcin, es decir, vamos a ver cmo podemos crear un nuevo control partiendo de la base de un control ya existente. A modo de ejemplo, vamos a extender el control

EditText
(cuadro de texto) para que muestre en todo momento el nmero de caracteres que contiene a medida que se escribe en l. Intentaramos emular algo as como el editor de mensajes SMS del propio sistema operativo, que nos avisa del nmero de carateres que contiene el mensaje. En nuestro caso, como resultado obtendremos un control como el que se muestra en la siguiente imagen:

Como vemos, en la esquina superior derecha del cuadro de texto vamos a mostrar el nmero de caracteres del mensaje de texto introducido, que ira actualizndose a medida que modificamos el texto. Para empezar, vamos a crear una nueva clase java que extienda del control que queremos utilizar como base, en este caso EditText. 1 public class ExtendedEditText extends EditText 2{ //... 3 4}

Tras esto, sobreescribiremos siempre los tres constructores heredados, donde por el momento nos limitaremos a llamar al mismo constructor de la clase padre. public ExtendedEditText(Context context, AttributeSet attrs, int 1 defStyle){ 2 super(context, attrs,defStyle); 3 } 4 5 public ExtendedEditText(Context context, AttributeSet attrs) { 6 super(context, attrs); 7 } 8 9 public ExtendedEditText(Context context) { 10 super(context); 11 } Por ltimo el paso ms importante. Dado que queremos modificar el aspecto del control para aadir el contador de caracteres tendremos que sobreescribir el evento onDraw(), que es llamado por Android cada vez que hay que redibujar el control en pantalla. Este mtodo recibe como parmetro un objeto Canvas, que no es ms que el lienzo sobre el que podemos dibujar todos los elementos extra necesarios en el control. El objeto Canvas, proporciona una serie de mtodos para dibujar cualquier tipo de elemento (lineas, rectngulos, elipses, texto, bitmaps, ) sobre el espacio ocupado por el control. En nuestro caso tan slo vamos a necesitar dibujar sobre el control un rectngulo que sirva de fondo para el contador y el texto del contador con el nmero de caracteres actual del cuadro de texto. No vamos a entrar en muchos detalles sobre la forma de dibujar grficos ya que se ser tema de otro artculo, pero vamos a ver al menos las acciones principales. En primer lugar definiremos los pinceles (objetos Paint) que utilizaremos para dibujar, uno de ellos (p1) de color negro y relleno slido para el fondo del contador, y otro (p2) de color blanco para el texto. 1 Paint p1 = new Paint(Paint.ANTI_ALIAS_FLAG); 2 p1.setColor(Color.BLACK); 3 p1.setStyle(Style.FILL); 4 5 Paint p2 = new Paint(Paint.ANTI_ALIAS_FLAG); 6 p2.setColor(Color.WHITE); Dado que estos elementos tan slo har falta crearlos la primera vez que se dibuje el control, para evitar trabajo innecesario no incluiremos su definicin en el mtodo onDraw(), sino que los definiremos como atributos de la clase y los inicializaremos en el constructor del control (en los tres). Una vez definidos los diferentes pinceles necesarios, dibujaremos el fondo y el texto del contador mediante los mtodos drawRect() y drawText(), respectivamente, del objeto canvas recibido en el evento. 1 @Override 2 public void onDraw(Canvas canvas) 3 { //Llamamos al mtodo de la clase base (EditText) 4 super.onDraw(canvas); 5 6 //Dibujamos el fondo negro del contador 7 canvas.drawRect(this.getWidth()-30, 5, 8 this.getWidth()-5, 20, p1); 9 10 //Dibujamos el nmero de caracteres sobre el contador 11 canvas.drawText("" + this.getText().toString().length(), 12 this.getWidth()-28, 17, p2); 13 14 }

Como puede comprobarse, a estos mtodos se les pasar como parmetro las coordenadas del elemento a dibujar relativas al espacio ocupado por el control y el pincel a utilizar en cada caso. Hecho esto, ya tenemos finalizado nuestro cuadro de texto personalizado con contador de caracteres. Para aadirlo a la interfaz de nuestra aplicacin lo incluiremos en el layout XML de la ventana tal como haramos con cualquier otro control, teniendo en cuenta que deberemos hacer referencia a l con el nombre completo de la nueva clase creada (incluido el paquete java), que en mi caso particular sera net.sgoliver.ExtendedEditText. 1 <net.sgoliver.ExtendedEditText android:id="@+id/TxtPrueba" 2 android:layout_width="fill_parent" 3 android:layout_height="wrap_content" /> 4 En el siguiente artculo veremos cmo crear un control personalizado utilizando la segunda de las opciones expuestas, es decir, combinando varios controles ya existentes. Comentaremos adems como aadir eventos y propiedades personalizadas a nuestro control y cmo hacer referencia a dichas propiedades desde su definicin XML. Podis descargar el cdigo de este artculo desde este enlace.

Controles personalizados (II)

Ya vimos cmo Android ofrece tres formas diferentes de crear controles personalizados para nuestras aplicaciones y dedicamos el artculo anterior a comentar la primera de las posibilidades, que consista en extender la funcionalidad de un control ya existente. En este segundo artculo sobre el tema vamos a centrarnos en la creacin de controles compuestos, es decir, controles personalizados construidos a partir de varios controles estandar, combinando la funcionalidad de todos ellos en un slo control reutilizable en otras aplicaciones. Como ejemplo ilustrativo vamos a crear un control de identificacin (login) formado por varios controles estandar de Android. La idea es conseguir un control como el que se muestra la siguiente imagen esquemtica:

A efectos didcticos, y para no complicar ms el ejemplo, vamos a aadir tambin a la derecha del botn Login una etiqueta donde mostrar el resultado de la identificacin del usuario (login correcto o incorrecto). A este control aadiremos adems eventos personalizados, veremos como aadirlo a nuestras aplicaciones, y haremos que se pueda personalizar su aspecto desde el layout XML de nuestra interfaz utilizando tambin atributos XML personalizados. Empecemos por el principio. Lo primero que vamos a hacer es construir la interfaz de nuestro control a partir de controles sencillos: etiquetas, cuadros de texto y botones. Para ello vamos a crear un nuevo layout XML en la carpeta \res\layout con el nombre control_login.xml. En este fichero vamos a definir la estructura del control como ya hemos visto en muchos artculos anteriores, sin ninguna particularidad destacable. Para este caso quedara como sigue:

1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 android:layout_width="fill_parent" 3 android:layout_height="wrap_content" 4 android:orientation="vertical" 5 android:padding="10dip"> 6 7 <TextView android:id="@+id/TextView01" 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:text="Usuario:" 11 android:textStyle="bold" /> 12 13 <EditText android:id="@+id/TxtUsuario" 14 android:layout_height="wrap_content" 15 android:layout_width="fill_parent" /> 16 17 <TextView android:id="@+id/TextView02" 18 android:layout_width="wrap_content" 19 android:layout_height="wrap_content" 20 android:text="Contrasea:" 21 android:textStyle="bold" /> 22 23 <EditText android:id="@+id/TxtPassword" 24 android:layout_height="wrap_content" 25 26 android:layout_width="fill_parent" /> 27 28 <LinearLayout android:orientation="horizontal" 29 android:layout_width="fill_parent" 30 android:layout_height="fill_parent" > 31 32 <Button 33 android:layout_width="wrap_content" 34 android:layout_height="wrap_content" 35 android:id="@+id/BtnAceptar" 36 android:text="Login" 37 android:paddingLeft="20dip" 38 android:paddingRight="20dip" /> 39 40 <TextView android:id="@+id/LblMensaje" 41 android:layout_width="wrap_content" 42 android:layout_height="wrap_content" 43 android:paddingLeft="10dip" 44 android:textStyle="bold" /> 45 46 </LinearLayout> 47 48 </LinearLayout> Visualmente, nuestro control ya quedara como se observa en la siguiente imagen:

A continuacin crearemos su clase java asociada donde definiremos toda la funcionalidad de nuestro control. Dado que nos hemos basado en un LinearLayout para construir el control, esta nueva clase deber heredar tambin de la clase java LinearLayout de Android. Redefiniremos adems los dos constructores bsicos: 1 public class ControlLogin extends LinearLayout 2 { 3 public ControlLogin(Context context) { super(context); 4 inicializar(); 5 } 6 7 8 public ControlLogin(Context context, AttributeSet attrs) { 9 super(context, attrs); 10 inicializar(); } 11 12 } Como se puede observar, todo el trabajo lo dejamos para el mtodo inicializar(). En este mtodo inflaremos el layout XML que hemos definido, obtendremos las referencias a todos los controles y asignaremos los eventos necesarios. Todo esto ya lo hemos hecho en otras ocasiones, por lo que tampoco nos vamos a detener mucho. Veamos como queda el mtodo completo: 1 private void inicializar() 2 { 3 //Utilizamos el layout 'control_login' como interfaz del control 4 String infService = Context.LAYOUT_INFLATER_SERVICE; 5 LayoutInflater li = (LayoutInflater)getContext().getSystemService(infService); 6 li.inflate(R.layout.control_login, this, true); 7 8 //Obtenemoslas referencias a los distintos control 9 txtUsuario = (EditText)findViewById(R.id.TxtUsuario); 10 txtPassword = (EditText)findViewById(R.id.TxtPassword); 11 btnLogin = (Button)findViewById(R.id.BtnAceptar); 12 lblMensaje = (TextView)findViewById(R.id.LblMensaje); 13 14 //Asociamos los eventos necesarios 15 asignarEventos(); 16 17 } Dejaremos por ahora a un lado el mtodo asignarEventos(), volveremos sobre l ms tarde. Con esto ya tenemos definida la interfaz y la funcionalidad bsica del nuevo control por lo que ya podemos utilizarlo desde otra actividad como si se tratase de cualquier otro control predefinido. Para ello haremos

referencia a l utilizando la ruta completa del paquete java utilizado, en nuestro caso quedara como net.sgoliver.ControlLogin. Vamos a insertar nuestro nuevo control en la actividad principal de la aplicacin: 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 android:orientation="vertical" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:padding="10dip" > 6 7 <net.sgoliver.ControlLogin android:id="@+id/CtlLogin" 8 android:layout_width="fill_parent" 9 android:layout_height="wrap_content" 10 android:background="#0000AA" /> 11 12 </LinearLayout> Dado que estamos heredando de un LinearLayout podemos utilizar en principio cualquier atributo permitido para dicho tipo de controles, en este caso hemos establecido por ejemplo los atributos layout_width, layout_height y background. Si ejecutamos ahora la aplicacin veremos cmo ya hemos conseguido gran parte de nuestro objetivo:

Vamos a aadir ahora algo ms de funcionalidad. En primer lugar, podemos aadir algn mtodo pblico exclusivo de nuestro control. Como ejemplo podemos aadir un mtodo que permita modificar el texto de la etiqueta de resultado del login. Esto no tiene ninguna dificultad: 1 public void setMensaje(String msg) 2{ lblMensaje.setText(msg); 3 4} En segundo lugar, todo control que se precie debe tener algunos eventos que nos permitan responder a las acciones del usuario de la aplicacin. As por ejemplo, los botones tienen un evento OnClick, las listas un evento OnItemSelected, etc. Pues bien, nosotros vamos a dotar a nuestro control de un evento personalizado, llamado OnLogin, que se lance cuando el usuario introduce sus credenciales de identificacin y pulsa el botn Login. Para ello, lo primero que vamos a hacer es concretar los detalles de dicho evento, creando una interfaz java para definir su listener. Esta interfaz tan slo tendr un mtodo llamado onLogin() que devolver los dos datos introducidos por el usuario (usuario y contrasea). Vemos cmo queda:

1 package net.sgoliver; 2 3 public interface OnLoginListener 4{ 5 void onLogin(String usuario, String password); 6} A continuacin, deberemos aadir un nuevo miembro de tipo OnLoginListener a la clase ControlLogin, y un mtodo pblico que permita suscribirse al nuevo evento. 1 public class ControlLogin extends LinearLayout 2 { private OnLoginListener listener; 3 4 //... 5 6 7 public void setOnLoginListener(OnLoginListener l) 8 { 9 listener = l; 10 } 11 } Con esto, la aplicacin principal ya puede suscribirse al evento OnLogin y ejecutar su propio cdigo cuando ste se genere. Pero cundo se genera exactamente? Dijimos antes que queremos lanzar el evento OnLogin cuando el usuario pulse el botn Login de nuestro control. Pues bien, para hacerlo, volvamos al mtodo asignarEventos() que antes dejamos aparcado. En este mtodo vamos a implementar el evento OnClick del botn de Login para lanzar el nuevo evento OnLogin del control. Confundido?. Intento explicarlo de otra forma. Vamos a aprovechar el evento OnClick() del botn Login (que es un evento interno a nuestro control, no se ver desde fuera) para lanzar hacia el exterior el evento OnLogin() (que ser el que debe capturar y tratar la aplicacin que haga uso del control).

Para ello, implementaremos el evento OnClick como ya hemos hecho en otras ocasiones y como acciones generaremos el evento OnLogin de nuestro listener pasndole los datos que ha introducido el usuario en los cuadros de texto Usuario y Contrasea: 1 private void asignarEventos() 2 { 3 btnLogin.setOnClickListener(new OnClickListener() { 4 @Override 5 6 public void onClick(View v) { 7 listener.onLogin(txtUsuario.getText().toString(), 8 txtPassword.getText().toString()); 9 } }); 10 11 }

Con todo esto, la aplicacin principal ya puede implementar el evento OnLogin de nuestro control, haciendo por ejemplo la validacin de las credenciales del usuario y modificando convenientemente el texto de la etiqueta de resultado: 1 @Override 2 public void onCreate(Bundle savedInstanceState) 3 { super.onCreate(savedInstanceState); 4 setContentView(R.layout.main); 5 6 ctlLogin = (ControlLogin)findViewById(R.id.CtlLogin); 7 8 ctlLogin.setOnLoginListener(new OnLoginListener() 9 { 10 @Override 11 12 public void onLogin(String usuario, String password) { 13 //Validamos el usuario y la contrasea 14 15 if (usuario.equals("demo") && password.equals("demo")) 16 ctlLogin.setMensaje("Login correcto!"); 17 else 18 ctlLogin.setMensaje("Vuelva a intentarlo."); } 19 }); 20 21 } Veamos lo que ocurre al ejecutar ahora la aplicacin principal e introducir las credenciales correctas:

Nuestro control est ya completo, en aspecto y funcionalidad. Hemos personalizado su interfaz y hemos aadido mtodos y eventos propios. Podemos hacer algo ms? Pues s. Cuando vimos cmo aadir el control de login al layout de la aplicacin principal dijimos que podamos utilizar cualquier atributo xml permitido para el contenedor LinearLayout, ya que nuestro control derivaba de ste. Pero vamos a ir ms all y vamos a definir tambin atributos xml exclusivos para nuestro control. Como ejemplo, vamos a definir un atributo llamado login_text que permita establecer el texto del botn de Login desde el propio layout xml, es decir, en tiempo de diseo. Primero vamos de declarar el nuevo atributo y lo vamos a asociar al control ControlLogin. Esto debe hacerse en el fichero \res\values\attrs.xml. Para ello, aadiremos una nueva seccin <declarestyleable> asociada a ControlLogin dentro del elemento <resources>, donde indicaremos el nombre (name) y el tipo (format) del nuevo atributo.

1 <resources> <declare-styleable name="ControlLogin"> 2 3 <attr name="login_text" format="string"/> </declare-styleable> 4 5 </resources> En nuestro caso, el tipo del atributo ser string, dado que contendr una cadena de texto con el mensaje a mostrar en el botn. Con esto ya tendremos permitido el uso del nuevo atributo dentro del layout de la aplicacin principal. Ahora nos falta procesar el atributo desde nuestro control personalizado. Este tratamiento lo podemos hacer en el construtor de la clase ControlLogin. Para ello, obtendremos la lista de atributos asociados a ControlLogin mediante el mtodo obtainStyledAttributes() del contexto de la aplicacin, obtendremos el valor del nuevo atributo definido (mediante su ID, que estar formado por la concatenacin del nombre del control y el nombre del atributo, en nuestro caso ControlLogin_login_text) y modificaremos el texto por defecto del control con el nuevo texto. 1 public ControlLogin(Context context, AttributeSet attrs) { 2 super(context, attrs); 3 inicializar(); 4 5 // Procesamos los atributos XML personalizados TypedArray a = 6 getContext().obtainStyledAttributes(attrs, 7 R.styleable.ControlLogin); 8 9 String textoBoton = a.getString( 10 R.styleable.ControlLogin_login_text); 11 12 btnLogin.setText(textoBoton); 13 14 a.recycle(); 15 16 } Ya slo nos queda utilizarlo. Para ello debemos primero declarar un nuevo espacio de nombres (namespace) local para el paquete java utilizado, que en nuestro caso he llamado sgo: 1 xmlns:sgo="http://schemas.android.com/apk/res/net.sgoliver" Tras esto, slo queda asignar el valor del nuevo atributo precedido del nuevo namespace, por ejemplo con el texto Entrar: 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:sgo="http://schemas.android.com/apk/res/net.sgoliver" 3 android:orientation="vertical" 4 android:layout_width="fill_parent" 5 android:layout_height="fill_parent" 6 android:padding="10dip" > 7 8 <net.sgoliver.ControlLogin android:id="@+id/CtlLogin" 9 android:layout_width="fill_parent" 10 android:layout_height="wrap_content" 11 android:background="#0000AA" 12 sgo:login_text="Entrar" /> 13 14 </LinearLayout> Finalmente, si ejecutamos de nuevo la aplicacin principal veremos cmo el botn de login se inicializa con el texto definido en el atributo login_text y que todo contina funcionando correctamente.

Como resumen, en este artculo hemos visto cmo construir un control android personalizado a partir de otros controles estandar, componiendo su interfaz, aadiendo mtodos y eventos personalizados, e incluso aadiendo nuevas opciones en tiempo de diseo aadiendo atributos xml exclusivos. Podis descargar el cdigo fuente de este artculo pulsando aqu.

Controles personalizados (III)

En artculos anteriores del curso ya comentamos dos de las posibles vas que tenemos para crear controles personalizados en Android: la primera de ellas extendiendo la funcionalidad de un control ya existente, y como segunda opcin creando un nuevo control compuesto por otros ms sencillos. En este nuevo artculo vamos a describir la tercera de las posibilidades que tenamos disponibles, que consiste en crear un control completamente desde cero, sin utilizar como base otros controles existentes. Como ejemplo, vamos a construir un control que nos permita seleccionar un color entre varios disponibles. Los colores disponibles van a ser slo cuatro, que se mostrarn en la franja superior del control. En la parte inferior se mostrar el color seleccionado en cada momento, o permanecer negro si an no se ha seleccionado ningn color. Valga la siguiente imagen como muestra del aspecto que tendr nuestro control de seleccin de color:

Por supuesto este control no tiene mucha utilidad prctica dada su sencillez, pero creo que puede servir como ejemplo para comentar los pasos necesarios para construir cualquier otro control ms complejo. Empecemos. En las anteriores ocasiones vimos cmo el nuevo control creado siempre heredaba de algn otro control o contenedor ya existente. En este caso sin embargo, vamos a heredar nuestro contro directamente de la clase View (clase padre de la gran mayora de elementos visuales de Android). Esto implica, entre otras cosas, que por defecto nuestro control no va a tener ningn tipo de interfaz grfica, por lo que todo el trabajo de dibujar la interfaz lo vamos a tener que hacer nosotros. Adems, como paso previo a la representacin grfica de la interfaz, tambin vamos a tener que determinar las dimensiones que nuestro control tendr dentro de su elemento contenedor. Como veremos ahora, ambas cosas se llevarn a cabo redefiniendo dos eventos de la clase View, onDraw() para el dibujo de la interfaz, y onMeasure() para el clculo de las dimensiones. Por llevar un orden cronolgico, empecemos comentando el evento onMeasure(). Este evento se ejecuta automticamente cada vez que se necesita recalcular el tamao de un control. Pero como ya hemos visto en varias ocasiones, los elementos grficos incluidos en una aplicacin Android se distribuyen por la pantalla de una forma u otra dependiendo del tipo de contenedor o layout utilizado. Por tanto, el tamao de un control determinado en la pantalla no depender slo de l, sino de ciertas restricciones impuestas por su elemento contenedor o elemento padre. Para resolver esto, en el evento onMeasure() recibiremos como parmetros las restricciones del elemento padre en cuanto a ancho y alto del control, con lo que podremos tenerlas en cuenta a la hora de determinar el ancho y alto de nuestro control personalizado. Estas restricciones se reciben en forma de objetos MeasureSpec, que contiene dos campos: modo y tamao. El significado del segundo de ellos es obvio, el primero por su parte sirve para matizar el significado del segundo. Me explico. Este

campo modo puede contener tres valores posibles: AT_MOST: indica que el control podr tener como mximo el tamao especificado. EXACTLY: indica que al control se le dar exactamente el tamao especificado. UNSPECIFIED: indica que el control padre no impone ninguna restriccin sobre el tamao. Dependiendo de esta pareja de datos, podremos calcular el tamao deseado para nuestro control. Para nuestro control de ejemplo, apuraremos siempre el tamao mximo disponible (o un tamao por defecto de 200*100 en caso de no recibir ninguna restriccin), por lo que en todos los casos elegiremos como tamao de nuestro control el tamao recibido como parmetro: @Override 1 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 2 { 3 int ancho = calcularAncho(widthMeasureSpec); 4 int alto = calcularAlto(heightMeasureSpec); 5 6 setMeasuredDimension(ancho, alto); 7 } 8 9 10 private int calcularAlto(int limitesSpec) 11 { int res = 100; //Alto por defecto 12 13 int modo = MeasureSpec.getMode(limitesSpec); 14 int limite = MeasureSpec.getSize(limitesSpec); 15 16 if (modo == MeasureSpec.AT_MOST) { 17 res = limite; 18 } 19 else if (modo == MeasureSpec.EXACTLY) { 20 res = limite; 21 } 22 23 24 return res; 25 } 26 27 private int calcularAncho(int limitesSpec) 28 { 29 int res = 200; //Ancho por defecto 30 31 int modo = MeasureSpec.getMode(limitesSpec); 32 int limite = MeasureSpec.getSize(limitesSpec); 33 34 if (modo == MeasureSpec.AT_MOST) { 35 res = limite; 36 } 37 else if (modo == MeasureSpec.EXACTLY) { 38 res = limite; 39 } 40 41 return res; 42 } Como nota importante, al final del evento onMeasure() siempre debemos llamar al mtodo setMeasuredDimension() pasando como parmetros el ancho y alto calculados para nuestro control.

Con esto ya hemos determinado las dimensiones del control, por lo que tan slo nos queda dibujar su interfaz grfica. Como hemos indicado antes, esta tarea se realiza dentro del evento onDraw(). Este evento recibe como parmetro un objeto de tipo Canvas, sobre el que podremos ejecutar todas las operaciones de dibujo de la interfaz. No voy a entrar en detalles de la clase Canvas, porque se ser tema central de un prximo artculo. Por ahora nos vamos a conformar sabiendo que es la clase que contiene la mayor parte de los mtodos de dibujo en interfaces Android, por ejemplo drawRect() para dibujar rectngulos, drawCircle() para crculos, drawBitmap() para imagenes, drawText() para texto, e infinidad de posibilidades ms. Para consultar todos los mtodos disponibles puedes dirigirte a la documentacin oficial de la clase Canvas de Android. Adems de la clase Canvas, tambin me gustara destacar la clase Paint, que permite definir el estilo de dibujo a utilizar en los metodos de dibujo de Canvas, por ejemplo el ancho de trazado de las lneas, los colores de relleno, etc. Para nuestro ejemplo no necesitaramos conocer nada ms, ya que la interfaz del control es relativamente sencilla. Vemos primero el cdigo y despus comentamos los pasos realizados: 1 @Override 2 protected void onDraw(Canvas canvas) 3 { //Obtenemos las dimensiones del control 4 5 int alto = getMeasuredHeight(); 6 int ancho = getMeasuredWidth(); 7 8 //Colores Disponibles 9 Paint pRelleno = new Paint(); 10 pRelleno.setStyle(Style.FILL); 11 12 pRelleno.setColor(Color.RED); 13 canvas.drawRect(0, 0, ancho/4, alto/2, pRelleno); 14 15 pRelleno.setColor(Color.GREEN); 16 canvas.drawRect(ancho/4, 0, 2*(ancho/4), alto/2, pRelleno); 17 18 pRelleno.setColor(Color.BLUE); 19 canvas.drawRect(2*(ancho/4), 0, 3*(ancho/4), alto/2, pRelleno); 20 21 pRelleno.setColor(Color.YELLOW); 22 canvas.drawRect(3*(ancho/4), 0, 4*(ancho/4), alto/2, pRelleno); 23 //Color Seleccionado 24 pRelleno.setColor(colorSeleccionado); 25 canvas.drawRect(0, alto/2, ancho, alto, pRelleno); 26 27 //Marco del control 28 29 Paint pBorde = new Paint(); 30 pBorde.setStyle(Style.STROKE); pBorde.setColor(Color.WHITE); 31 canvas.drawRect(0, 0, ancho-1, alto/2, pBorde); 32 canvas.drawRect(0, 0, ancho-1, alto-1, pBorde); 33 } 34 En primer lugar obtenemos las dimensiones calculadas en la ltima llamada a onMeasure() mediante los mtodos getMeasuredHeight() y getMeasuredWidth(). Posteriormente definimos un objeto Paint que usaremos para dibujar los rellenos de cada color seleccionable. Para indicar que se trata del color de relleno a utilizar utilizaremos la llamada a setStyle(Style.FILL). Tras esto, ya slo debemos dibujar cada uno de los cuadros en su posicin correspondiente con drawRect(), estableciendo antes de cada uno de ellos el color deseado con setColor(). Por ltimo, dibujamos el marco del control

definiendo un nuevo objeto Paint, esta vez con estilo Style.STROKE dado que se utilizar para dibujar slo lneas, no rellenos. Con esto, ya deberamos tener un control con el aspecto exacto que definimos en un principio. El siguiente paso ser definir su funcionalidad implementando los eventos a los que queramos que responda nuestro control, tanto eventos internos como externos. En nuestro caso slo vamos a tener un evento de cada tipo. En primer lugar definiremos un evento interno (evento que slo queremos capturar de forma interna al control, sin exponerlo al usuario) para responder a las pulsaciones del usuario sobre los colores de la zona superior, y que utilizaremos para actualizar el color de la zona inferior con el color seleccionado. Para ello implementaremos el evento onTouch(), lanzado cada vez que el usuario toca la pantalla sobre nuestro control. La lgica ser sencilla, simplemente consultaremos las coordenadas donde ha pulsado el usuario (mediante los mtodos getX() y getY()), y dependiendo del lugar pulsado determinaremos el color sobre el que se ha seleccionado y actualizaremos el valor del atibuto colorSeleccionado. Finalmente, llamamos al mtodo invalidate() para refrescar la interfaz del control, reflejando as el cambio en el color seleccionado, si se ha producido. 1 @Override 2 public boolean onTouchEvent(MotionEvent event) 3 { //Si se ha pulsado en la zona superior 4 if (event.getY() > 0 && event.getY() < (getMeasuredHeight()/2)) 5 { 6 //Si se ha pulsado dentro de los lmites del control 7 if (event.getX() > 0 && event.getX() < getMeasuredWidth()) 8 { 9 //Determinamos el color seleccionado segn el punto pulsado 10 if(event.getX() > (getMeasuredWidth()/4)*3) 11 colorSeleccionado = Color.YELLOW; 12 13 else if(event.getX() > (getMeasuredWidth()/4)*2) colorSeleccionado = Color.BLUE; 14 15 else if(event.getX() > (getMeasuredWidth()/4)*1) 16 colorSeleccionado = Color.GREEN; 17 else 18 colorSeleccionado = Color.RED; 19 20 //Refrescamos el control this.invalidate(); 21 } 22 } 23 24 25 return super.onTouchEvent(event); 26 } En segundo lugar crearemos un evento externo personalizado, que lanzaremos cuando el usuario pulse sobre la zona inferior del control, como una forma de aceptar definitivamente el color seleccionado. Llamaremos a este evento onSelectedColor(). Para crearlo actuaremos de la misma forma que ya vimos en el artculo anterior. Primero definiremos una interfaz para el listener de nuestro evento: 1 package net.sgoliver.android; 2 3 public interface OnColorSelectedListener 4{ 5 void onColorSelected(int color); 6}

Posteriormente, definiremos un objeto de este tipo como atributo de nuestro control y escribiremos un nuevo mtodo que permita a las aplicaciones suscribirse al evento: 1 public class SelectorColor extends View 2 { private OnColorSelectedListener listener; 3 4 //... 5 6 7 public void setOnColorSelectedListener(OnColorSelectedListener l) 8 { 9 listener = l; 10 } 11 } Y ya slo nos quedara lanzar el evento en el momento preciso. Esto tambin lo haremos dentro del evento onTouch(), cuando detectemos que el usuario ha pulsado en la zona inferior de nuestro control: 1 @Override 2 public boolean onTouchEvent(MotionEvent event) 3 { //Si se ha pulsado en la zona superior 4 if (event.getY() > 0 && event.getY() < (getMeasuredHeight()/2)) 5 { 6 //... 7 } 8 //Si se ha pulsado en la zona inferior 9 else if (event.getY() > (getMeasuredHeight()/2) && 10 event.getY() < getMeasuredHeight()) 11 { 12 //Lanzamos el evento externo de seleccin de color 13 listener.onColorSelected(colorSeleccionado); 14 } 15 16 return super.onTouchEvent(event); 17 18 } Con esto, nuestra aplicacin principal ya podra suscribirse a este nuevo evento para estar informada cada vez que se seleccione un color. Sirva la siguiente plantilla a modo de ejemplo: 1 public class ControlPersonalizado extends Activity 2 { private SelectorColor ctlColor; 3 4 @Override 5 6 public void onCreate(Bundle savedInstanceState) { 7 super.onCreate(savedInstanceState); 8 setContentView(R.layout.main); 9 10 ctlColor = (SelectorColor)findViewById(R.id.scColor); 11 12 13 ctlColor.setOnColorSelectedListener(new 14 OnColorSelectedListener() { 15 @Override 16 17 public void onColorSelected(int color)

{ 18 19 'color' 20 } 21 }); 22 } 23 }

//Aqu se tratara el color seleccionado (parmetro //...

Con esto, tendramos finalizado nuestro control completamente personalizado, que hemos construido sin utilizar como base ningn otro control predefinido, definiendo desde cero tanto su aspecto visual como su funcionalidad interna o sus eventos pblicos. Podis descargar el cdigo fuente del artculo pulsando aqu.

Tab Layout
En artculos anteriores del Curso de Programacin Android hemos visto como dar forma a la interfaz de usuario de nuestra aplicacin mediante el uso de diversos tipos de layouts, como por ejemplo los lineales, absolutos, relativos, u otros ms elaborados como los de tipo lista o tabla. stos van a ser siempre los elementos organizativos bsicos de nuestra interfaz, pero sin embargo, dado el poco espacio con el que contamos en las pantallas de muchos dispositivos, o simplemente por cuestiones de organizacin, a veces es necesario/interesante dividir nuestros controles en varias pantallas. Y una de las formas clsicas de conseguir esto consiste en la distribucin de los elementos por pestaas o tabs. Android por supuesto permite utilizar este tipo de interfaces, aunque lo hace de una forma un tanto peculiar, ya que la implementacin no va a depender de un slo elemento sino de varios, que adems deben estar distribuidos y estructurados de una forma determinada nada arbitraria. Adicionalmente no nos bastar simplemente con definir la interfaz en XML como hemos hecho en otras ocasiones, sino que tambin necesitaremos completar el conjunto con algunas lneas de cdigo. Desarrollemos esto poco a poco. En Android, el elemento principal de un conjunto de pestaas ser el control TabHost. ste va a ser el contenedor principal de nuestro conjunto de pestaas y deber tener obligatoriamente como id el valor @android:id/tabhost. Dentro de ste vamos a incluir un LinearLayout que nos servir para distribuir verticalmente las secciones principales del layout: la seccin de pestaas en la parte superior y la seccin de contenido en la parte inferior. La seccin de pestaas se representar mediante un elemento TabWidget, que deber tener como id el valor @android:id/tabs, y como contenedor para el contenido de las pestaas aadiremos un FrameLayout con el id obligatorio @android:id/tabcontent. Por ltimo, dentro del FrameLayout incluiremos el contenido de cada pestaa, normalmente cada uno dentro de su propio layout principal (en mi caso he utilizado LinearLayout) y con un id nico que nos permita posteriormente hacer referencia a ellos fcilmente (en mi caso he utilizado por ejemplo los ids tab1, tab2, ). A continuacin represento de forma grfica toda la estructura descrita.

Si traducimos esta estructura a nuestro fichero de layout XML tendramos lo siguiente: 1 <TabHost android:id="@android:id/tabhost" android:layout_width="match_parent" 2 android:layout_height="match_parent"> 3 4 <LinearLayout 5 android:orientation="vertical" 6 android:layout_width="fill_parent" 7 android:layout_height="fill_parent" > 8 9 <TabWidget android:layout_width="match_parent" 10 android:layout_height="wrap_content" 11 android:id="@android:id/tabs" /> 12 13 <FrameLayout android:layout_width="match_parent" 14 android:layout_height="match_parent" 15 android:id="@android:id/tabcontent" > 16 17 <LinearLayout android:id="@+id/tab1" 18 android:orientation="vertical" 19 android:layout_width="match_parent" 20 21 android:layout_height="match_parent" > 22 <TextView android:id="@+id/textView1" 23 android:text="Contenido Tab 1" 24 android:layout_width="wrap_content" 25 android:layout_height="wrap_content" /> 26 </LinearLayout> 27 28 <LinearLayout android:id="@+id/tab2" 29 android:orientation="vertical" 30 android:layout_width="match_parent" 31 android:layout_height="match_parent" > 32 <TextView android:id="@+id/textView2" 33 android:text="Contenido Tab 2" 34 android:layout_width="wrap_content" 35 android:layout_height="wrap_content" /> 36 </LinearLayout> 37 38 </FrameLayout> 39 </LinearLayout> 40 41 </TabHost> Como podis ver, como contenido de las pestaas tan slo he aadido por simplicidad una etiqueta de texto con el texto Contenido Tab NTab. Esto nos permitir ver que el conjunto de pestaas funciona correctamente cuando ejecutemos la aplicacin. Con esto ya tendramos montada toda la estructura de controles necesaria para nuestra interfaz de pestaas. Sin embargo, como ya dijimos al principio del artculo, con esto no es suficiente. Necesitamos asociar de alguna forma cada pestaa con su contenido, de forma que el el control se comporte correctamente cuando cambiamos de pestaa. Y esto tendremos que hacerlo mediante cdigo en nuestra actividad principal. Empezaremos obteniendo una referencia al control principal TabHost y preparndolo para su configuracin llamando a su mtodo setup(). Tras esto, crearemos un objeto de tipo TabSpec para cada una de las pestaas que queramos aadir mediante el mtodo newTabSpec(), al que pasaremos como parmetro una etiqueta identificativa de la pestaa (en mi caso de ejemplo mitab1, mitab2, ). Adems, tambin le

asignaremos el layout de contenido correspondiente a la pestaa llamando al mtodo setContent(), e indicaremos el texto y el icono que queremos mostrar en la pestaa mediante el mtodo setIndicator(texto, icono). Veamos el cdigo completo. 1 2 3 Resources res = getResources(); 4 TabHost tabs=(TabHost)findViewById(android.R.id.tabhost); 5 tabs.setup(); 6 7 TabHost.TabSpec spec=tabs.newTabSpec("mitab1"); 8 spec.setContent(R.id.tab1); spec.setIndicator("TAB1", 9 res.getDrawable(android.R.drawable.ic_btn_speak_now)); 10 tabs.addTab(spec); 11 12 spec=tabs.newTabSpec("mitab2"); 13 spec.setContent(R.id.tab2); spec.setIndicator("TAB2",res.getDrawable(android.R.drawable.ic_dialog_map)); 14 tabs.addTab(spec); 15 16 tabs.setCurrentTab(0); 17 18 Si vemos el cdigo, vemos por ejemplo como para la primera pestaa creamos un objeto TabSpec con la etiqueta mitab1, le asignamos como contenido uno de los LinearLayout que incluimos en la seccin de contenido (en este caso R.id.tab1) y finalmente le asignamos el texto TAB1 y el icono android.R.drawable.ic_btn_speak_now (ste es un icono incluido con la propia plataforma Android. Si no existiera en vuestra versin podis sustituirlo por cualquier otro icono). Finalmente aadimos la nueva pestaa al control mediante el mtodo addTab(). Si ejecutamos ahora la aplicacin tendremos algo como lo que muestra la siguiente imagen, donde podremos cambiar de pestaa y comprobar cmo se muestra correctamente el contenido de la misma.

En cuanto a los eventos disponibles del control TabHost, aunque no suele ser necesario capturarlos, podemos ver a modo de ejemplo el ms interesante de ellos, OnTabChanged, que se lanza cada vez que se cambia de pestaa y que nos informa de la nueva pestaa visualizada. Este evento podemos implementarlo y asignarlo mediante el mtodo setOnTabChangedListener() de la siguiente forma:

1 tabs.setOnTabChangedListener(new OnTabChangeListener() { @Override 2 public void onTabChanged(String tabId) { 3 4 Log.i("AndroidTabsDemo", "Pulsada pestaa: " + tabId); 5 } 6 }); En el mtodo onTabChanged() recibimos como parmetro la etiqueta identificativa de la pestaa (no su ID), que debimos asignar cuando creamos su objeto TabSpec correspondiente. Para este ejemplo, lo nico que haremos al detectar un cambio de pestaa ser escribir en el log de la aplicacin un mensaje informativo con la etiqueta de la nueva pestaa visualizada. As por ejemplo, al cambiar a la segunda pestaa recibiremos el mensaje de log: Pulsada pestaa: mitab2. Puedes descargar el cdigo fuente completo del ejemplo utilizado en este artculo a travs de este enlace.