Desarrollo de una aplicación con Android

1. Análisis y Diseño
de Software
Interfaces de Usuario
Introducción con Ejemplo SobreTeleco
Carlos A. Iglesias <cif@gsi.dit.upm.es>
Departamento de Ingeniería de Sistemas Telemáticos
http://moodle.dit.upm.es

2. Temario
● 4.1 Introducción a Android [Gar10, cap1-2 ]
● 4.2 Desarrollo con Android [Gar10, cap3-5]
● 4.3 Interfaces de Usuario [Gar10, cap6]
– 4.3.1 Ejemplo SobreTeleco
– 4.3.2 Layouts y Views
– 4.3.3 Widgets y Trazas. Interfaz del proyecto Yamba
– 4.3.4 Hebras e internacionalización. Interfaz Yamba.
● 4.4 Intenciones y Servicios [Gar10, cap7-8]
● 4.5 Acceso a Datos [Gar10, cap9]
Interfaces de Usuario 2

3. Bibliografía
● Libro de texto:
– [Gar10] Learning Android, Marko Gargenta,
O'Reilly, 2010. Disponible en
http://ofps.oreilly.com/titles/9781449390501/
– Capítulos 4-5
– http://www.youtube.com/watch?v=SW82-YOOMIs
● Android Developers
– http://developer.android.com/guide/topics/fundamentals.html
– http://developer.android.com/guide/topics/ui/index.html
Interfaces de Usuario 3

4. Bibliografía complementaria
●
Tutorial Android UI
– http://mobile.tutsplus.com/series/android-user-interface-design/
– http://developer.android.com/resources/tutorials/views/index.html
– http://www.droiddraw.org/widgetguide.html
● Ejemplos
– http://apcmag.com/building-a-simple-android-app.htm
– http://www.maestrosdelweb.com/editorial/curso-android-construir-lector-de-feeds/
Interfaces de Usuario 4

5. Objetivos
● Entender los conceptos básicos para desarrollar una
interfaz de usuario en Android
● Entender la estructura de un proyecto Android
● Entender qué son los recursos, R, las disposiciones
(layouts) y las vistas (view)
● Saber crear una actividad y asociarle un layout
● Asociar un gestor de eventos a un objeto View en el layout
● Saber inspeccionar la jerarquía de Vistas en eclipse
● Desarrollar una primera interfaz
Interfaces de Usuario 5

6. Interfaces en Android
● “Separation of
concerns”
– Funcionalidad
(Java)
– Disposición (XML)
● Podemos definir
diferentes layouts
para diferentes
dispositivos
Interfaces de Usuario 6

7. UI en Android
● En Android podemos definir de dos formas
las interfaces:
– Declarativa:
• En XML
• Parecido a crear una página web en HTML
– Programática:
• En Java
• Parecido a interfaces en Java (Swing / AWT)
Interfaces de Usuario 7

8. UIs: Visión general:
Views y Layout
● Vista (View): componente
● Disposición (Layout): contenedor
Interfaces de Usuario 8

9. El lenguaje XML (eXtensible
Markup Language)
● Repasar FTEL
– http://www.gsi.dit.upm.es/~gfer/ftel/Procesadores.pdf
● XML está diseñado para la representación
de datos a efectos de almacenamiento y
comunicación <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE asignaturas2010 SYSTEM "asignaturas.dtd">
<asignaturas2010>
<asignatura codigo="95000024" acronimo="ADSW">
<nombre>Análisis y Diseño del Software</nombre>
<creditos>4.5</creditos>
<semestre S="2" />
<tipo T="obligatoria" />
<guia>
<url href="http//www.lab.dit.upm.es/adsw" />
</guia>
</asignatura>
<!--otras asignaturas-->
</asignaturas2010>
Interfaces de Usuario 9

10. Ejercicio: SobreTeleco
● Vamos a seguir el ejemplo un poco
modificado para la asignatura
– http://apcmag.com/building-a-simple-android-app.htm
● Pasos:
– Crear un proyecto Android en Eclipse:
SobreTeleco
Interfaces de Usuario 10

11. Explorar proyecto Android
CÓDIGO FUENTE
CÓDIGO GENERADO
BIBLIOTECAS
ASSET
CÓDIGO COMPILADO DEVX, FICHERO APK
RECURSOS
CONFIGURACIÓN
Interfaces de Usuario 11

12. Ejercicio
● Explora la estructura del proyecto
HolaMundo que hicimos en el capítulo
anterior.
– ¿Qué hay en bin?
– Pincha en main.xml, y selecciona la pestaña
graphicalLayout ¿qué ves?
Interfaces de Usuario 12

13. Explorando un proyecto...
● source: fuentes java del proyecto
● gen:ficheros generados del proyecto. Android
genera R.java que 'mapea' los recursos UI XML a
Java
● library: framework Android
● assets:
ficheros de cualquier formato, que
podemos tratar como InputStream (veremos)
● res:recursos, organizados en una estructura fija en
imágenes, layout y texto. Se referenciarán con R:
R.layout (veremos)
Interfaces de Usuario 13

14. Recursos
● Como hay gran variedad de resoluciones
y tamaños de pantallas (teléfono, tableta,
TV), podemos ofrecer gráficos alternativos
con diferente resolución / tamaño.
● Ver
http://developer.android.com/guide/topics/resources/providing-resources.html
● Ej. Recurso por defecto
Recurso alta densidad
(high dpi, dots per inch,
aprox. 240 dpi)
Interfaces de Usuario 14

