1. Análisis y Diseño
de Software
Departamento de Ingeniería de Sistemas Telemáticos
http://moodle.dit.upm.es
Interfaces de Usuario
Layouts y Vistas
Carlos A. Iglesias <cif@gsi.dit.upm.es>
1.1 24/04/13

2. Actividades 2
Temario
● 4.1 Introducción a Android
● 4.2 Introducción Desarrollo con Android
● 4.3 Ejemplo Desarrollo y Depuración
● 4.4 Actividades
● 4.5 Interfaces de Usuario
● 4.6 Intenciones
● 4.7 Acceso a Datos
● 4.8 Preferencias
● 4.9 Hebras e internacionalización

3. Interfaces de Usuario 3
Teoría
Ejercicio práctico en el ordenador
Ampliación de conocimientos
Lectura / Vídeo / Podcast
Práctica libre / Experimentación
Leyenda

4. Interfaces de Usuario 4
Bibliografía
● Android Developers
– http://developer.android.com/guide/topics/fundamentals.html
– http://developer.android.com/guide/topics/ui/index.html

5. Interfaces de Usuario 5
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
– Notas de Victor Matos, basadas en The Busy Coder's Guide to Android Development, M. L.
Murphy, CommonsWare, 2009.
● Vistas
– http://developer.android.com/reference/android/view/View.html
●Ejemplos
– http://apcmag.com/building-a-simple-android-app.htm
– http://www.maestrosdelweb.com/editorial/curso-android-construir-lector-de-feeds/

6. Interfaces de Usuario 6
Objetivos
● Aprender a programar interfaces
● Entender cómo crear interfaces en Android
● Entender y saber usar Vistas (View) y
Disposiciones (Layout)
● Aprender a gestionar eventos en Botones
● Aprender a crear menús

7. Interfaces de Usuario 7
La interfaz
●En Android, la interfaz es un
árbol de objetos de dos
tipos:
– Objetos View: componentes
“widget” (campo de texto,
botón, imagen, …)
– Objetos ViewGroup:
componentes “contenedor”,
clase base para los layout
(lineal, tabular, etc.)

8. Interfaces de Usuario 8
La clase View
●La clase View es el componente básico para construir UIs
●Una Vista ocupa un área rectangular de la pantalla y es
responsable de dibujarse y gestionar eventos
●View es la clase base de los widgets interactivos (botones,
campos de texto, …)
●La clase ViewGroup es una subclase de View que es la
base para los layouts, que son contenedores invisibles que
contienen otros objetos View (o ViewGroup) y definen sus
propiedades.

9. Interfaces de Usuario 9
Visualización actividad
● Cuando una actividad llama a setContentView, le pasa
el nodo raíz del árbol
● Android lo recibe, y pinta este árbol
– Pide a cada ViewGroup que “se pinte”
– Cada hijo calcula su medida (ancho/alto) y posición. El nodo
padre puede imponer medidas
– La medida puede ser
• Un número exacto
• MATCH_PARENT (tan grande como el padre menos padding)
• WRAP_CONTENT (tan grande como el contenido más padding)

10. Interfaces de Usuario 10
Programar interfaces
● Podemos hacerlo:
– De forma declarativa: en XML (layout.xml),
nos proporciona layouts y componentes
estáticos
– De forma programática: en Java, podemos
crear la interfaz de forma dinámica
● Es más sencillo, más reutilizable y más
sencillo de mantener el enfoque declarativo

11. Interfaces de Usuario 11
Programático vs Declarativo
strings.xml
layout.xml

12. Interfaces de Usuario 12
Relación XML y Java
● En XML declaramos un id
– android:id="@+id/imageViewEtsit"
● En Java accedemos a un widget con
findViewById
– ImageView foto = (ImageView) findViewById(R.id.imageViewEtsit);
● Como vimos, la clase R se genera a partir
del layout XML, y en la la clase Java de la
actividad decíamos qué layout se usaba con
setContentView(R.layout.main)

13. Interfaces de Usuario 13
Declaración layout XML
res/layout/miFichero.xml

14. Interfaces de Usuario 14
¿Qué es un layout XML?
● Es un fichero XML que describe el árbol de
componentes (View y ViewGroup) que
representan una pantalla
● Las propiedades de los elementos XML se
llaman propiedades, y describen su
aspecto o comportamiento. Ej.
android:text=”hola”
● Los atributos también pueden fijarse con
métodos en Java (ej. setText).

