Análisis y Diseño de Software

Departamento de Ingeniería de Sistemas Telemáticoshttp://moodle.dit.upm.es

Interfaces de UsuarioIntroducción con Ejemplo SobreTeleco

Carlos A. Iglesias <cif@gsi.dit.upm.es>

Interfaces de Usuario 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 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 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 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 6

Interfaces en Android

● “Separation of concerns”– Funcionalidad

(Java)– Disposición (XML)

● Podemos definir diferentes layouts para diferentes dispositivos

Interfaces de Usuario 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 8

UIs: Visión general: Views y Layout

● Vista (View): componente

● Disposición (Layout): contenedor

Interfaces de Usuario 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 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 11

Explorar proyecto Android

CÓDIGO FUENTE

CÓDIGO GENERADO

BIBLIOTECAS

CÓDIGO COMPILADO DEVX, FICHERO APK

RECURSOS

CONFIGURACIÓN

ASSET

Interfaces de Usuario 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 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 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 15

Recursos

http://coding.smashingmagazine.com/2011/06/30/designing-for-android/http://androideity.com/2011/08/04/disenando-para-android/

Interfaces de Usuario 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 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 18

Modificando el layout (main.xml)

Doble click

Interfaces de Usuario 19

Cambiamos la interfaz

Interfaces de Usuario 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 21

Refactorización

● Pasamos el string a res/values/strings.xml

Interfaces de Usuario 22

Añadir botón

Interfaces de Usuario 23

Botón

Llevamos este strings.xml

Interfaces de Usuario 24

Cambiamos el botón

Interfaces de Usuario 25

Y desplegamos

El botón no hace nada en el terminal

Interfaces de Usuario 26

Añadir funcionalidad botón (I)

main.xml

Interfaces de Usuario 27

Añadir funcionalidad botón (II)

Toast es un tipo de notificación en pantalla

Interfaces de Usuario 28

Añadir funcionalidad botón (III)

Interfaces de Usuario 29

Refactorizar String

Interfaces de Usuario 30

¡Probar!

Interfaces de Usuario 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 32

Añadiendo una imagen

Interfaces de Usuario 33

Añadiendo una imagen

Interfaces de Usuario 34

Modificando tamaño

Interfaces de Usuario 35

● 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

ImageView

Interfaces de Usuario 36

Cambiando la imagen (I)

Interfaces de Usuario 37

Cambiando la imagen (II)

Interfaces de Usuario 38

¡Lo probamos!

Interfaces de Usuario 39

Recapitulando (I)

● Hemos hecho una aplicación con 1 Actividad

● Las actividades 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 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 41

Recapitulando (II)

● En el layout XML hemos definido – un layout (LinearLayout)

que contiene– Vistas (TextView,

ImageView, Button)

● Los textos los ponemos en res/values/strings.xml

Interfaces de Usuario 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 43

Hierarchy Viewer

● Pincha en Windows en la aplicación que quieres depurar, y ya lo ves :)

Interfaces de Usuario 44

Perspectiva Hierarchy Viewer

Recuerda que sólo funciona con el emulador lanzado

Interfaces de Usuario 45

Ej. FrameLayout

Interfaces de Usuario 46

Ej. TextView

Interfaces de Usuario 47

Ej. TextView

Interfaces de Usuario 48

Los tres puntos (curiosidad)

● Los tres 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 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 50

¿Preguntas?