15. Recursos
http://coding.smashingmagazine.com/2011/06/30/designing-for-android/
http://androideity.com/2011/08/04/disenando-para-android/
Interfaces de Usuario 15

16. Crear una actividad
Fija como contenido el fichero
res/layout/main.xml. Se genera una
referencia en R este fichero:
R.layout.main
Interfaces de Usuario 16

17. Referencias a imágenes
R.drawable.ic_launcher
R.layout.main
R.values.strings
Se selecciona la
imagen según la
resolución del
dispositivo
Interfaces de Usuario 17

18. Modificando el layout
(main.xml)
Doble click
Interfaces de Usuario 18

19. Cambiamos la interfaz
Interfaces de Usuario 19

20. Refactorización
● Técnica de software que consiste en
modificar el código para que tenga “más
calidad”
● Ej. extraer una interfaz de una clase pasar
unas líneas de código a método privado,
renombrar una clase o método, …
● Eclipse y muchos IDEs dan soporte a la
refactorización: Menú->Refactor
Interfaces de Usuario 20

21. Refactorización
● Pasamos el string a res/values/strings.xml
Interfaces de Usuario 21

22. Añadir botón
Interfaces de Usuario 22

23. Botón
Llevamos este strings.xml
Interfaces de Usuario 23

24. Cambiamos el botón
Interfaces de Usuario 24

25. Y desplegamos
El botón no hace nada en el terminal
Interfaces de Usuario 25

26. Añadir funcionalidad botón
(I)
main.xml
Interfaces de Usuario 26

27. Añadir funcionalidad botón
(II)
Toast es un tipo de notificación en pantalla
Interfaces de Usuario 27

28. Añadir funcionalidad botón
(III)
Interfaces de Usuario 28

29. Refactorizar String
Interfaces de Usuario 29

30. ¡Probar!
Interfaces de Usuario 30

31. Copiamos imágenes
● Vamos a copiar las imágenes que vamos a
usar (están en moodle en un zip)
● Las copiamos en res/drawable-hdpi
Interfaces de Usuario 31

32. Añadiendo una imagen
Interfaces de Usuario 32

33. Añadiendo una imagen
Interfaces de Usuario 33

34. Modificando tamaño
Interfaces de Usuario 34

35. ImageView
● contentDescription: mensaje sobre qué
representa la imagen, por accesibilidad
● match_parent: tan grande como el padre
● wrap_content: tan grande como para que
quepa el texto
● weight: escalado
● 0dp: el que fije weight
Interfaces de Usuario 35

36. Cambiando la imagen (I)
Interfaces de Usuario 36

37. Cambiando la imagen (II)
Interfaces de Usuario 37

38. ¡Lo probamos!
Interfaces de Usuario 38

39. Recapitulando (I)
● Hemos hecho una aplicación
con 1 Actividad
● Lasactividades las creamos
en Java extendiendo Activity
– Cuando se lance la actividad se
invocará el método onCreate,
que tiene que la vista
(setContentView(R.layout.main)
Interfaces de Usuario 39

40. R y setContentView
●R es una clase Java que se genera
automáticamente a partir de un 'layout' XML
● setContentView(R.layout.main) – usado en
onCreate() - el proceso se llama 'insuflar'
(inflate)
– Lee el XML, crea objetos java por cada vista
(componente: botón, texto, imagen, …)
– Fija atributos de cada objeto por cada propiedad
XML
Interfaces de Usuario 40

41. Recapitulando (II)
● En el layout XML hemos
definido
– un layout (LinearLayout)
que contiene
– Vistas (TextView,
ImageView, Button)
● Lostextos los ponemos
en res/values/strings.xml
Interfaces de Usuario 41

42. Hierarchy Viewer
● Lanza la aplicación (Run-as) en el
emulador (no vale en dispositivo real!)
● Abre la jerarquía
– Window->Open Perspective-> Hierarchy
viewer
Interfaces de Usuario 42

43. Hierarchy Viewer
● Pincha en Windows en la aplicación que
quieres depurar, y ya lo ves :)
Interfaces de Usuario 43

44. Perspectiva Hierarchy Viewer
Recuerda que sólo funciona con el emulador lanzado
Interfaces de Usuario 44

45. Ej. FrameLayout
Interfaces de Usuario 45

46. Ej. TextView
Interfaces de Usuario 46

47. Ej. TextView
Interfaces de Usuario 47

48. Los tres puntos
(curiosidad)
● Lostres puntos indican las prestaciones, miden de izda a
derecha los tiempos del proceso de visualización (render)
– Measure time: calcular alto/ancho
– Layout time: dice a las vistas las posiciones dentro de las medidas
– Draw time: pinta los componentes
● Verde: más rápido que el 50% de las otras vistas
● Amarillo: más lento que el 50% de las otras vistas
● Rojo: el más lento del árbol
Interfaces de Usuario 48

49. Resumen
● Hemos aprendido los principales componentes
de una aplicación: actividades, servicios,
proveedores de contenidos y receptores de
difusión
● Las actividades y servicios tienen un ciclo de vida
● Las
intenciones permiten que el sistema active
componentes
● El
contexto de aplicación permite que los
componentes compartan datos y recursos
Interfaces de Usuario 49

50. ¿Preguntas?
Interfaces de Usuario 50