mca006.pdf

7/25/2019 Mca006.pdf

1/119

Manual Mca006

Todos los derechos reservados, prohibida la reproduccin, Instituto Gala de Venezuela 1

S diferente, intgrate

Autor: Olrando Gutirrez

Fecha: 10 / 05 / 2013

Mca006

Manual Mca006 CURSO ANDROID DESARROLLOde APLICACIONES MVILES, 24 horas

7/25/2019 Mca006.pdf

2/119

7/25/2019 Mca006.pdf

3/119

Manual Mca006


LECCION 1 Ambiente de Programacin Android: Java Development Kit, Eclipse Juno, SDK de Android,

Pluggin de Android para Eclipse

Ambiente de desarrollo en Android

A continuacin se describen los pasos bsicos para disponer en el equipo del ambiente y las herramientas

necesarias para comenzar a programar aplicaciones para la plataforma Android.

Paso 1. Descargar e instalar Java.

Se debe instalar alguna versin del JDK (Java Development Kit) de Java, la misma se encuentra disponible en el

sitio web de Oracle http://www.oracle.com/technetwork/java/javase/downloads/index.html.

Por ejemplo, se puede descargar la versin 7 update11, la cual dependde de la versin concreta del sistema de

operacin. Por ejemplo, para Windows 64 bits se puede descargar el ejecutable marcado como Windows x64

cuyo nombre de archivo es jdk-7u11-windows-x64.exe.

La instalacin no tiene ninguna dificultad ya que es un instalador estndar de Windows donde tan slo hay queaceptar las opciones que ofrece por defecto.

Paso 2. Descargar e instalar Eclipse.

Eclipse es un IDE (Integrated Development Environment) , Ambiente Integrgrado de Desarrollo para mltiples

lenguajes de Programacin y es muy utilizado con el lenguaje Java. Se puede descargar por ejemplo la versin

4.2.1 [Eclipse Juno SR1], o cualquier versin ms actualizada desdehttp://www.eclipse.org/downloads/. Se

requiere instalar la versin Eclipse IDE for Java Developers, y por supuesto descargar la versin apropiada para el

sistema de operacin (Windows/Mac OS/Linux, y 32/64 bits).

La instalacin consiste simplemente en descomprimir el zip descargado en la ubicacin deseada. Para ejecutarse se

accede al archivo eclipse.exe dentro de la ruta donde se haya descomprimido la aplicacin, por

ejemplo c:\eclipse\eclipse.exe. Durante la primera ejecucin de la aplicacin sepreguntar cul ser la carpeta

donde se requiere almacenar los proyectos. Se indicara la ruta deseada y se marcara un check Use this as the

default para que no vuelva a preguntarlo.

Paso 3. Descargar el SDK de Android.

El SDK Software Development Kit, Herramaienta de Desarrollo de Softwarte, de la plataforma Android se puede

descargar desde http://developer.android.com/sdk/index.html(por ejemplo se puede utilizar la versin r21, que

7/25/2019 Mca006.pdf

4/119

7/25/2019 Mca006.pdf

5/119

Manual Mca006


Paso 6. Instalar las Pla t f o r m To o l sy losP la t fo r m snecesarios.

Adems del SDK de Android comentado en el paso 2, que contiene las herramientas bsicas para desarrollar en

Android, tambin se deben descargar las llamadas Platflorm Tools, que contiene herramientas especficas de la

ltima versin de la plataforma, y una o varias plataformas (SDK Platforms) de Android, que no son ms que las

libreras necesarias para desarrollar sobre cada una de las versiones concretas de Android. As, si se requiere

desarrollar por ejemplo para Android 2.2 se tendr que descargar su plataforma correspondiente. Se recomienda

instalar al menos 2 plataformas: la correspondiente a la ltima versin disponible de Android, y la correspondiente

a la mnima versin de Android que se requiere soporte la aplicacin.

Para ello, desde Eclipse se debe acceder al men Window / Android SDK Manager. En la lista de paquetes

disponibles se seleccionan las Android SDK Platform-tools, las plataformas Android 4.2 (API 17) y Android 2.2

(API 8), y el paquete extra Android Support Library, que es una librera permintiendo utilizar en versiones

antiguas de Android caractersticas introducidas por versiones ms recientes. Se pulsa el botn Install packages

y se espera a que finalice la descarga.

Paso 7. Configurar un AVD.

A la hora de probar y depurar aplicaciones Android no se tiene que hacer necesariamente sobre un dispositivo

fsico, sino que se puede configurar un emulador o dispositivo virtual (Android Virtual Device, o AVD) donde poder

realizar fcilmente estas tareas. Para ello, se accede al AVD Manager (men Window / AVD Manager), y en la

7/25/2019 Mca006.pdf

6/119

Manual Mca006


seccin Virtual Devicesse pueden aadir tantos AVD como se necesiten (por ejemplo, configurados para distintas

versiones de Android o distintos tipos de dispositivo). Se recomienda configurar al menos dos AVD, uno para la

mnima versin de Android a soportar, y otro para la versin ms reciente disponible.

Para configurar el AVD tan slo de debe indicar un nombre descriptivo, la versin de la plataforma Android que

utilizar, y las caractersticas de hardware del dispositivo virtual, como por ejemplo su resolucin de pantalla o el

tamao de la tarjeta SD. Adems, se marcar la opcin Snapshot, que permitir arrancar el emulador msrpidamente en futuras ejecuciones.

Y con este paso ya se tienen preparadas todas las herramientas necesarias para comenzar a desarrollar

aplicaciones Android.

LECCION 2 Estructura de un proyecto Android

Para crear un proyecto Android desde Eclipse se utiliza File -> New -> Project

Aparece una ventana de seleccin donde se indica Android y luego se escoge Android Application Project.

7/25/2019 Mca006.pdf

7/119

Manual Mca006


En la siguiente ventana se indica el nombre de la aplicacin, el nombre del proyecto y el paquete java que seutilizara para las clases java. Se tiene que seleccionar adems la mnima versin del SDK que aceptar laaplicacin al ser instalada en un dispositivo (Minimum Required SDK), la versin del SDK para la que sedesarrollara (Target SDK), y la versin del SDK con la que se compilara el proyecto (Compile with). Las dos ltimassuelen coincidir con la versin de Android ms reciente. El resto de opciones se deja con los valores por defecto

7/25/2019 Mca006.pdf

8/119

Manual Mca006


Al pulsar el botn Next, se accede al siguiente paso del asistente, donde se tiene que indicar si durante la creacindel nuevo proyecto se requiere crear un icono para la aplicacin (Create custom launcher icon) y si se requierecrear una actividad inicial (Create activity). Tambin se puede indicar si el proyecto ser del tipo Librera (Mark thisProject as a library). En este primer ejemplo se dejan todas las opciones marcadas por defecto como se ve en lasiguiente imagen y se pulsa Next.

En la siguiente pantalla del asistente se configura el icono que tendr la aplicacin en el dispositivo. Se puedeseleccionar la imagen, texto o dibujo predefinido que aparecer en el icono, el margen, la forma y los coloresaplicados. En este ejemplo, se deja todo por defecto y se avanza al siguiente paso pulsando Next.

7/25/2019 Mca006.pdf

9/119

Manual Mca006


En la siguiente pantalla del asistente se elege el tipo de Actividadprincipal de la aplicacin. Una actividad es unaventana o pantalla de la aplicacin. En este paso tambin se dejan todos los valores por defecto, indicando asque la pantalla principal ser del tipo BlankActivity.

Por ltimo, en el ltimo paso del asistente se indican los datos de la actividad principal que se acaba de elegir,indicando el nombre de su clase java asociada y el nombre de su layout xml (es la interfaz grfica de la actividad).

7/25/2019 Mca006.pdf

10/119

7/25/2019 Mca006.pdf

11/119

Manual Mca006


/res/drawable/ Contiene las imgenes [y otros elementos grficos] usados en por la

aplicacin. Para definir diferentes recursos dependiendo de la resolucin y

densidad de la pantalla del dispositivo se suele dividir en varias subcarpetas:

/drawable-ldpi (densidad baja)

/drawable-mdpi (densidad media)

/drawable-hdpi (densidad alta)

/drawable-xhdpi (densidad muy alta)

/res/layout/ Contiene los archivos de definicin XML de las diferentes pantallas de la

interfaz grfica. Para definir distintos layouts dependiendo de la orientacin

del dispositivo se puede dividir en dos subcarpetas:

/layout (vertical)

/layout-land (horizontal)

/res/anim/

/res/animator/

Contienen la definicin de las animaciones utilizadas por la aplicacin.

/res/color/ Contiene archivos XML de definicin de colores segn estado.

/res/menu/ Contiene la definicin XML de los mens de la aplicacin.

/res/xml/ Contiene otros archivos XML de datos 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.

/res/values/ Contiene otros archivos XML de recursos de la aplicacin, como por ejemplo

cadenas de texto (strings.xml), estilos (styles.xml), colores (colors.xml),

arreglos de valores (arrays.xml), etc.

No todas estas carpetas tienen por qu aparecer en cada proyecto Android, tan slo las que se necesiten.