15. Interfaces de Usuario 15
Atributos comunes de View
y ViewGroup
orientation Orientación. Valores: horizontal, vertical
layout_width Ancho. Valor posible: exacto en dp (device independent pixels), fill_parent,
wrap_content
layout_height Alto. Valor posible: exacto, fill_parent, wrap_content
layout_marginX Espacio alrededor de la vista X = Top, Bottom, Left, Right, ej.
layout_marginTop)
layout_gravity Cómo las vistas hijas se posicionan. Valores: top, bottom, left, right,
center_vertical, fill_vertical, center_horizontal, fill_horizontal, center, fill,
clip_vertical, clip_horizontal, start, end
layout_weight Proporción del espacio disponible usado para la vista (valores: 1, 2, 3,..). Ej. 3
Vistas con peso 1, 1, 2, ocuparían 1/5, 1/5, 2/5 del total
layout_x Coordenada x de la vista
layout_y Coordenada y de la vista
gravity Cómo se posiciona el contenido del widget respecto del mismo (mismos
valores que layout_gravity)
id Identificador del widget. Convenio @+id/nombre (+ → Crear id en R)
text Texto del widget. Convenio: @string/nombre (referencia values/strings.xml)

16. Interfaces de Usuario 16
Medidas
● Pixels (px): pixels de la pantalla
● Tamaño físico de la pantalla: pulgadas (in), milímetros
(mm) o puntos (pt), 1/72 de una pulgada
● Density Independent Pixels (dp): unidad abstracta
basada en la densidad física de la pantalla, relativo a
pantalla de 160 dpi.
● Scale Independent Pixel (sp): como dp pero escalado a
las preferencias de letras (font) del usuario,
recomendado para tamaños de letra
● Conclusión: para que sea adaptable a múltiples
dispositivos, intentar usar siempre dp/sp.

17. Interfaces de Usuario 17
gravity vs layout_gravity

18. Interfaces de Usuario 18
Usando objetos View
● Dar valores a atributos (p.ej. Al texto de un TextView,
o...). Las propiedades con valores conocidos durante el
desarrollo se pueden fijar en ficheros XML de layout
● Fijar el foco. Pasar el foco a una vista con
requestFocus()
● Fijar 'listeners'. Registrar listeners que serán
notificados de cambios. P. ej. un botón expone un
listener para notificar a los clientes cuándo ha sido
pulsado.
● Fijar visibilidad. Puedes ocultar/descubrir vistas con
setVisibility(int)
http://developer.android.com/reference/android/view/View.html

19. Interfaces de Usuario 19
Layouts predefinidos
● FrameLayout: pinta todas las vistas en la
esquina superior izda
● LinearLayout: pinta las vistas de izda a
derecha (o arriba-abajo, según el atributo
orientation)
● TableLayout: pinta las vistas en filas y
columnas
● RelativeLayout: permite indicar posición
relativa al la vista padre o a otra vista

20. Interfaces de Usuario 20
Algunos Layouts (ViewGroup)
http://developer.android.com/resources/tutorials/views/index.htm
l
FrameLayout
ScrollView

21. Interfaces de Usuario 21
LinearLayout
http://developer.android.com/guide/topics/ui/layout/linear.html

22. Interfaces de Usuario 22
RelativeLayout
http://developer.android.com/guide/topics/ui/layout/relative.html

23. Interfaces de Usuario 23
ListView
● Android usa Adaptadores (Adapter) para
pasar datos a las listas (ListView,Spinner)
● La interfaz Adapter está implementada por
BaseAdapter y tiene dos subclases
principales
– ArrayAdapter: datos en un array o un List
– SimpleCursorAdapter: datos en base de
datos o ContentProvider

24. Intenciones y Servicios 24
Crear Lista Opciones
ListView para ver una lista
@android:id/list →
identificador de Android
para listas
@android:id/empty → id si
la lista está vacía

25. Intenciones y Servicios 25
Crear Lista opciones
ListActivity en vez
de Activity
Fuente de datos
Adaptador de
lista,
simple_list_item_1
está predefinido,
puedo definir un
layout
R.layout.row p.ej.
Listener de
la selección

26. Intenciones y Servicios 26
¡Lanzamos!

27. Interfaces de Usuario 27
Algunas vistas (widgets)

28. Interfaces de Usuario 28
TextView
Métodos getText() / setText()

29. Interfaces de Usuario 29
EditText
http://developer.android.com/guide/topics/ui/controls/text.html
Valores comunes para inputType:
“textEmailAddress”, “textUri”,
“number”, “phone”,
“textCapSentences”,
“textCapWords”, “textAutoCorrect”,
“textPassword”, “textMultiline”
Métodos getText() / setText()

30. Interfaces de Usuario 30
AnalogClock, DigitalClock

31. Interfaces de Usuario 31
Button

32. Interfaces de Usuario 32
Spinner
http://developer.android.com/resources/tutorials/views/hello-spinner.html
http://developer.android.com/guide/topics/ui/controls/spinner.html
Usamos un adaptador tipo
Array

33. Interfaces de Usuario 33
RadioGroup/RadioButton

