Tema 4 3_2_interfaces_de_usuario
0 recomendaciones411 vistas
Este documento presenta un temario sobre interfaces de usuario en Android. Explica conceptos clave como Views, ViewGroups y layouts, y cómo se usan para crear interfaces mediante XML y código Java. También introduce varios widgets comunes como TextView, Button, ImageView y layouts como LinearLayout y RelativeLayout. El objetivo es enseñar a diseñar interfaces en Android aprovechando estas herramientas.
![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](https://image.slidesharecdn.com/tema432interfacesdeusuario-120417024953-phpapp02/85/Tema-4-3_2_interfaces_de_usuario-2-320.jpg)
![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](https://image.slidesharecdn.com/tema432interfacesdeusuario-120417024953-phpapp02/85/Tema-4-3_2_interfaces_de_usuario-4-320.jpg)
Tema 4 3_2_interfaces_de_usuario
- 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