Como ejemplo, para un proyecto nuevo Android, se crean por defecto los siguientes recursos para la aplicacin:

7/25/2019 Mca006.pdf

12/119

Manual Mca006


Como se puede observar, existen algunas carpetas en cuyo nombre se incluye un sufijo adicional, como por

ejemplo values-v11 y values-v14. Estos, y otros sufijos, se emplean para definir recursos independientes para

determinados dispositivos segn sus caractersticas. De esta forma, por ejemplo, los recursos incluidos en la

carpeta values-v11 se aplicaran tan slo a dispositivos cuya versin de Android sea la 3.0 (API 11) o superior. Al

igual que el sufijo v existen otros muchos para referirse a otras caractersticas del terminal.

Entre los recursos creados por defecto, cabe destacar el layout activity_ppal.xml, que contiene la definicin de la

interfaz grfica de la pantalla principal de la aplicacin. Doble clic sobre el archivo, Eclipse mostrar esta interfaz

en su editor grfico (tipo arrastrar y soltar) y como se puede comprobar, en principio contiene tan slo una

etiqueta de texto centrada en pantalla con el mensaje Hello World!.

7/25/2019 Mca006.pdf

13/119

Manual Mca006


Existen dos maneras de trabajar, la primera utilizando el editor grfico, y la segunda manipulando directamente elarchivo XML asociado. En este caso, el XML asociado sera el siguiente:

Carpeta /gen/

Contiene una serie de elementos de cdigo generados automticamente al compilar el proyecto. Cada vez que segenera el proyecto, la maquinaria de compilacin de Android genera automticamente una serie de archivos fuente

java dirigidos al control de los recursos de la aplicacin. Importante: dado que estos archivos se generanautomticamente tras cada compilacin del proyecto es importante que no se modifiquen manualmente bajoninguna circunstancia.

7/25/2019 Mca006.pdf

14/119

Manual Mca006


El elemento ms importante de los archivos generados es R.java, donde se define la clase R.

La clase R contiene las constantes con los ID de todos los recursos de la aplicacin incluidos en la carpeta /res/, deforma que se pueda acceder fcilmente a estos recursos desde el cdigo a travs de el ID. As, por ejemplo, laconstante R.drawable.ic_launcher contendr el ID de la imagen ic_launcher.png contenida en la carpeta

/res/drawable/. A continuacin como ejemplo se muestra la clase R creada por defecto para un proyecto nuevo:

packagegala.curso;

publicfinalclassR {publicstaticfinalclassattr {}publicstaticfinalclassdimen {

/** Default screen margins, per the Android Design guidelines.

Customize dimensions originally defined in res/values/dimens.xml (such asscreen margins) for sw720dp devices (e.g. 10" tablets) in landscape here.

*/publicstaticfinalintactivity_horizontal_margin=0x7f040000;publicstaticfinalintactivity_vertical_margin=0x7f040001;

}publicstaticfinalclassdrawable {

publicstaticfinalintic_launcher=0x7f020000;}publicstaticfinalclassid {

7/25/2019 Mca006.pdf

15/119

Manual Mca006


publicstaticfinalintaction_settings=0x7f080000;}publicstaticfinalclasslayout {

publicstaticfinalintactivity_ppal=0x7f030000;}publicstaticfinalclassmenu {

publicstaticfinalintppal=0x7f070000;}publicstaticfinalclassstring {

publicstaticfinalintaction_settings=0x7f050001;publicstaticfinalintapp_name=0x7f050000;publicstaticfinalinthello_world=0x7f050002;

}publicstaticfinalclassstyle {

/**Base application theme, dependent on API level. This theme is replacedby AppBaseTheme from res/values-vXX/styles.xml on newer devices.

Theme customizations available in newer API levels can go inres/values-vXX/styles.xml, while customizations related tobackward-compatibility can go here.

Base application theme for API 11+. This theme completely replacesAppBaseTheme from res/values/styles.xml on API 11+ devices.

API 11 theme customizations can go here.

Base application theme for API 14+. This theme completely replacesAppBaseTheme from BOTH res/values/styles.xml andres/values-v11/styles.xml on API 14+ devices.

API 14 theme customizations can go here.*/

publicstaticfinalintAppBaseTheme=0x7f060000;/** Application theme.

All customizations that are NOT specific to a particular API-level can go here.*/

publicstaticfinalintAppTheme=0x7f060001;}}

Carpeta /assets/

Contiene todos los dems archivos auxiliares necesarios para la aplicacin (y que se incluirn en el paquete), comopor ejemplo archivos 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 paralos primeros se generar un ID en la clase R y se deber acceder a ellos con los diferentes mtodos de acceso arecursos. Para los segundos sin embargo no se generarn IDs y se podr acceder a ellos por su ruta como acualquier otro archivo del sistema. Se utilizara uno u otro segn las necesidades de la aplicacin.

Carpeta /bin/

Contiene los elementos compilados de la aplicacin y los archivos auxiliares; es generada automticamente y nodebera ser modificada. Cabe destacar el archivo con extensin .apk, que es el ejecutable de la aplicacin que seinstalar en el dispositivo.

7/25/2019 Mca006.pdf

16/119

Manual Mca006


Carpeta /libs/

Contiene las libreras auxiliares, normalmente en formato .jar utilizadas en la aplicacin Android.

Archivo 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, ), las libreras auxiliares utilizadas, o lospermisos necesarios para su ejecucin..

7/25/2019 Mca006.pdf

17/119

Manual Mca006


LECCION 3 Componentes de una aplicacin Android

A continuacin de enumeran los distintos tipos de componentes de software con los que se puede construir unaaplicacin Android.

En Java o .NET se manejan conceptos como ventana, control, eventos o servicios como los elementos bsicos en laconstruccin de una aplicacin.

En Android se dispone tambin de esos mismos elementos bsicos aunque con un pequeo cambio en laterminologa y el enfoque.

Activity

Las actividades (activities) representan el componente principal de la interfaz grfica de una aplicacin Android. Sepuede pensar en una actividad como el elemento anlogo a una ventana o pantalla en cualquier otro lenguajevisual.

View

Las vistas (view) son los componentes bsicos con los que se construye la interfaz grfica de la aplicacin, anlogopor ejemplo a los controles de Java o .NET. De inicio, Android pone a disposicin una gran cantidad de controlesbsicos, como cuadros de texto, botones, listas desplegables o imgenes, aunque tambin existe la posibilidad deextender la funcionalidad de estos controles bsicos o crear nuevos controles personalizados.

Service

Los servicios (service) son componentes sin interfaz grfica que se ejecutan en segundo plano (background). Enconcepto, son similares a los servicios presentes en cualquier otro sistema de operacin. Los servicios puedenrealizar cualquier tipo de acciones, por ejemplo actualizar datos, lanzar notificaciones, o incluso mostrar elementosvisuales (p.ej. actividades) si se necesita en algn momento la interaccin con del usuario.

Content Provider

