Tema 4 3_1_interfaces_de_usuario

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

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

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


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/


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 en Android
● “Separation of
concerns”
– Funcionalidad
(Java)
– Disposición (XML)
● Podemos definir
diferentes layouts
para diferentes
dispositivos


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)


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/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>

</asignaturas2010>

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


Explorar proyecto Android

CÓDIGO FUENTE

CÓDIGO GENERADO

BIBLIOTECAS
ASSET
CÓDIGO COMPILADO DEVX, FICHERO APK

RECURSOS

CONFIGURACIÓN

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?


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)

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)


Recursos

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

Crear una actividad

Fija como contenido el fichero
res/layout/main.xml. Se genera una
referencia en R este fichero:
R.layout.main


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


Modificando el layout
(main.xml)

Doble click


Cambiamos la interfaz


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


Refactorización
● Pasamos el string a res/values/strings.xml


Añadir botón


Botón

Llevamos este strings.xml


Cambiamos el botón


Y desplegamos

El botón no hace nada en el terminal


Añadir funcionalidad botón
(I)
main.xml


(II)

Toast es un tipo de notificación en pantalla


(III)


Refactorizar String


¡Probar!


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


Añadiendo una imagen


Modificando tamaño


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

Cambiando la imagen (I)


Cambiando la imagen (II)


¡Lo probamos!


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)


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


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


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


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


Perspectiva Hierarchy Viewer

Recuerda que sólo funciona con el emulador lanzado


Ej. FrameLayout


Ej. TextView


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


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


¿Preguntas?


Tema 4 3_1_interfaces_de_usuario

Más contenido relacionado

La actualidad más candente (6)

Destacado (7)

Similar a Tema 4 3_1_interfaces_de_usuario (20)

Más de Carlos A. Iglesias (20)

Último (20)

Tema 4 3_1_interfaces_de_usuario