Tema 4 3_2_interfaces_de_usuario

970 views

Published on

Tema 4.3.2 Interfaces de Usuario. Layouts.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
970
On SlideShare
0
From Embeds
0
Number of Embeds
142
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tema 4 3_2_interfaces_de_usuario

  1. 1. Análisis y Diseño de SoftwareInterfaces de UsuarioLayouts y Vistas Carlos A. Iglesias <cif@gsi.dit.upm.es> Departamento de Ingeniería de Sistemas Telemáticos http://moodle.dit.upm.es
  2. 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. 3. LeyendaTeoríaEjercicio práctico en el ordenadorAmpliación de conocimientosLectura / Vídeo / PodcastPráctica libre / Experimentación Interfaces de Usuario 3
  4. 4. Bibliografía● Libro de texto: – [Gar10] Learning Android, Marko Gargenta, OReilly, 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. 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 Coders 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. 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. 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. 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. 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. 10. Atributos comunes de View y ViewGrouporientation Orientación. Valores: horizontal, verticallayout_width Ancho. Valor posible: exacto en dip (device independent pixels), fill_parent, wrap_contentlayout_height Alto. Valor posible: exacto, fill_parent, wrap_contentlayout_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, endlayout_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 totallayout_x Coordenada x de la vistalayout_y Coordenada y de la vistagravity 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. 11. Nota: gravity vs layout_gravity Interfaces de Usuario 11
  12. 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. 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. 14. Programático vs Declarativo layout.xml strings.xml Interfaces de Usuario 14
  15. 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. 16. Algunos Layouts (ViewGroup) http://developer.android.com/resources/tutorials/views/index.html FrameLayout Interfaces de Usuario 16
  17. 17. Algunas vistas (widgets) Interfaces de Usuario 17
  18. 18. TextView Interfaces de Usuario 18
  19. 19. EditTextandroid:inputType=”phone” http://www.droiddraw.org/widgetguide.html Interfaces de Usuario 19
  20. 20. AnalogClock, DigitalClock Interfaces de Usuario 20
  21. 21. Button Interfaces de Usuario 21
  22. 22. Spinnerhttp://developer.android.com/resources/tutorials/views/hello-spinner.html Interfaces de Usuario 22
  23. 23. RadioGroup/RadioButton Interfaces de Usuario 23
  24. 24. DatePicker, TimePicker Interfaces de Usuario 24
  25. 25. Imágenes Interfaces de Usuario 25
  26. 26. ProgressBar Interfaces de Usuario 26
  27. 27. Muchas más● Consulta en:●http://developer.android.com/reference/android/widget/package-summary.html Interfaces de Usuario 27
  28. 28. Relación XML y Java● En XML declaramos un id – android:id="@+id/imageViewEtsit"● En Java accedemos a un widget confindViewById – ImageView foto = (ImageView) findViewById(R.id.imageViewEtsit);●Como vimos, la clase R se genera a partirdel layout XML, y en la la clase Java de laactividad decíamos qué layout se usaba consetContentView(R.layout.main) Interfaces de Usuario 28
  29. 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. 30. ¿Preguntas? Interfaces de Usuario 30

×