Un proveedor de contenidos (content provider) es el mecanismo que se ha definido en Android para compartirdatos entre aplicaciones. Mediante estos componentes es posible compartir determinados datos de una aplicacinsin mostrar detalles sobre su almacenamiento interno, su estructura, o su implementacin. De la misma forma,una 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 eventosglobales generados por el sistema (por ejemplo: Batera baja, SMS recibido, Tarjeta SD insertada, ) o porotras aplicaciones (cualquier aplicacin puede generar mensajes (intents, en terminologa Android) broadcast, esdecir, 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 laaplicacin al usuario directamente sobre la pantalla principal.

Intent

Un intent es el elemento bsico de comunicacin entre los distintos componentes Android descritos anteriormente.Se pueden entender como los mensajes o peticiones que son enviados entre los distintos componentes de unaaplicacin 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.

7/25/2019 Mca006.pdf

18/119

Manual Mca006


LECCION 4 Desarrollando la primera aplicacin en Android

A modo de ilustrar con un ejemplo, el desarrollo de aplicaciones en Android, se van a disear dos actividades, en laprimera se coloca un cdigo de curso y un botn con una accin de mostrar el valor introducido en la segundaactividad.

La primera actividad se muestra en la siguiente figura:

El resultado de presionar el botn Bienvenido es la muestra de la siguiente actividad

El primer paso es es disear la pantalla principal. En Android, el diseo y la lgica de una pantalla estn separadosen dos arechvos distintos. Por un lado, en el archivo /res/layout/activity_ppal.xml se tiene el diseo puramentevisual de la pantalla definido como archivo XML y por otro lado, en el archivo /src/gala.curso/PpalActivity.java, seencuentra el cdigo java que determina la lgica de la pantalla. A lo largo del manual se utilizaran estos archivosen esto directorios, pero los nombres pueden ser cambiados a gusto de los desarrolladores.

Se va a modificar en primer lugar el aspecto de la ventana principal de la aplicacin aadiendo los controles(views) requeridos. Para ello, se edita el contenido del archivo activity_ppal.xml por el siguiente:

7/25/2019 Mca006.pdf

19/119

7/25/2019 Mca006.pdf

20/119

Manual Mca006


Y la segunda alternativa, la utilizada en el ejemplo, consistira en definir primero una nueva cadena de texto en elarchivo de recursos /res/values/strings.xml, por ejemplo con identificador curso y valor Indique el cdigo delcurso :.

Indique el codigo del curso :

Y posteriormente indicar el identificador de la cadena como valor de la propiedad android:text, siempre precedidodel prefijo @string/, de la siguiente forma:

Esta segunda alternativa permite tener perfectamente localizadas y agrupadas todas las cadenas de textoutilizadas en la aplicacin, lo que podra facilitar por ejemplo la traduccin de la aplicacin a otro idioma.

A continuacin se define la interfaz de la segunda pantalla, creando un nuevo archivo llamadoactivity_bienvenido.xml, y aadiendo esta vez tan solo una etiqueta (TextView) para mostrar el mensajepersonalizado de bienvenida al usuario.

Para aadir el archivo, se pulsa el botn derecho del ratn sobre la carpeta de recursos /res/layout y se pulsa laopcin New Android XML file.

En el cuadro de dilogo que aparece se indica como tipo de recurso Layout, se indica el nombre del archivo (conextensin .xml) y como elemento raz se seleccion LinearLayout. Finalmente se pulsa Finish para crear el archivo.

Eclipse crear entonces el nuevo archivo y lo abrir en el editor grfico, aunque se acceder a la pestaa de cdigopara modificar directamente el contenido XML del archivo.

Para esta segunda pantalla el cdigo del archivo es el siguiente :

Una vez definida la interfaz de las pantallas de la aplicacin se debe implementar la lgica de la misma. Como yase ha comentado, la lgica de la aplicacin se definir en archivos java independientes. Para la pantalla principal elarchivo se llama PpalActivity.java. La documentacin en el cdigo indica los pasos seguidos en la implementacindel ejemplo.

packagegala.curso;

7/25/2019 Mca006.pdf

21/119

7/25/2019 Mca006.pdf

22/119

7/25/2019 Mca006.pdf

23/119

Manual Mca006


Para este ejemplo se limita a incluir la actividad en el XML mediante una nueva etiqueta , indicar elnombre de la clase java asociada como valor del atributo android:name, y asignarle su ttulo mediante el atributoandroid:label. Todo esto se incluye justo debajo de la definicin de la actividad principal dentro del archivoAndroidManifest.xml:

LECCION 5 Layouts: Frame, Linear, Table, Grid , Relative

Los layoutsson elementos no visuales destinados a controlar la distribucin, posicin y dimensiones de loscontroles que se insertan en su interior. Estos componentes extienden a la clase base ViewGroup, como muchosotros componentes contenedores, es decir, capaces de contener a otros controles.

FrameLayout

ste es el ms simple de todos los layouts de Android. Un FrameLayout coloca todos sus controles hijos alineadoscon su esquina superior izquierda, de forma que cada control quedar oculto por el control siguiente (a menos queste ltimo tenga transparencia). Por ello, suele utilizarse para mostrar un nico control en su interior, a modo decontenedor (placeholder) sencillo para un slo elemento sustituible, por ejemplo una imagen.

Los componentes incluidos en un FrameLayout podrn establecer sus propiedades android:layout_widthyandroid:layout_height, que podrn tomar los valores match_parent (para que el control hijo tome ladimensin de su layout contenedor) o wrap_content (para que el control hijo tome la dimensin de sucontenido). NOTA: Si se est utilizando una versin de la API de Android inferior a la 8 (Android 2.2), en vez de

match_parent se deber utilizar su equivalente fill_parent.

Ejemplo

7/25/2019 Mca006.pdf

24/119

Manual Mca006


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

android:layout_width="match_parent"

android:layout_height="match_parent">

Con el cdigo anterior se consigue un layout tan sencillo como el siguiente:

LinearLayout

El siguiente tipo de layout en cuanto a nivel de complejidad es el LinearLayout. Este layout apila uno tras otrotodos 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 propiedadesandroid:layout_widthy android:layout_heightpara determinar sus dimensiones dentro del layout. Pero en elcaso de un LinearLayout, se tiene otro parmetro con el que jugar, la propiedad android:layout_weight.

7/25/2019 Mca006.pdf

25/119

Manual Mca006


Esta propiedad permite dar a los elementos contenidos en el layout unas dimensiones proporcionales entre ellas. Sise incluye en un LinearLayout vertical dos cuadros de texto (EditText) y a uno de ellos se le establece unlayout_weight=1y al otro un layout_weight=2se consigue 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 propiedadesweight) de alto que el primero.

7/25/2019 Mca006.pdf

26/119

Manual Mca006


Con el cdigo anterior se consigue un layout como el siguiente:

As pues, a pesar de la simplicidad aparente de este layout resulta ser lo suficiente verstil como para ser de

utilidad en muchas ocasiones.

TableLayout

Un TableLayout permite 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 quecompondrn la tabla (objetos TableRow), y dentro de cada fila las columnas necesarias, con la salvedad de queno existe ningn objeto especial para definir una columna (algo as como un TableColumn) sino que directamentese insertan los controles necesarios dentro del TableRow y cada componente insertado (que puede ser un controlsencillo o incluso otro ViewGroup) corresponder a una columna de la tabla. De esta forma, el nmero final de filasde la tabla se corresponder con el nmero de elementos TableRow insertados, y el nmero total de columnasquedar 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 dichacolumna, pero existen una serie de propiedades para modificar este comportamiento:

android:stretchColumns. Indicar las columnas que pueden expandir para absorber el espacio libre dejado porlas dems columnas a la derecha de la pantalla.

android:shrinkColumns. Indicar las columnas que se pueden contraer para dejar espacio al resto de columnasque se puedan salir por la derecha de la pantalla.

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 variascolumnas de la tabla (anlogo al atributo colspan de HTML). Esto se indicar mediante la propiedadandroid:layout_spandel componente concreto que deber tomar dicho espacio.

A continuacin se muestra un ejemplo.

7/25/2019 Mca006.pdf

27/119

Manual Mca006


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

android:layout_width="match_parent"

android:layout_height="match_parent" >

El layout resultante del cdigo anterior sera el siguiente:

7/25/2019 Mca006.pdf

28/119

Manual Mca006


GridLayout

Este tipo de layout fue incluido a partir de la API 14 (Android 4.0)y sus caractersticas son similares alTableLayout, ya que se utiliza igualmente para distribuir los diferentes elementos de la interfaz de forma tabular,distribuidos en filas y columnas. La diferencia entre ellos estriba en la forma que tiene el GridLayout de colocar y

distribuir sus elementos hijos en el espacio disponible. En este caso, a diferencia del TableLayout se indica elnmero de filas y columnas como propiedades del layout, mediante android:rowCounty android:columnCount.Con estos datos ya no es necesario ningn tipo de elemento para indicar las filas, como se haca con el elementoTableRow del TableLayout, sino que los diferentes elementos hijos se irn colocando ordenadamente por filas ocolumnas (dependiendo de la propiedad android:orientation) hasta completar el nmero de filas o columnasindicadas en los atributos anteriores. Adicionalmente, igual que en el caso anterior, tambin se tienen disponibleslas propiedades android:layout_rowSpany android:layout_columnSpanpara conseguir que una celda ocupeel lugar de varias filas o columnas.

Existe tambin una forma de indicar de forma explcita la fila y columna que debe ocupar un determinado elementohijo contenido en el GridLayout, y se consigue utilizando los atributos android:layout_rowyandroid:layout_column. De cualquier forma, salvo para configuraciones complejas del grid no suele sernecesario utilizar estas propiedades.

Con todo esto en cuenta, para conseguir una distribucin equivalente a la del ejemplo anterior del TableLayout, senecesitara escribir un cdigo como el siguiente:

7/25/2019 Mca006.pdf

29/119

Manual Mca006


RelativeLayout

Este layout permite especificar la posicin de cada elemento de forma relativa a su elemento padre o a cualquierotro elemento incluido en el propio layout. De esta forma, al incluir un nuevo elemento X se puede indicar porejemplo que debe colocarse debajo del elemento Y y alineado a la derecha del layout padre.

7/25/2019 Mca006.pdf

30/119

7/25/2019 Mca006.pdf

31/119

Manual Mca006


Opciones de espaciado o padding (tambin disponibles para el resto de layouts):

android:padding.

android:paddingBottom.

android:paddingTop.

android:paddingLeft.

android:paddingRight.

LECCION 6 Controles: Propiedades, Eventos, Personalizacin

Los controles en Android se parametrizan indicando las Propiedade y se personalizan programando los eventos. Laspropiedades de apariencia pueden definirse en los archivos .xml donde se indican los layouts para los recursos. Laspropiedades y los eventos pueden programarse dinmicamente en las clases de Java.

Por ejemplo, el siguiente archivo .xml define las propiedades de tres controles, uno del tipo TextView (etiqueta),uno del tipo EditText(caja de texto) y uno del tipo Button (button).

La propiedad id, define el identificador nico del control y como se puede acceder a l desde cualquier lugar delcdigo. Al indicar el prefijo @+id/ al id del control se le indica al compilador de Java que lo coloque como unaconstante en la clase R.

