Android: Interfaz de Usuario

Presentación para el módulo de Introducción a la Programación y Desarrollo con Android del Máster en Desarrollo de Videojuegos para Móviles de la IPECC

Transcript

1. Con la participación de Electronic Arts En colaboración con la Universidad de Alcalá Enrique  López-­‐Mañas   Módulo 4: Creación y diseño de videojuegos móviles Android:  Interfaz  de  Usuario    
2. 2   Introducción  a  la  programación  –  Enrique  López  Mañas   Contenido   Interfaz  de  Usuario:   Entendiendo  la  Interfaz  de  Usuario   Diseño  de  la  Interfaz   Capturar  eventos  de  la  Interfaz   Responder  a  cambios  de  orientación   NoEficaciones  al  usuario  
3. 3   Introducción  a  la  programación  –  Enrique  López  Mañas   Entendiendo  la  UI   Dos  maneras  de  definir  la  IU:   XML:  (p.ej.,  main.xml  en  la  carpeta  res/layout)   En  Eempo  de  ejecución   Interfaz  conEene  Views  y  ViewGroups     Todos  los  Views  deben  colocarse   dentro  de  un  ViewGroup  
4. 4   Introducción  a  la  programación  –  Enrique  López  Mañas   Views  y  ViewGroups   Tipos  de  ViewGroups   LinearLayout   TableLayout   RelaEveLayout   FrameLayout   ScrollView  
5. 5   Introducción  a  la  programación  –  Enrique  López  Mañas   Linear  Layout   Coloca  los  elementos  en  una  columna  o   en  una  fila  
6. 6   Introducción  a  la  programación  –  Enrique  López  Mañas   Table  Layout   Agrupa  Views  en  filas  y  columnas  
7. 7   Introducción  a  la  programación  –  Enrique  López  Mañas   RelaEveLayout   Permite  especificar  la  posición  relaEva   entre  las  Views  
8. 8   Introducción  a  la  programación  –  Enrique  López  Mañas   Unidades  de  medida   Cuando  se  especifica  el  tamaño  de  un   elemento,  podemos  uElizar:   dp:  Pixel  independiente  de  la  densidad.  160dp   equivalen  a  1  pulgada  de  pantalla  `sica   sp:  Pixel  independiente  de  la  escala,  se  usa  en  tamaño   de  fuente  de  letra   pt:  Punto.  Equivale  a  1/72  pulgadas,  basada  en  el   tamaño  de  la  pantalla   px:  Pixel.  Equivale  a  los  pixeles  de  la  pantalla,  no   recomendable  ya  que  no  renderizará   correctamente  .  
9. 9   Introducción  a  la  programación  –  Enrique  López  Mañas   Diseño  de  la  UI   Mediante  archivos  xml             En  Eempo  de  ejecución  
10. 10   Introducción  a  la  programación  –  Enrique  López  Mañas   Ejemplo:   Creación  de  la  interfaz  en  Eempo  de   ejecución  
11. 11   Introducción  a  la  programación  –  Enrique  López  Mañas   Hay  más  de  una  manera  de  interceptar  los   eventos  de  interacción  del  usuario:   Extender  la  clase  View  y  Sobrecargar  el  método   EventListeners,  relaEvos  a  cada  View   onClick,  onLongClick,  onTouch,  etc...   EventHandler,  eventos  del  disposiEvo   onKeyDown,  onKeyUp,  onTouchEvent   Ejemplo Capturar  Eventos  de  la  UI:  
12. 12   Introducción  a  la  programación  –  Enrique  López  Mañas   Extender  Clase  View  
13. 13   Introducción  a  la  programación  –  Enrique  López  Mañas   EventListener  
14. 14   Introducción  a  la  programación  –  Enrique  López  Mañas   Cambios  de  Orientación   Cuando  cambia  la  orientación  del   disposiEvo,  la  AcEvity  visible  se   destruye  y  se  vuelve  a  crear   Es  necesario  adaptarse  a  ésos  cambios:   Anclar  Views   Reposicionar  y  cambiar  el  tamaño  de  los  Views  
15. 15   Introducción  a  la  programación  –  Enrique  López  Mañas   Ejemplo   Layout  que  responde  a  los  cambios  de   orientación   Cómo  anclar  Views   Cómo  reposicionar  y  cambiar  el  tamaño   res/layout   res/layout-­‐land  
16. 16   Introducción  a  la  programación  –  Enrique  López  Mañas   NoEficaciones  al  usuario   Según  la  situación  existen  diferentes   maneras  de  noEficar  al  usuario   Diálogos:   AlertDialog   ProgressDialog   DatePickerDialog   TimePickerDialog   Menús:   OpEonsMenu   ContextMenu   Barra  de  noEficaciones   AcEvity  como  Dialog  
17. 17   Introducción  a  la  programación  –  Enrique  López  Mañas   Ejemplo   Creación  de  Diálogos   UElización  de  Menús   NoEficaciones   AcEvity  como  Dialog   Aplicar  EsElos  
18. Con la participación de Electronic Arts En colaboración con la Universidad de Alcalá Gracias  por  su  atención   Contacto  para  dudas  y  sugerencias   Enrique  López  Mañas   eenriquelopez@gmail.com   @eenriquelopez