Tema 4.3.2 Interfaces de Usuario. Layouts.

1. Análisis y Diseño
de Software
Interfaces de Usuario
Layouts y Vistas
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. Leyenda
Teoría
Ejercicio práctico en el ordenador
Ampliación de conocimientos
Lectura / Vídeo / Podcast
Práctica libre / Experimentación
Interfaces de Usuario 3

4. Bibliografía
● Libro de texto:
– [Gar10] Learning Android, Marko Gargenta,
O'Reilly, 2010. Disponible en
http://ofps.oreilly.com/titles/9781449390501/
– Capítulo 6
– 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

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/
Interfaces de Usuario 5

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

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: clase
base para los layout (lineal,
tabular, etc.)
Interfaces de Usuario 7

8. La clase View
● La clase View es el componente básico para construir Uis
● UnaVista 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, …)
● Laclase 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.
Interfaces de Usuario 8

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
• FILL_PARENT (tan grande como el padre menos padding)
• WRAP_CONTENT (tan grande como el contenido más
padding)
Interfaces de Usuario 9

10. Atributos comunes de View
y ViewGroup
orientation Orientación. Valores: horizontal, vertical
layout_width Ancho. Valor posible: exacto en dip (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) Interfaces de Usuario 10

11. Nota: gravity vs
layout_gravity
Interfaces de Usuario 11

12. Usando objetos View
● Dar valores a propiedades (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
Interfaces de Usuario 12

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

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

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

16. Algunos Layouts (ViewGroup)
http://developer.android.com/resources/tutorials/views/index.html
FrameLayout
Interfaces de Usuario 16

17. Algunas vistas (widgets)
Interfaces de Usuario 17

18. TextView
Interfaces de Usuario 18

19. EditText
android:inputType=”phone”
http://www.droiddraw.org/widgetguide.html
Interfaces de Usuario 19

20. AnalogClock, DigitalClock
Interfaces de Usuario 20

21. Button
Interfaces de Usuario 21

22. Spinner
http://developer.android.com/resources/tutorials/views/hello-spinner.html
Interfaces de Usuario 22

23. RadioGroup/RadioButton
Interfaces de Usuario 23

24. DatePicker, TimePicker
Interfaces de Usuario 24

25. Imágenes
Interfaces de Usuario 25

26. ProgressBar
Interfaces de Usuario 26

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

28. 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)
Interfaces de Usuario 28

29. Resumen
● En este tema hemos revisado los
principios de los layouts en Android
● Hemos conocido la diferencia entre View y
ViewGroup, y los principales atributos
● Hemos visto algunos widgets disponibles
● Hemos revisado la relación entre XML y
Java en las interfaces
Interfaces de Usuario 29

30. ¿Preguntas?
Interfaces de Usuario 30