publicstaticfinalclassid {publicstaticfinalintBBienvenido=0x7f080004;publicstaticfinalintEtCurso=0x7f080003;publicstaticfinalintLLPpal=0x7f080001;publicstaticfinalintTvCurso=0x7f080002;

}

Luego desde cualquier parte de la aplicacin se puede acceder a cada control

finalEditText etCurso = (EditText)findViewById(R.id.EtCurso);finalButton bBienvenido = (Button)findViewById(R.id.BBienvenido);

7/25/2019 Mca006.pdf

32/119

Manual Mca006


El cdigo de los eventos se escribe siguiendo el formato de los Listener definidos en Java, dentro de un Listener secolocan todos los eventos a manejarse por el control.

bBienvenido.setOnClickListener(newOnClickListener() {@OverridepublicvoidonClick(View v) {

// Crear el Intent para comunicar la Principal con Bienvenido

Intent intent =newIntent(PpalActivity.this, BienvenidoActivity.class);

// Crearla informacin a pasar entre actividadesBundle b = newBundle();b.putString("CURSO", etCurso.getText().toString());

//Aadir la informacin al intentintent.putExtras(b);

//Iniciar la nueva actividadstartActivity(intent);

}});

El ejemplo anterior muestra cmo implementar el evento onClick para el botn bBienvenido de un control del tipo

Button. Cada evento se encuentra asociado a un Listener. De esta manera se personaliza el cdigo de loscontroles. Para la clase botn existe el mtodo setOnClickListener y el evento OnClick en cual se implementa comoun mtodo de la clase OnClickListener.

Personalizar el aspecto de un control

Para cambiar la forma de un botn se podra simplemente asignar una imagen a la propiedad

android:background, pero esta solucin no sirve 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 ofrece total libertad para hacer esto mediante el uso de se l ec t o r es. Un se l e c t o r se define

mediante un archivo 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 se requiere dar un aspecto plano a un botn ToggleButton, se puede disear las imgenes

necesarias para los estados pulsado (toggle_on.png) y no pulsado (toggle_off.png) y crear un selector como el

siguiente:

7/25/2019 Mca006.pdf

33/119

Manual Mca006


android:drawable="@drawable/toggle_on" />

En el cdigo anterior se asigna a cada posible estado del botn una imagen (un elemento drawable) determinado.

As, por ejemplo, para el estado pulsado (state_checked=true) se asigna la imagen toggle_on.

Este selector se guarda por ejemplo en un archivo llamado toggle_style.xml y se coloca como un recurso ms en la

carpeta de recursos /res/drawable. Hecho esto, tan slo basta hacer referencia a este nuevo recurso creado en

la propiedadandroid:background del botn:

En la siguiente imagen se visualiza el aspecto por defecto de un ToggleButton (columna izquierda) y cmo ha

quedado el ToggleButton personalizado (columna derecha).

LECCION 7 Controles bsicos: Button, TogleButton, ImageButton, ImageView, TextView, EditText,

Objetos Tipo Spanned, Formatos en objetos de texto, CheckBox, RadioBotton

El SDK de Android 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 estostres controles.

Control Button http://developer.android.com/reference/android/widget/Button.html

7/25/2019 Mca006.pdf

34/119

Manual Mca006


Un control de tipo Button es el botn ms bsico a utilizar. En el ejemplo siguiente se define un botn con el texto

Pulsar asignando su propiedad android:text. Adems de esta propiedad se podra 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.

Control ToggleButton http://developer.android.com/reference/android/widget/ToggleButton.html

Un control de tipo ToggleButton es un tipo de botn que puede permanecer en dos posibles estados,

pulsado/no_pulsado. En este caso, en vez de definir un slo texto para el control se definen dos, dependiendo de

su estado. As, se pueden asignar las propiedades android:textOny android:textoOffpara definir ambos textos.

Control ImageButtonhttp://developer.android.com/reference/android/widget/ImageButton.html

En un control de tipo ImageButton se puede definir una imagen a mostrar en vez de un texto, para lo que se debe

asignar la propiedad android:src. Normalmente se asigna esta propiedad con el descriptor de algn recurso

incluido en la carpeta /res/drawable. As, por ejemplo, se tiene una imagen llamada ok.png y se hace

referencia al recurso @drawable/ok. Adicionalmente, al tratarse de un control de tipo imagen tambin se debera

asignar la propiedad android:contentDescriptioncon una descripcin textual de la imagen, de forma que la

aplicacin sea lo ms accesible posible.

7/25/2019 Mca006.pdf

35/119

Manual Mca006


android:contentDescription="@string/icono_ok"

android:src="@drawable/ok" />

Aunque existe este tipo especfico de botn para imgenes, tambin es posible aadir una imagen a un botn

normal de tipo Button, a modo de elemento suplementario al texto. Por ejemplo, si se requiere aadir un icono a la

izquierda del texto de un botn se utiliza la propiedad android:drawableLeftindicando como valor el descriptor

(ID) de la imagen que se requiere mostrar:

El botn mostrado en este caso sera similar a ste:

Control ImageView http://developer.android.com/reference/android/widget/ImageView.html

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 la 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:maxWidthy android:maxHeight, o para indicar cmo

debe adaptarse la imagen al tamao del control, android:scaleType(5=CENTER, 6=CENTER_CROP,

7=CENTER_INSIDE, ). Adems, al tratarse de un control de tipo imagen se debe establecer siempre la propiedad

android:contentDescriptionpara ofrecer una breve descripcin textual de la imagen, algo que har la aplicacin

mucho ms accesible.

7/25/2019 Mca006.pdf

36/119

7/25/2019 Mca006.pdf

37/119

Manual Mca006


texto += "123";

lEtiqueta.setText(texto);

lEtiqueta.setBackgroundColor(Color.BLUE);

Control EditText http://developer.android.com/reference/android/widget/EditText.html

El control EditText (Caja de Texto) 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.

Por supuesto si no se requiere que el cuadro de texto aparezca inicializado con ningn texto, no es necesario incluir

esta propiedad en el layout XML. Si se debe establecer la propiedad android:inputType. Esta propiedad indica el

tipo de contenido que se va a introducir en el cuadro de texto, como por ejemplo una direccin de correo

electrnico (textEmailAddress), un nmero genrico (number), un nmero de telfono (phone), una direccin

web (textUri), o un texto genrico (text). El valor que se establece para esta propiedad tendr adems efecto en

el tipo de teclado que mostrar Android para editar dicho campo. As, por ejemplo, si se indicado text mostrar el

teclado completo alfanumrico, si se indicado phone mostrar el teclado numrico del telfono, etc.

De igual forma, desde el cdigo se puede recuperar y establecer el texto mediante los mtodos getText()ysetText(nuevoTexto)respectivamente:

final EditText ETTexto = (EditText)findViewById(R.id.ETTexto);

String texto = ETTexto.getText().toString();

ETTexto.setText("Bienvenido!");

Notar que es necesario realizar una llamada toString() al resultado de getText(). La explicacin para esto es que elmtodo getText() no devuelve directamente una cadena de caracteres (String) sino un objeto de tipo Editable, quea su vez implementa la interfaz Spannable. Y esto demuestra caracterstica ms interesante del control EditText, yes que no slo permite editar texto plano sino tambin texto enriquecido o con formato.

Interfaz Spanned

Un objeto de tipo Spannedes una cadena de caracteres (deriva de la interfaz CharSequence) en la que se puedeninsertar otros objetos a modo de marcas o etiquetas(spans) asociados a rangos de caracteres. De esta interfazderiva la interfaz Spannable, que permite la modificacin de estas marcas, y a su vez de sta ltima deriva lainterfaz Editable, que permite adems la modificacin del texto.

7/25/2019 Mca006.pdf

38/119

Manual Mca006


De esta manera se pueden insertar marcas de formato de texto, as como cualquier tipo de objeto.

Existen muchos tipos de spans predefinidos en la plataforma que se pueden utilizar para dar formato al texto, entreellos:

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 se puede hacer lo siguiente:

// Se crea un nuevo objeto de tipo Editable

Editable str = Editable.Factory.getInstance().newEditable("Esto es un simulacro.");

//Se marca cono fuente negrita la palabra "simulacro" (caracteres del 11-19)

str.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), 11, 19, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

En este ejemplo se est insertando un spande tipo StyleSpanpara marcar un fragmento de texto con estilonegrita. Para insertarlo se utilizael mtodo setSpan(),que recibe como parmetro el objeto Span a insertar, laposicin inicial y final del texto a marcar, y un flag que indica la forma en la que el span se podr extender alinsertarse nuevo texto.

Texto con formato en controles TextView y EditText

Con el mtodo setTextse pueden asignar objetos Editables a los controles TextViewy EditText. Por ejemplo sise le asigna al control EditText el objeto Editable creado en los ejemplos:

ETTexto.setText(str);

Tras ejecutar el cdigo, insertando un botn SetText en la aplicacin de ejemplo, se observa como efectivamenteen el cuadro de texto aparece el mensaje con el formato esperado:

