SlideShare una empresa de Scribd logo
Enrique López-Mañas



     Módulo 4: Creación y diseño de videojuegos móviles

Android: Interfaz de Usuario
En colaboración con la                  Con la participación de
Universidad de Alcalá                           Electronic Arts
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
                 Notificaciones al usuario




Introducción a la programación – Enrique López Mañas           2
Entendiendo la UI

   Dos maneras de definir la IU:
                 XML: (p.ej., main.xml en la carpeta res/layout)
                 En tiempo de ejecución

   Interfaz contiene Views y ViewGroups
   Todos los Views deben colocarse
     dentro de un ViewGroup



Introducción a la programación – Enrique López Mañas                   3
Views y ViewGroups

  Tipos de ViewGroups
                LinearLayout
                TableLayout
                RelativeLayout
                FrameLayout
                ScrollView




Introducción a la programación – Enrique López Mañas           4
Linear Layout

   Coloca los elementos en una columna o
     en una fila




Introducción a la programación – Enrique López Mañas               5
Table Layout

   Agrupa Views en filas y columnas




Introducción a la programación – Enrique López Mañas              6
RelativeLayout

   Permite especificar la posición relativa
     entre las Views




Introducción a la programación – Enrique López Mañas                7
Unidades de medida

   Cuando se especifica el tamaño de un
     elemento, podemos utilizar:
                 dp: Pixel independiente de la densidad. 160dp
                   equivalen a 1 pulgada de pantalla fí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 .


Introducción a la programación – Enrique López Mañas                      8
Diseño de la UI

   Mediante archivos xml




   En tiempo de ejecución
Introducción a la programación – Enrique López Mañas                 9
Ejemplo:

   Creación de la interfaz en tiempo de
     ejecución




Introducción a la programación – Enrique López Mañas          10
Ejemplo



                              Capturar Eventos de la UI:
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, relativos a cada View
                                            onClick, onLongClick, onTouch, etc...
                           EventHandler, eventos del dispositivo
                                                         onKeyDown, onKeyUp, onTouchEvent




  Introducción a la programación – Enrique López Mañas                                      11
Extender Clase View




Introducción a la programación – Enrique López Mañas            12
EventListener




Introducción a la programación – Enrique López Mañas               13
Cambios de Orientación

   Cuando cambia la orientación del
     dispositivo, la Activity 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




Introducción a la programación – Enrique López Mañas             14
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




Introducción a la programación – Enrique López Mañas         15
Notificaciones al usuario

   Según la situación existen diferentes
     maneras de notificar al usuario
                 Diálogos:
                              AlertDialog
                              ProgressDialog
                              DatePickerDialog
                              TimePickerDialog
                 Menús:
                          OptionsMenu
                          ContextMenu
                 Barra de notificaciones
                 Activity como Dialog

Introducción a la programación – Enrique López Mañas   16
Ejemplo

   Creación de Diálogos
   Utilización de Menús
   Notificaciones
   Activity como Dialog
   Aplicar Estilos



Introducción a la programación – Enrique López Mañas         17
Gracias por su atención
                           Contacto para dudas y sugerencias
                                       Enrique López Mañas
                                 eenriquelopez@gmail.com
                                            @eenriquelopez




En colaboración con la     Con la participación de
Universidad de Alcalá              Electronic Arts

Más contenido relacionado

PPTX
Programacion Orientada a Eventos
PDF
Interfaces increibles en Android
PDF
Introducción a Android: 10 cosas importantes que hay que entender
DOCX
Requerimientos y versiones de windows 7
PPTX
REQUISITOS PARA INSTALAR WINDOWS XP Y WINDOWS 7
PPTX
Requerimientos/ubuntu
PPTX
Sistema operativo android
Programacion Orientada a Eventos
Interfaces increibles en Android
Introducción a Android: 10 cosas importantes que hay que entender
Requerimientos y versiones de windows 7
REQUISITOS PARA INSTALAR WINDOWS XP Y WINDOWS 7
Requerimientos/ubuntu
Sistema operativo android

Similar a Android: Interfaz de Usuario (20)