34. Interfaces de Usuario 34
ToggleButton
http://developer.android.com/guide/topics/ui/controls/togglebutton.html

35. Interfaces de Usuario 35
DatePickerDialog,
TimePickerDialog
Disponible en Android 3.0
http://developer.android.com/guide/topics/ui/controls/pickers.html

36. Interfaces de Usuario 36
Imágenes

37. Interfaces de Usuario 37
ProgressBar

38. Interfaces de Usuario 38
Muchas más
● Consulta en:
●http://developer.android.com/reference/android/widget/package-summary.html

39. Interfaces de Usuario 39
Botón con más detalle
● Button es una subclase de TextView
● Un botón tiene texto, un icono o ambos y
comunica qué acción se produce al pulsarlo
●Tenemos botones de texto (Button), con
imagen (ImageButton)
http://developer.android.com/guide/topics/ui/controls/button.html

40. Interfaces de Usuario 40
Respondiendo a eventos
● ¿Cómo asignamos la conducta al botón?
– En el xml del layout android:onClick=”método”
(visto en SobreTeleco)
– En Java, implementando la interfaz
onClickListener
• De forma anónima o no

41. Interfaces de Usuario 41
Implementación anónima de
la interfaz

42. Interfaces de Usuario 42
Java – implementación de
interfaz

43. Interfaces de Usuario 43
¿Qué opción es mejor?
● Definir android:onClick
– Mayor acoplamiento entre parte Java y XML
– Bueno si hay personas diferentes para hacer la interfaz
(XML) y la lógica (Java)
● Definir la interfaz o hacerla anónima
– Al implementar onClick(), un único método onClick() para
toda la actividad – si queremos distinguir, deberíamos mirar
el id (v.getId() si queremos distinguir según dónde hayas
pinchado). Bueno si queremos la misma conducta pinches
donde pinches.
– Implementarla anónima, generalmente la mejor opción,
permite separar conducta por elemento

44. Interfaces de Usuario 44
Widgets básicos:
ImageView / ImageButton
●Subclases de TextView y Button,
respectivamente
● Permiten incluir imágenes (sin nada o con
botón)
● La imagen debe ser un recurso (en
res/drawable)
●se define en los atributos android:src
(foreground) y/o android:background
http://developer.android.com/reference/android/widget/ImageView.html

45. Interfaces de Usuario 45
Toast
● Proporciona un mensaje instantáneo
● Podemos personalizar el layout en xml
http://developer.android.com/guide/topics/ui/notifiers/toasts.html

46. Interfaces de Usuario 46
Menús
● Android tiene varios tipos de menús:
– Menú de opciones y barra de acciones, que
aparece al pulsar menú
– Menú contextual que aparece cuando el
usuario pulsa un rato en un elemento
– Menú desplegable modal
http://developer.android.com/guide/topics/ui/menus.html

47. Interfaces de Usuario 47
Menú de opciones
● Tenemos que crear un recurso menu en
res/menu en XML (se podría crear en Java)
● La actividad debe implementar:
– onCreateOptionsMenu()
• para leer, “insuflar” el fichero XML
– onOptionsItemsSelected()
• Para procesar qué botón se ha pulsado y hacer la
acción correspondiente

48. Interfaces de Usuario 48
Ejemplo menú
res/menu/game_menu.xml
Lo muestra en la barra
de acciones si hay
espacio (actionBar)
Podemos agrupar
items en grupos
(group)

49. Interfaces de Usuario 49
Eclipse
● En Eclipse podemos crear recursos con
New->Android XML File

50. Interfaces de Usuario 50
Ejemplo Calculadora
Versión targetSDK <
11 (Android 3.0)

51. Interfaces de Usuario 51
Ejemplo Calculadora
Versión targetSDK >=
11 (Android 3.0)
Añadidos al actionBar
android:showAsAction
="ifRoom"
Sin añadirlos al
actionBar, hay que
pulsar tecla menú

52. Interfaces de Usuario 52
Fragmentos
● Desde la versión Android 3.0 (API 11), se
soportan “fragmentos” para compatibilidad
con tabletas
● El layout se compone de fragmentos
http://developer.android.com/guide/components/fragments.html

53. Interfaces de Usuario 53
SupportLibrary
● Podemos programar 'con las nuevas APIs'
añadiendo un jar (support.jar) para que no
nos afecte durante el desarrollo
http://developer.android.com/tools/extras/support-library.html

54. Interfaces de Usuario 54
Resumen
● En este tema hemos revisado los principios de las
interfaces gráficas (UI) en Android
● Hemos revisado la relación entre XML y Java en las
interfaces
● View y ViewGroup tienen atributos que pueden ser
configurados
● Hemos visto algunos widgets y layouts disponibles
● ListView permite presentar listas a partir de Adaptadores

55. Interfaces de Usuario 55
¿Preguntas?