En la aplicacin de ejemplo tambin se incluye un botn adicional Negrita que se encargar de convertir a estilo

negrita un fragmento de texto previamente seleccionado en el cuadro de texto. La intencin deesto es presentarlos mtodos disponibles para determinar el comienzo y el fin de una seleccin en un control de este tipo. Para ellose utilizan los mtodos getSelectionStart()y getSelectionEnd(), que devuelven el ndice del primer y ltimocarcter seleccionado en el texto. Sabiendo esto, slo queda utilizar el mtodo setSpan()para convertir laseleccin a negrita.

Spannable texto = ETTexto.getText();

7/25/2019 Mca006.pdf

39/119

Manual Mca006


int ini = ETTexto.getSelectionStart();

int fin = ETTexto.getSelectionEnd();

texto.setSpan(

new StyleSpan(android.graphics.Typeface.BOLD),

ini, fin,

Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

En Andriod es posible asignar texto con y sin formato a un cuadro de texto, pero qu ocurre a la hora derecuperar texto con formato desde el control?. La funcin getText() devuelve un objeto de tipo Editable y sobreste se puede hacer un toString(). Pero con esta solucin se est perdiendo todo el formato del texto, y no sepodra por ejemplo salvar en una base de datos.

La solucin a esto ltimo requiere recuperar directamente el objeto Editable y serializarlo de algn modo, mejoran si es en un formato estandar. En Android este trabajo lo realiza la clase Htmlhttp://developer.android.com/reference/android/text/Html, con mtodos para convertir cualquier objeto Spanneden su representacin HTML equivalente. En el siguiente ejemplo se recupera el texto de la ventana anterior y se

utilicemos el mtodo Html.toHtml(Spannable) para convertirlo a formato HTML:

//Obtiene el texto del control con etiquetas de formato HTML

String aux2 = Html.toHtml(ETTexto.getText());

Haciendo esto, se obtendra una cadena de texto como la siguiente, la cual se podra por ejemplo almacenar enuna base de datos o publicar en cualquier web sin perder el formato de texto establecido:

Esto es un simulacro

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 se puede utilizar el mtodoHtml.fromHtml(String) de la siguiente forma:

//Asigna texto con formato HTML

ETTexto.setText(

Html.fromHtml("

Esto es un simulacro.
"),
BufferType.SPANNABLE);

Control CheckBox http://developer.android.com/reference/android/widget/CheckBox.html

Un control checkbox se suele utilizar para marcar o desmarcar opciones en una aplicacin, y en Android estrepresentado por la clase del mismo nombre, CheckBox. La forma de definirlo en la interfaz y los mtodosdisponibles para manipularlos desde el cdigo son anlogos a los ya indicados para el control ToggleButton.

De esta forma, para definir un control de este tipo en el layout se puede utilizar el cdigo siguiente, que define uncheckbox con el texto Marcar:

7/25/2019 Mca006.pdf

40/119

Manual Mca006


android:checked="false" />

En cuanto a la personalizacin del control se puede decir que ste extiende [indirectamente] del control TextView,por lo que todas las opciones de formato son vlidas tambin para este control. Adems, se puede utilizar lapropiedad android:checkedpara inicializar el estado del control a marcado (true) o desmarcado (false). Si no seestablece esta propiedad el control aparecer por defecto en estado desmarcado.

En el cdigo de la aplicacin se puede hacer uso de los mtodos isChecked()para conocer el estado del control, ysetChecked(estado) para establecer un estado concreto para el control.

if (checkBox.isChecked()) {

checkBox.setChecked(false);

}

En cuanto a los posibles eventos que puede lanzar este control, el ms interesante, al margen del siempre vlidoonClick, es sin duda el que informa de que ha cambiado el estado del control, que recibe el nombre deonCheckedChanged. Para implementar las acciones de este evento se utiliza la siguiente lgica, donde trascapturar el evento, y dependiendo del nuevo estado del control (variable isChecked recibida como parmetro), serealiza una accin

private CheckBox cbMarcar;

//...

cbMarcar = (CheckBox)findViewById(R.id.CBMarcar);

cbMarcar.setOnCheckedChangeListener(

new CheckBox.OnCheckedChangeListener() {

public void onCheckedChanged(CompoundButton buttonView,

boolean isChecked) {

if (isChecked) {

cbMarcar.setText("Checkbox marcado!");

}

else {

cbMarcar.setText("Checkbox desmarcado!");

}

}

});

Control RadioButtonhttp://developer.android.com/reference/android/widget/RadioButton.html

Al igual que los controles checkbox, un radiobuttonpuede estar marcado o desmarcado, pero en este casosuelen utilizarse dentro de un grupo de opciones donde una, y slo una, de ellas debe estar marcadaobligatoriamente, es decir, que si se marca una de las opciones se desmarcar automticamente la que estuvieraactiva anteriormente. En Android, un grupo de botones radiobuttonse define mediante un elementoRadioGroup, que a su vez contendr todos los elementos RadioButton necesarios. Un ejemplo de cmo definir ungrupo de dos controles radiobutton en la interfaz:

7/25/2019 Mca006.pdf

41/119

7/25/2019 Mca006.pdf

42/119

Manual Mca006


lblMensaje = (TextView)findViewById(R.id.LSeleccion);

rgOpciones = (RadioGroup)findViewById(R.id.RGgruporb);

rgOpciones.setOnCheckedChangeListener(

new RadioGroup.OnCheckedChangeListener() {

public void onCheckedChanged(RadioGroup group, int checkedId) {

lblMensaje.setText("ID opcin seleccionada: " + checkedId);

}

});

LECCION 8 Controles de Seleccin: Adaptadores, Listas desplegables tipo Spinner, Listas fijas tipo

ListView, GridView

Al igual que en otros frameworks Android dispone de diversos controles para seleccionar una opcin dentro de unalista de posibilidades. As, se puede utilizar listas desplegables (Spinner), listas fijas (ListView), tablas(GridView) y otros controles especficos de la plataforma como por ejemplo las galeras de imgenes (Gallery).

Los controles de seleccin utilizan un elemento importante y comn a todos ellos, los adaptadores.

Adaptadores en Android (adapters)

Para los desarrolladores de java que hayan utilizado frameworksde interfaz grfica como Swing, el concepto deadaptador les resultar familiar. Un adaptador representa una interfaz comn al modelo de datos que existe pordetrs de todos los controles de seleccin. Por lo tanto, todos los controles de seleccin accedern a los datos quecontienen a travs de un adaptador.

Adems de proveer de datos a los controles visuales, el adaptador tambin ser responsable de generar a partir deestos datos las vistas especficas que se mostrarn dentro del control de seleccin. Por ejemplo, si cada elementode una lista estuviera formado a su vez por una imagen y varias etiquetas, el responsable de generar y establecerel 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 se puede extender su funcionalidadfacilmente para adaptarlos a los requerimientos. Los ms comunes son los siguientes:

ArrayAdapter. Es el ms sencillo de todos los adaptadores, y provee de datos a un control de seleccin apartir de un array de objetos de cualquier tipo.

SimpleAdapter.Se utiliza para mapear datos sobre los diferentes controles definidos en un archivo XMLde layout.

SimpleCursorAdapter.Se utiliza para mapear las columnas de un cursor abierto sobre una base de

datos sobre los diferentes elementos visuales contenidos en el control de seleccin.

A continuacin se crea un adaptador de tipo ArrayAdapter para trabajar con un array genrico de java:

final String[] datos =

new String[]{"Elem1","Elem2","Elem3","Elem4","Elem5"};

7/25/2019 Mca006.pdf

43/119

Manual Mca006


ArrayAdapter adaptador =

new ArrayAdapter(this,

android.R.layout.simple_spinner_item, datos);

Para crear un adaptador se requieren tres parmetros:

El contexto, que normalmente ser simplemente una referencia a la actividad donde se crea el adaptador.

El ID del layout sobre el que se mostrarn los datos del control. En este caso se pasamos el ID de unlayout predefinido en Android (android.R.layout.simple_spinner_item), formado nicamente por un controlTextView, pero podramos pasarle el ID de cualquier layout personalizado del proyecto con cualquierestructura y conjunto de controles.

El array que contiene los datos a mostrar.

Con esto ya se tiene creado el adaptador para los datos a mostrar y slo resta asignar este adaptador al control deseleccin para que ste muestre los datos en la aplicacin.

Una alternativa a tener en cuenta si los datos a mostrar en el control son estticos sera definir la lista de posiblesvalores como un recurso de tipo string-array. Para ello, primero se crea un nuevo archivo XML en la carpeta/res/valuesllamado por ejemplo valores_array.xml y se incluyen en l los valores seleccionables de la siguienteforma:

Elem1

Elem2

Elem3

Elem4

Elem5

Tras esto, a la hora de crear el adaptador, se utilizara el mtodo createFromResource()para hacer referencia aeste arreglo XML creado:

ArrayAdapter adaptador =

ArrayAdapter.createFromResource(this,

R.array.valores_array,

android.R.layout.simple_spinner_item);

Control Spinner http://developer.android.com/reference/android/widget/Spinner.html

Las listas desplegables en Android se llaman Spinner. Funcionan de forma similar al de cualquier control de estetipo, el usuario selecciona la lista, se muestra una especie de lista emergente al usuario con todas las opcionesdisponibles y al seleccionarse una de ellas sta queda fijada en el control. Para aadir una lista de este tipo a laaplicacin se puede utilizar el cdigo siguiente:

7/25/2019 Mca006.pdf

44/119

7/25/2019 Mca006.pdf

45/119

Manual Mca006


Como se puede observar en las imgenes, la representacin del elemento seleccionado (primera imagen) y el delas opciones disponibles (segunda imagen) es distinto, incluyendo el segundo de ellos incluso algn elementogrfico a la derecha para mostrar el estado de cada opcin (en este caso, slo para Android 2). Esto es debido a lautilizacin de dos layouts diferentes para uno y otros elementos.

En cuanto a los eventos disparados por el control Spinner, el ms comnmente utilizado ser el generado al

seleccionarse una opcin de la lista desplegable, onItemSelected. Para capturar este evento se muestra elsiguiente cdigo:

cmbOpciones.setOnItemSelectedListener(

new AdapterView.OnItemSelectedListener() {

public void onItemSelected(AdapterView parent,

android.view.View v, int position, long id) {

lblMensaje.setText("Seleccionado: " + datos[position]);

}

public void onNothingSelected(AdapterView parent) {

lblMensaje.setText("");

}

});

7/25/2019 Mca006.pdf

46/119

Manual Mca006


A diferencia de los ejemplos anteriores, en este evento se definen dos mtodos, el primero de ellos(onItemSelected) que ser llamado cada vez que se seleccione una opcin en la l ista desplegable, y el segundo(onNothingSelected)que se llamar cuando no haya ninguna opcin seleccionada (esto puede ocurrir porejemplo si el adaptador no tiene datos).

LECCION 9 Controles personalizados: Extendiendo la funcin de un control existente, Combinandovarios controles para crear uno ms complejo, Diseando un control desde cero

En ocasiones se requiere crear controles personalizados, diseados a la medida de los requerimientos.

Android permite crear controles personalizados, y permite hacerlo de tres formas diferentes:

Extendiendo la funcionalidad de un control ya existente.

Combinando varios controles para formar otro ms complejo.

Diseando desde cero un nuevo control.

Extendiendo la funcin de un control existente

A modo de ejemplo, se va a extender el control EditText (cuadro de texto) para mostrar en todo momento el

nmero de caracteres que contiene a medida que se escribe en l..

En la esquina superior derecha del cuadro de texto se va a mostrar el nmero de caracteres del mensaje de texto

introducido, que ira actualizndose a medida se modifica el texto.

Para empezar, se va a crear una nueva clase java heredando del control a utilizar como base, en este

caso EditText.public class ExtendedEditText extends EditText

{

//...

}

Se sobreescriben los constructores heredados,.

public ExtendedEditText(Context context, AttributeSet attrs, int defStyle){

super(context, attrs,defStyle);

}

public ExtendedEditText(Context context, AttributeSet attrs) {

super(context, attrs);

7/25/2019 Mca006.pdf

47/119

Manual Mca006


}

public ExtendedEditText(Context context) {

super(context);

}

Para modificar el aspecto del control aadiendo el contador de caracteres se sobreescribe el evento onDraw(),

invocado por Android cada vez se redibuja el control en pantalla. Este mtodo recibe como parmetro un objeto

Canvas, el lienzo donde se dibujan 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.

private void inicializacion()

{

Paint p1 = new Paint(Paint.ANTI_ALIAS_FLAG);

p1.setColor(Color.BLACK);

p1.setStyle(Style.FILL);

Paint p2 = new Paint(Paint.ANTI_ALIAS_FLAG);

p2.setColor(Color.WHITE);

p2.setTextSize(20);

}

Se debe tener en cuenta es que todos los mtodos de dibujo reciben las unidades en pixeles y por tanto si se

utilizan valores fijos se tendran problemas al visualizar los resultados en pantallas con distintas densidades de

pxeles. Para evitar esto en lo posible, se convierten los valores de pxeles a algn valor dependiente de la

densidad de la pantalla, lo que en Android se puede conseguir multiplicando los pxeles por un factor de escala con

los mtodos getResources().getDisplayMetrics().density.private void inicializacion()

{

//...

escala = getResources().getDisplayMetrics().density;

}

7/25/2019 Mca006.pdf

48/119

Manual Mca006


//...

@Override

public void onDraw(Canvas canvas)

{

//llamada al mtodo base

super.onDraw(canvas);

// Se dibuja el fondo negro del contador

canvas.drawRect(this.getWidth()-30*escala, 5*escala,

this.getWidth()-5*escala, 20*escala, p1);

//Se dibuja el nmero de caracteres sobre el contador

canvas.drawText("" + this.getText().toString().length(),

this.getWidth()-28*escala, 17*escala, p2);

}

A estos mtodos se les pasa como parmetro las coordenadas del elemento a dibujar relativas al espacio ocupado

por el control y el pincel a utilizar en cada caso.

Para agregar el control a la interfaz de la aplicacin, se incluye en el layout XML de la ventana tal como cualquier

otro control, teniendo en cuenta se debe hacer referencia a l con el nombre completo de la nueva clase creada

(incluido el paquete java)

Se observa cmo queda el control en dos dispositivos distintos con densidades de pantalla diferentes.

En Android 2 con densidad de pantalla baja:

7/25/2019 Mca006.pdf

49/119

Manual Mca006


En Android 4 con densidad de pantalla alta:

Combinando varios controles para crear un control ms complejo

Como ejemplo ilustrativo se va a crear un control de identificacin (login) formado por varios controles estndarde Android. La idea es conseguir un control como el mostrado en la siguiente figura:

A la derecha del botn Login se agrega una etiqueta donde mostrar el resultado de la identificacin del usuario

(login correcto o incorrecto).

A este control se aadirn adems eventos personalizados.

El primer paso es construir la interfaz del control a partir de controles sencillos: etiquetas, cuadros de texto y

botones. Para ello se crea un nuevo layout XML en la carpeta \res\layout con el nombre control_login.xml. En

este archivo se define la estructura del control:

7/25/2019 Mca006.pdf

50/119

Manual Mca006


android:padding="10dip">

7/25/2019 Mca006.pdf

51/119

Manual Mca006


android:layout_height="wrap_content"

android:id="@+id/BtnAceptar"

android:text="@string/login"

android:paddingLeft="20dip"

android:paddingRight="20dip" />

A continuacin se crea la clase java asociada donde se define toda la funcionalidad del control. Como se utiliz el

LinearLayout para construir el control, esta nueva clase deber heredar tambin de la clase java LinearLayout de

Android. Se deben redefinir los dos constructores bsicos:ejemplo.gala.android.controlpers2;

//...

public class ControlLogin extends LinearLayout

{

public ControlLogin(Context context) {

super(context);

inicializar();

}

public ControlLogin(Context context, AttributeSet attrs) {


inicializar();

7/25/2019 Mca006.pdf

52/119

Manual Mca006


}

}

En el mtodo inicializar() se obtienen las referencias a todos los controles y se asignan los eventos necesarios.

private void inicializar()

{

//Se utiliza el layout 'control_login' como interfaz del control

String infService = Context.LAYOUT_INFLATER_SERVICE;

LayoutInflater li =

(LayoutInflater)getContext().getSystemService(infService);

li.inflate(R.layout.control_login, this, true);

// Se obtienen referencias a los distintos control

txtUsuario = (EditText)findViewById(R.id.TxtUsuario);

txtPassword = (EditText)findViewById(R.id.TxtPassword);

btnLogin = (Button)findViewById(R.id.BtnAceptar);

lblMensaje = (TextView)findViewById(R.id.LblMensaje);

//Se asocian los eventos necesarios

asignarEventos();

}

Ms adelante se explicar el mtodos mtodo asignarEventos().

Una vez definida la interfaz y la funcionalidad bsica del nuevo control, se puede utilizar desde otra actividad como

cualquier otro control predefinido. Para ello se hace referencia a l utilizando la ruta completa del paquete java

utilizado, como ejemplo.gala.ControlLogin. Se inserta el nuevo control en la actividad principal de la aplicacin:

7/25/2019 Mca006.pdf

53/119

Manual Mca006


android:layout_height="wrap_content" />

Como se hereda de LinearLayout , se puede utilizar cualquier atributo permitido para dicho tipo de controles, en

este caso se establecen por ejemplo los atributos layout_width, layout_height y background. Si se ejecuta ahora la

aplicacin.

En Android 2.x se tendra algo como lo siguiente:

Para Android 4.x se veramos as:

A continuacin, se aade algo ms de funcionalidad. En primer lugar, se puede aadir algn mtodo pblico

exclusivo del control. Como ejemplo se puede aadir un mtodo que permita modificar el texto de la etiqueta de

resultado del login. Esto no tiene ninguna dificultad:

public void setMensaje(String msg)

{

lblMensaje.setText(msg);

}

7/25/2019 Mca006.pdf

54/119

Manual Mca006


En segundo lugar, todo control debe tener algunos eventos que 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. El

control va a disponer de un evento personalizado, llamado OnLogin, disparado cuando el usuario introduce sus

credenciales de identificacin y pulsa el botn Login.

Para definir un evento, se crea una interfaz java para definir el listener. Esta interfaz tan slo tendr un mtodo

llamado onLogin() devolviendo los dos datos introducidos por el usuario (usuario y contrasea):package ejemplo.gala.android.controlpers2;

public interface OnLoginListener

{

void onLogin(String usuario, String password);

}

A continuacin, se aade un nuevo miembro de tipo OnLoginListener a la clase ControlLogin, y un mtodo pblicopara suscribirse al nuevo evento.

public class ControlLogin extends LinearLayout

{

private OnLoginListener listener;

//...

public void setOnLoginListener(OnLoginListener l)

{

listener = l;

}

}

La aplicacin principal puede suscribirse al evento OnLogin y ejecutar el cdigo cuando ste se genere.La

implementacin del evento se colocar en el mtodo asignarEventos definido previamente:.

private void asignarEventos()

7/25/2019 Mca006.pdf

55/119

7/25/2019 Mca006.pdf

56/119

Manual Mca006


}

Al ejecutar ahora la aplicacin principal e introducir las credenciales correctas (por ejemplo para Android 4):

A continuacin se van a definir atributos XML exclusivos para el control. Como ejemplo, se va 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.

Se declara el nuevo atributo y se asocia al control ControlLogin. Esto se realiza en el archivo \res\values\attrs.xml.

Para ello, se aade una nueva seccin asociada a ControlLogin dentro del

elemento, donde se indica el nombre (name) y el tipo (format) del nuevo atributo.

Para procesar el atributo, se obtiene la lista de atributos asociados a ControlLogin mediante el mtodo

obtainStyledAttributes() del contexto de la aplicacin, se obtiene el valor del nuevo atributo definido (mediante el

ID, que estar formado por la concatenacin del nombre del control y el nombre del atributo, ejemlo

ControlLogin_login_text).public ControlLogin(Context context, AttributeSet attrs) {


inicializar();

// Procesamos los atributos XML personalizados

TypedArray a =

getContext().obtainStyledAttributes(attrs,

R.styleable.ControlLogin);

7/25/2019 Mca006.pdf

57/119

Manual Mca006


String textoBoton = a.getString(

R.styleable.ControlLogin_login_text);

btnLogin.setText(textoBoton);

a.recycle();

}

Slo queda utilizarlo. Para ello se debe declarar un nuevo espacio de nombres (namespace) local para el paquete

java utilizado, ejemplo gala:xmlns:gala="http://schemas.android.com/apk/res/com.gala.android.controlpers2"

Diseando un control desde cero

Como ejemplo, se va a construir un control permitiendo 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. En Android 2 se mostrara as:

7/25/2019 Mca006.pdf

58/119

Manual Mca006


En Android 4 se visualizara de forma prcticamente idntica:

Los controles creados desde cero , herenda de la clase View (clase padre de la gran mayora de elementos visuales

de Android). En el ejemplo, se redefinen dos eventos de la clase View, onDraw() para el dibujo de la interfaz, y

onMeasure() para el clculo de las dimensiones.

El evento onMeasure()se ejecuta automticamente cada vez que se necesita recalcular el tamao de un control.

Pero, 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() se reciben como parmetros las restricciones del elementopadre en cuanto a ancho y alto del control. Estas restricciones se reciben en forma de objetos MeasureSpec, con

dos campos: modo y tamao. Emodo 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, se puede calcular el tamao deseado para el control. Para el control de

ejemplo, es utilizar 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 se elegir como tamao del control el tamao recibido

como parmetro:

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

{

int ancho = calcularAncho(widthMeasureSpec);

7/25/2019 Mca006.pdf

59/119

Manual Mca006


int alto = calcularAlto(heightMeasureSpec);

setMeasuredDimension(ancho, alto);

}

private int calcularAlto(int limitesSpec)

{

int res = 100; //Alto por defecto

int modo = MeasureSpec.getMode(limitesSpec);

int limite = MeasureSpec.getSize(limitesSpec);

if (modo == MeasureSpec.AT_MOST) {

res = limite;

}

else if (modo == MeasureSpec.EXACTLY) {

res = limite;

}

return res;

}

private int calcularAncho(int limitesSpec)

{

int res = 200; //Ancho por defecto

int modo = MeasureSpec.getMode(limitesSpec);

int limite = MeasureSpec.getSize(limitesSpec);

if (modo == MeasureSpec.AT_MOST) {

res = limite;

}

else if (modo == MeasureSpec.EXACTLY) {

res = limite;

}

return res;

7/25/2019 Mca006.pdf

60/119

Manual Mca006


}

Como nota importante, al final del evento onMeasure() se debe llamar al mtodo setMeasuredDimension() pasando

como parmetros el ancho y alto calculados para el control.

La interfaz grfica del control se dibuja dentro del evento onDraw(). Este evento recibe como parmetro un objeto

de tipo Canvas

@Override

protected void onDraw(Canvas canvas)

{

//Obtenemos las dimensiones del control

int alto = getMeasuredHeight();

int ancho = getMeasuredWidth();

//Colores Disponibles

Paint pRelleno = new Paint();

pRelleno.setStyle(Style.FILL);

pRelleno.setColor(Color.RED);

canvas.drawRect(0, 0, ancho/4, alto/2, pRelleno);

pRelleno.setColor(Color.GREEN);

canvas.drawRect(ancho/4, 0, 2*(ancho/4), alto/2, pRelleno);

pRelleno.setColor(Color.BLUE);

canvas.drawRect(2*(ancho/4), 0, 3*(ancho/4), alto/2, pRelleno);

pRelleno.setColor(Color.YELLOW);

canvas.drawRect(3*(ancho/4), 0, 4*(ancho/4), alto/2, pRelleno);

//Color Seleccionado

pRelleno.setColor(colorSeleccionado);

canvas.drawRect(0, alto/2, ancho, alto, pRelleno);

//Marco del control

Paint pBorde = new Paint();

pBorde.setStyle(Style.STROKE);

pBorde.setColor(Color.WHITE);

canvas.drawRect(0, 0, ancho-1, alto/2, pBorde);

7/25/2019 Mca006.pdf

61/119

Manual Mca006


canvas.drawRect(0, 0, ancho-1, alto-1, pBorde);

}

El siguiente paso consiste en definir su funcionalidad implementando los eventos a los que debe responder el

control, tanto eventos internos como externos. En este ejemplo slo se van a tener un evento de cada tipo. En

primer lugar se define un evento interno (evento que slo se captura de forma interna al control, sin exponerlo al

usuario) para responder a las pulsaciones del usuario sobre los colores de la zona superior, y se utiliza para

actualizar el color de la zona inferior con el color seleccionado. Para ello se implementa el evento onTouch(),

disparado cada vez que el usuario toca la pantalla sobre el control. Simplemente se consultar las coordenadas

donde ha pulsado el usuario (mediante los mtodos getX() ygetY()), y dependiendo del lugar pulsado se

determinar el color sobre el que se ha seleccionado y se actualizar el valor del atributo colorSeleccionado.

Finalmente, se llama al mtodo invalidate() para refrescar la interfaz del control, reflejando as el cambio en el

color seleccionado, si se ha producido.

@Override

public boolean onTouchEvent(MotionEvent event)

{

//Si se ha pulsado en la zona superior

if (event.getY() > 0 && event.getY() < (getMeasuredHeight()/2))

{

//Si se ha pulsado dentro de los lmites del control

if (event.getX() > 0 && event.getX() < getMeasuredWidth())

{

//Determinamos el color seleccionado segn el punto pulsado

if(event.getX() > (getMeasuredWidth()/4)*3)

colorSeleccionado = Color.YELLOW;

else if(event.getX() > (getMeasuredWidth()/4)*2)

colorSeleccionado = Color.BLUE;

else if(event.getX() > (getMeasuredWidth()/4)*1)

colorSeleccionado = Color.GREEN;

else

colorSeleccionado = Color.RED;

//Refrescamos el control

this.invalidate();

7/25/2019 Mca006.pdf

62/119

Manual Mca006


}

}

return super.onTouchEvent(event);

}

En segundo lugar se crea un evento externo personalizado, disparado cuando el usuario pulsa sobre la zona inferior

del control, como una forma de aceptar definitivamente el color seleccionado. Se llama a este

evento onSelectedColor():package com.gala.android.controlpers3;

public interface OnColorSelectedListener

{

void onColorSelected(int color);

}

Posteriormente, se definiremos un objeto de este tipo como atributo del control y se escribe un nuevo mtodo

permitiendo a las aplicaciones suscribirse al evento:

public class SelectorColor extends View

{

private OnColorSelectedListener listener;

//...

public void setOnColorSelectedListener(OnColorSelectedListener l)

{

listener = l;

}

}

Slo queda disparar el evento en el momento preciso. Esto tambin se realiza dentro del evento onTouch(), cuando

se detecta que el usuario ha pulsado en la zona inferior del:

@Override

public boolean onTouchEvent(MotionEvent event)

{

7/25/2019 Mca006.pdf

63/119

Manual Mca006


//Si se ha pulsado en la zona superior

if (event.getY() > 0 && event.getY() < (getMeasuredHeight()/2))

{

//...

}

//Si se ha pulsado en la zona inferior

else if (event.getY() > (getMeasuredHeight()/2) &&

event.getY() < getMeasuredHeight())

{

//Lanzamos el evento externo de seleccin de color

listener.onColorSelected(colorSeleccionado);

}

return super.onTouchEvent(event);

}

Ahora, la 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:

public class ControlPersonalizado extends Activity

{

private SelectorColor ctlColor;

@Override

public void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

ctlColor = (SelectorColor)findViewById(R.id.scColor);

ctlColor.setOnColorSelectedListener(new OnColorSelectedListener()

7/25/2019 Mca006.pdf

64/119

Manual Mca006


{

@Override

public void onColorSelected(int color)

{

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

//...

}

});

}

}