PPTX
Programacion Orientada a Objetos
PPTX
Interfaz con usuario
PPTX
Programacion orientada a objetos y programacion orientada a eventos
PPTX
Diseño interfaz de usuario
PPTX
Diseño interfaz de usuario
PPTX
Interfaz de usuario
PPT
Diseño interfaz usuario
PPTX
DIDÁCTICA EN EL USO DE RECURSOS INFORMÁTICOS.pptx
DOC
Taller netbooks parte_2
PDF
Practicas visualbasic60
DOCX
Conceptos basicos de programacion 10-2..
DOCX
Conceptos basicos de programacion 10-2..
DOCX
Tecnologia Conceptos basicos de programacion.docx
DOCX
Conceptos basicos de programacion.docx:.
DOCX
Conceptos basicos de programacion.docx..
DOCX
Conceptos basicos de programacion...docx
DOCX
Conceptos basicos de programacion.docume
PDF
Proyecto del curso IHC.pdf
PDF
Tecnología Juana Isabel Benites Bucheli 10-8
Programacion Orientada a Objetos
Interfaz con usuario
Programacion orientada a objetos y programacion orientada a eventos
Diseño interfaz de usuario
Diseño interfaz de usuario
Interfaz de usuario
Diseño interfaz usuario
DIDÁCTICA EN EL USO DE RECURSOS INFORMÁTICOS.pptx
Taller netbooks parte_2
Practicas visualbasic60
Conceptos basicos de programacion 10-2..
Conceptos basicos de programacion 10-2..
Tecnologia Conceptos basicos de programacion.docx
Conceptos basicos de programacion.docx:.
Conceptos basicos de programacion.docx..
Conceptos basicos de programacion...docx
Conceptos basicos de programacion.docume
Proyecto del curso IHC.pdf
Tecnología Juana Isabel Benites Bucheli 10-8
Publicidad

Más de Enrique López Mañas (12)

PDF
Droidcon IT 2015
PDF
Android Building, Testing and reversing
PDF
AnDevCon: Android Reverse Engineering
PDF
Android studio
PDF
Debugging Android - GDG Munich
PDF
Introducción a la Programación
PPT
Android: Dialogs
PDF
Android: Almacenamiento de Datos
PPT
Android: Componentes (II)
PDF
Android: Componentes
PPT
Android: introducción
PPTX
Presentation android JUnit
Droidcon IT 2015
Android Building, Testing and reversing
AnDevCon: Android Reverse Engineering
Android studio
Debugging Android - GDG Munich
Introducción a la Programación
Android: Dialogs
Android: Almacenamiento de Datos
Android: Componentes (II)
Android: Componentes
Android: introducción
Presentation android JUnit
Publicidad

Último (20)

PDF
La Evaluacion Formativa en Nuevos Escenarios de Aprendizaje UGEL03 Ccesa007.pdf
PDF
Gasista de unidades unifuncionales - pagina 23 en adelante.pdf
PPTX
AGENTES PATÓGENOS Y LAS PRINCIPAL ENFERMEAD.pptx
DOCX
V UNIDAD - PRIMER GRADO. del mes de agosto
PPT
Cosacos y hombres del Este en el Heer.ppt
PDF
benveniste-problemas-de-linguistica-general-i-cap-6 (1)_compressed.pdf
PDF
Didactica de la Investigacion Educativa SUE Ccesa007.pdf
PDF
ACERTIJO Súper Círculo y la clave contra el Malvado Señor de las Formas. Por ...
PDF
Escuelas Desarmando una mirada subjetiva a la educación
PDF
Metodologías Activas con herramientas IAG
PDF
Unidad de Aprendizaje 5 de Matematica 1ro Secundaria Ccesa007.pdf
PDF
Escuela de Negocios - Robert kiyosaki Ccesa007.pdf
PDF
COMUNICACION EFECTIVA PARA LA EDUCACION .pdf
PDF
Salcedo, J. et al. - Recomendaciones para la utilización del lenguaje inclusi...
PDF
Educación Artística y Desarrollo Humano - Howard Gardner Ccesa007.pdf
PDF
Punto Critico - Brian Tracy Ccesa007.pdf
PDF
PFB-MANUAL-PRUEBA-FUNCIONES-BASICAS-pdf.pdf
PDF
Romper el Circulo de la Creatividad - Colleen Hoover Ccesa007.pdf
PDF
biología es un libro sobre casi todo el tema de biología
PDF
Habitos de Ricos - Juan Diego Gomez Ccesa007.pdf
La Evaluacion Formativa en Nuevos Escenarios de Aprendizaje UGEL03 Ccesa007.pdf
Gasista de unidades unifuncionales - pagina 23 en adelante.pdf
AGENTES PATÓGENOS Y LAS PRINCIPAL ENFERMEAD.pptx
V UNIDAD - PRIMER GRADO. del mes de agosto
Cosacos y hombres del Este en el Heer.ppt
benveniste-problemas-de-linguistica-general-i-cap-6 (1)_compressed.pdf
Didactica de la Investigacion Educativa SUE Ccesa007.pdf
ACERTIJO Súper Círculo y la clave contra el Malvado Señor de las Formas. Por ...
Escuelas Desarmando una mirada subjetiva a la educación
Metodologías Activas con herramientas IAG
Unidad de Aprendizaje 5 de Matematica 1ro Secundaria Ccesa007.pdf
Escuela de Negocios - Robert kiyosaki Ccesa007.pdf
COMUNICACION EFECTIVA PARA LA EDUCACION .pdf
Salcedo, J. et al. - Recomendaciones para la utilización del lenguaje inclusi...
Educación Artística y Desarrollo Humano - Howard Gardner Ccesa007.pdf
Punto Critico - Brian Tracy Ccesa007.pdf
PFB-MANUAL-PRUEBA-FUNCIONES-BASICAS-pdf.pdf
Romper el Circulo de la Creatividad - Colleen Hoover Ccesa007.pdf
biología es un libro sobre casi todo el tema de biología
Habitos de Ricos - Juan Diego Gomez Ccesa007.pdf

