Análisis y Diseño      de Software      Interfaces de Usuario Introducción con Ejemplo SobreTeleco      Carlos A. Iglesias...
Temario● 4.1   Introducción a Android [Gar10, cap1-2 ]● 4.2   Desarrollo con Android [Gar10, cap3-5]● 4.3   Interfaces de ...
Bibliografía●   Libro de texto:    – [Gar10] Learning Android, Marko Gargenta,        OReilly, 2010. Disponible en        ...
Bibliografía complementaria●    Tutorial Android UI      –   http://mobile.tutsplus.com/series/android-user-interface-desi...
Objetivos● Entender los conceptos básicos para desarrollar una interfaz de usuario en Android● Entender   la estructura de...
Interfaces en Android          ●   “Separation of              concerns”               –   Funcionalidad                  ...
UI en Android●    En Android podemos definir de dos formas    las interfaces:    –   Declarativa:         •   En XML      ...
UIs: Visión general:           Views y Layout●   Vista (View): componente●   Disposición (Layout): contenedor             ...
El lenguaje XML (eXtensible         Markup Language)●   Repasar FTEL     –   http://www.gsi.dit.upm.es/~gfer/ftel/Procesad...
Ejercicio: SobreTeleco●   Vamos a seguir el ejemplo un poco    modificado para la asignatura    –   http://apcmag.com/buil...
Explorar proyecto Android              CÓDIGO FUENTE              CÓDIGO GENERADO              BIBLIOTECAS              AS...
Ejercicio●   Explora la estructura del proyecto    HolaMundo que hicimos en el capítulo    anterior.    –   ¿Qué hay en bi...
Explorando un proyecto...● source:    fuentes java del proyecto● gen:ficheros generados del proyecto. Android genera R.jav...
Recursos● Como hay gran variedad de resoluciones y tamaños de pantallas (teléfono, tableta, TV), podemos ofrecer gráficos ...
Recursoshttp://coding.smashingmagazine.com/2011/06/30/designing-for-android/http://androideity.com/2011/08/04/disenando-pa...
Crear una actividad Fija como contenido el fichero res/layout/main.xml. Se genera una referencia en R este fichero: R.layo...
Referencias a imágenes                   R.drawable.ic_launcher                   R.layout.main                   R.values...
Modificando el layout     (main.xml)                         Doble click           Interfaces de Usuario       18
Cambiamos la interfaz           Interfaces de Usuario   19
Refactorización●   Técnica de software que consiste en    modificar el código para que tenga “más    calidad”●    Ej. extr...
Refactorización●   Pasamos el string a res/values/strings.xml                          Interfaces de Usuario   21
Añadir botón       Interfaces de Usuario   22
BotónLlevamos este strings.xml                               Interfaces de Usuario   23
Cambiamos el botón          Interfaces de Usuario   24
Y desplegamos     El botón no hace nada en el terminal            Interfaces de Usuario           25
Añadir funcionalidad botón             (I)  main.xml              Interfaces de Usuario   26
Añadir funcionalidad botón            (II)    Toast es un tipo de notificación en pantalla                                ...
Añadir funcionalidad botón           (III)              Interfaces de Usuario   28
Refactorizar String          Interfaces de Usuario   29
¡Probar!     Interfaces de Usuario   30
Copiamos imágenes●   Vamos a copiar las imágenes que vamos a    usar (están en moodle en un zip)●   Las copiamos en res/dr...
Añadiendo una imagen           Interfaces de Usuario   32
Añadiendo una imagen           Interfaces de Usuario   33
Modificando tamaño          Interfaces de Usuario   34
ImageView● contentDescription: mensaje sobre qué representa la imagen, por accesibilidad● match_parent: tan grande como el...
Cambiando la imagen (I)            Interfaces de Usuario   36
Cambiando la imagen (II)             Interfaces de Usuario   37
¡Lo probamos!       Interfaces de Usuario   38
Recapitulando (I)● Hemos hecho una aplicación con 1 Actividad● Lasactividades las creamos en Java extendiendo Activity  – ...
R y setContentView●R es una clase Java que se genera automáticamente a partir de un layout XML● setContentView(R.layout.ma...
Recapitulando (II)● En el layout XML hemos definido  –   un layout (LinearLayout)      que contiene  –   Vistas (TextView,...
Hierarchy Viewer●   Lanza la aplicación (Run-as) en el    emulador (no vale en dispositivo real!)●   Abre la jerarquía    ...
Hierarchy Viewer●   Pincha en Windows en la aplicación que    quieres depurar, y ya lo ves :)                         Inte...
Perspectiva Hierarchy Viewer   Recuerda que sólo funciona con el emulador lanzado                                   Interf...
Ej. FrameLayout        Interfaces de Usuario   45
Ej. TextView       Interfaces de Usuario   46
Ej. TextView       Interfaces de Usuario   47
Los tres puntos                    (curiosidad)● Lostres puntos indican las prestaciones, miden de izda a derecha los tiem...
Resumen● Hemos   aprendido los principales componentes de una aplicación: actividades, servicios, proveedores de contenido...
¿Preguntas?      Interfaces de Usuario   50
Upcoming SlideShare
Loading in …5
×

Tema 4 3_1_interfaces_de_usuario

989 views

Published on

Desarrollo de una aplicación con Android

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
989
On SlideShare
0
From Embeds
0
Number of Embeds
222
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tema 4 3_1_interfaces_de_usuario

  1. 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. 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. 3. Bibliografía● Libro de texto: – [Gar10] Learning Android, Marko Gargenta, OReilly, 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. 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. 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. 6. Interfaces en Android ● “Separation of concerns” – Funcionalidad (Java) – Disposición (XML) ● Podemos definir diferentes layouts para diferentes dispositivos Interfaces de Usuario 6
  7. 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. 8. UIs: Visión general: Views y Layout● Vista (View): componente● Disposición (Layout): contenedor Interfaces de Usuario 8
  9. 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. 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. 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. 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. 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. 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.● Verhttp://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. 15. Recursoshttp://coding.smashingmagazine.com/2011/06/30/designing-for-android/http://androideity.com/2011/08/04/disenando-para-android/ Interfaces de Usuario 15
  16. 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. 17. Referencias a imágenes R.drawable.ic_launcher R.layout.main R.values.stringsSe selecciona laimagen según laresolución deldispositivo Interfaces de Usuario 17
  18. 18. Modificando el layout (main.xml) Doble click Interfaces de Usuario 18
  19. 19. Cambiamos la interfaz Interfaces de Usuario 19
  20. 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. 21. Refactorización● Pasamos el string a res/values/strings.xml Interfaces de Usuario 21
  22. 22. Añadir botón Interfaces de Usuario 22
  23. 23. BotónLlevamos este strings.xml Interfaces de Usuario 23
  24. 24. Cambiamos el botón Interfaces de Usuario 24
  25. 25. Y desplegamos El botón no hace nada en el terminal Interfaces de Usuario 25
  26. 26. Añadir funcionalidad botón (I) main.xml Interfaces de Usuario 26
  27. 27. Añadir funcionalidad botón (II) Toast es un tipo de notificación en pantalla Interfaces de Usuario 27
  28. 28. Añadir funcionalidad botón (III) Interfaces de Usuario 28
  29. 29. Refactorizar String Interfaces de Usuario 29
  30. 30. ¡Probar! Interfaces de Usuario 30
  31. 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. 32. Añadiendo una imagen Interfaces de Usuario 32
  33. 33. Añadiendo una imagen Interfaces de Usuario 33
  34. 34. Modificando tamaño Interfaces de Usuario 34
  35. 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. 36. Cambiando la imagen (I) Interfaces de Usuario 36
  37. 37. Cambiando la imagen (II) Interfaces de Usuario 37
  38. 38. ¡Lo probamos! Interfaces de Usuario 38
  39. 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. 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. 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. 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. 43. Hierarchy Viewer● Pincha en Windows en la aplicación que quieres depurar, y ya lo ves :) Interfaces de Usuario 43
  44. 44. Perspectiva Hierarchy Viewer Recuerda que sólo funciona con el emulador lanzado Interfaces de Usuario 44
  45. 45. Ej. FrameLayout Interfaces de Usuario 45
  46. 46. Ej. TextView Interfaces de Usuario 46
  47. 47. Ej. TextView Interfaces de Usuario 47
  48. 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. 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. 50. ¿Preguntas? Interfaces de Usuario 50

×