LECCION 10 Pestaas (Tabs)

Dado el poco espacio con el que se cuenta en las pantallas de muchos dispositivos, o simplemente por cuestiones

de organizacin, a veces es necesario/interesante dividir los 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 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 bastar simplemente con definir la interfaz en XML, sino que

tambin se necesita completar el conjunto con algunas lneas de cdigo.

En Android, el elemento principal de un conjunto de pestaas ser el control TabHost. ste va a ser el contenedor

principal del conjunto de pestaas y deber tener obligatoriamente como id el valor @android:id/tabhost. Dentro

de ste se va a incluir un LinearLayout que 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 se aadir un FrameLayout con el id obligatorio

@android:id/tabcontent. Por ltimo, dentro del FrameLayout se incluira el contenido de cada pestaa,

normalmente cada uno dentro de su propio layout principal y con un id nico que permita posteriormente hacer

referencia a ellos fcilmente. A continuacin se representa de forma grfica toda la estructura descrita.

7/25/2019 Mca006.pdf

65/119

Manual Mca006


El archivo XML con esta estructura sera:

7/25/2019 Mca006.pdf

66/119

Manual Mca006


android:id="@android:id/tabs" />

7/25/2019 Mca006.pdf

67/119

Manual Mca006


Se necesita asociar de alguna forma cada pestaa con su contenido, de forma que el el control se comporte