Android: Interfaz de Usuario

  • 1. Enrique López-Mañas Módulo 4: Creación y diseño de videojuegos móviles Android: Interfaz de Usuario En colaboración con la Con la participación de Universidad de Alcalá Electronic Arts
  • 2. 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 Notificaciones al usuario Introducción a la programación – Enrique López Mañas 2
  • 3. Entendiendo la UI Dos maneras de definir la IU: XML: (p.ej., main.xml en la carpeta res/layout) En tiempo de ejecución Interfaz contiene Views y ViewGroups Todos los Views deben colocarse dentro de un ViewGroup Introducción a la programación – Enrique López Mañas 3
  • 4. Views y ViewGroups Tipos de ViewGroups LinearLayout TableLayout RelativeLayout FrameLayout ScrollView Introducción a la programación – Enrique López Mañas 4
  • 5. Linear Layout Coloca los elementos en una columna o en una fila Introducción a la programación – Enrique López Mañas 5
  • 6. Table Layout Agrupa Views en filas y columnas Introducción a la programación – Enrique López Mañas 6
  • 7. RelativeLayout Permite especificar la posición relativa entre las Views Introducción a la programación – Enrique López Mañas 7
  • 8. Unidades de medida Cuando se especifica el tamaño de un elemento, podemos utilizar: dp: Pixel independiente de la densidad. 160dp equivalen a 1 pulgada de pantalla fí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 . Introducción a la programación – Enrique López Mañas 8
  • 9. Diseño de la UI Mediante archivos xml En tiempo de ejecución Introducción a la programación – Enrique López Mañas 9
  • 10. Ejemplo: Creación de la interfaz en tiempo de ejecución Introducción a la programación – Enrique López Mañas 10
  • 11. Ejemplo Capturar Eventos de la UI: 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, relativos a cada View onClick, onLongClick, onTouch, etc... EventHandler, eventos del dispositivo onKeyDown, onKeyUp, onTouchEvent Introducción a la programación – Enrique López Mañas 11
  • 12. Extender Clase View Introducción a la programación – Enrique López Mañas 12
  • 13. EventListener Introducción a la programación – Enrique López Mañas 13
  • 14. Cambios de Orientación Cuando cambia la orientación del dispositivo, la Activity 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 Introducción a la programación – Enrique López Mañas 14
  • 15. 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 Introducción a la programación – Enrique López Mañas 15
  • 16. Notificaciones al usuario Según la situación existen diferentes maneras de notificar al usuario Diálogos: AlertDialog ProgressDialog DatePickerDialog TimePickerDialog Menús: OptionsMenu ContextMenu Barra de notificaciones Activity como Dialog Introducción a la programación – Enrique López Mañas 16
  • 17. Ejemplo Creación de Diálogos Utilización de Menús Notificaciones Activity como Dialog Aplicar Estilos Introducción a la programación – Enrique López Mañas 17
  • 18. Gracias por su atención Contacto para dudas y sugerencias Enrique López Mañas eenriquelopez@gmail.com @eenriquelopez En colaboración con la Con la participación de Universidad de Alcalá Electronic Arts