correctamente cuando se cambia de pestaa. Y esto se realiza mediante cdigo en la actividad principal.

Se empieza obteniendo una referencia al control principal TabHost y preparndolo para su configuracin llamando asu mtodo setup(). Tras esto, se crea un objeto de tipoTabSpec para cada una de las pestaas a aadir mediante

el mtodo newTabSpec(), al que se pasara como parmetro una etiqueta identificativa de la pestaa (ejemplo

mitab1, mitab2, ). Adems, tambin se asignar el layout de contenido correspondiente a la pestaa

llamando al mtodo setContent(), y se indicar el texto y el icono a mostrar en la pestaa mediante el

mtodosetIndicator(texto, icono).

Resources res = getResources();

TabHost tabs=(TabHost)findViewById(android.R.id.tabhost);

tabs.setup();

TabHost.TabSpec spec=tabs.newTabSpec("mitab1");

spec.setContent(R.id.tab1);

spec.setIndicator("",

res.getDrawable(android.R.drawable.ic_btn_speak_now));

tabs.addTab(spec);

spec=tabs.newTabSpec("mitab2");


spec.setIndicator("TAB2",

res.getDrawable(android.R.drawable.ic_dialog_map));

tabs.addTab(spec);

tabs.setCurrentTab(0);

Si se ejecutamos ahora la aplicacin se tendr algo como lo que muestra la siguiente imagen, donde se puede

cambiar de pestaa y comprobar cmo se muestra correctamente el contenido de la misma.

En Android 2.x

7/25/2019 Mca006.pdf

68/119

Manual Mca006


Y en Android 4.x

En Android 4, el comportamiento por defecto del control TabHost es mostrar slo el texto, o solo el icono, pero no

ambos. Si se eliminamos el texto de la primera pestaa y se vuelve a ejecutar se ver como el icono s aparece.TabHost.TabSpec spec=tabs.newTabSpec("mitab1");


spec.setIndicator("",

res.getDrawable(android.R.drawable.ic_btn_speak_now));

tabs.addTab(spec);

Con esta pequea modificacin la aplicacin se vera as en Android 4.x

En cuanto a los eventos disponibles del control TabHost, aunque no suele ser necesario capturarlos, se ve a modo

de ejemplo el ms interesante de ellos, OnTabChanged, que se dispara cada vez que se cambia de pestaa e

informa de la nueva pestaa visualizada. Este evento se puede implementar y asignar mediante el mtodo

setOnTabChangedListener() de la siguiente forma:tabs.setOnTabChangedListener(new OnTabChangeListener() {

7/25/2019 Mca006.pdf

69/119

Manual Mca006


@Override

public void onTabChanged(String tabId) {

Log.i("AndroidTabsDemo", "Pulsada pestaa: " + tabId);

}

});

En el mtodo onTabChanged() se recibe como parmetro la etiqueta identificativa de la pestaa (no su ID),

asignada cuando se creo el objeto TabSpec correspondiente. Para este ejemplo, lo nico codificado 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 se recibir el mensaje de log: Pulsada

pestaa: mitab2.

LECCION 11 Fragments

Cuando empezaron a aparecer dispositivos de gran tamao tipo tablet, el equipo de Android tuvo que solucionar elproblema de la adaptacin de la interfaz grfica de las aplicaciones a ese nuevo tipo de pantallas. Una interfaz deusuario diseada para un telfono mvil no se adaptaba fcilmente a una pantalla 4 o 5 pulgadas mayor. Lasolucin a esto vino en forma de un nuevo tipo de componente llamado Fragment.

Un fragment no puede considerarse ni un control ni un contenedor, aunque se parecera ms a lo segundo. Unfragment podra definirse como una porcin de la interfaz de usuario que puede aadirse o eliminarse de unainterfaz de forma independiente al resto de elementos de la actividad, y que por supuesto puede reutilizarse enotras actividades. Esto, aunque en principio puede parecer algo trivial, va a permitir poder dividir la interfaz envarias porciones para poder disear diversas configuraciones de pantalla, dependiendo de su tamao y orientacin,sin tener que duplicar cdigo en ningn momento, sino tan slo utilizando o no los distintos fragmentos para cadauna de las posibles configuraciones.

Comp ejemplo se tiene una aplicacin de correo electrnico, en la que por un lado se debe mostrar la lista de

correos disponibles, con sus campos clsicos De y Asunto, y por otro lado se debe mostrar el contenido completodel correo seleccionado. En un telfono mvil lo habitual ser tener una primera actividad que muestre el listado decorreos, y cuando el usuario seleccione uno de ellos navegar a una nueva actividad que muestre el contenido dedicho correo. Sin embargo, en un tablet puede existir espacio suficiente para tener ambas partes de la interfaz enla misma pantalla, por ejemplo en un tablet en posicin horizontal se podra tener una columna a la izquierda conel listado de correos y dedicar la zona derecha a mostrar el detalle del correo seleccionado, todo ello sin tener quecambiar de actividad.

Antes de existir los fragments se podramos haber hecho esto implementando diferentes actividades con diferenteslayouts para cada configuracin de pantalla, pero esto obligara a duplicar gran parte del cdigo en cada actividad.Tras la aparicin de los fragments, se colocael l istado de correos en un fragment y la vista de detalle en otro, cadauno de ellos acompaado de su lgica de negocio asociada, y tan slo queda definir varios layouts para cadaconfiguracin de pantalla incluyendo [o no] cada uno de estos fragments.

A modo de aplicacin de ejemplo se va a simular la aplicacin de correo, adaptndola a tres configuracionesdistintas: pantalla normal, pantalla grande horizontal y pantalla grande vertical. Para el primer caso se colocara ellistado de correos en una actividad y el detalle en otra, mientras que para el segundo y el tercero ambos elementosestarn en la misma actividad, a derecha/izquierda para el caso horizontal, y arriba/abajo en el caso vertical.

Se definen por lo tanto dos fragments: uno para el listado y otro para la vista de detalles. Ambos sern muysencillos. Al igual que una actividad, cada fragment se compondr de un archivo de layout XML para la interfaz(colocado en alguna carpeta /res/layout) y una clase java para la lgica asociada.

7/25/2019 Mca006.pdf

70/119

Manual Mca006


El primero de los fragment a definir contendr tan slo un control ListView, para el que se define un adaptadorpersonalizado para mostrar dos campos por fila (De y Asunto). El layout XML (se llamara fragment_listado.xml)quedara por tanto de la siguiente forma:

Como hemos dicho, todo fragment debe tener asociada, adems del layout, su propia clase java, que en este casodebe extender de la clase Fragment. Los fragment aparecieron con la versin 3 de Android, por lo que en pri

mca006.pdf

Documents