Android: Interfaz de Usuario
18
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
-
Upload
enrique-manas -
Category
Education
-
view
1.193 -
download
1
description
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 of Android: Interfaz de Usuario
Con la participación deElectronic Arts
En colaboración con laUniversidad de Alcalá
Enrique López-Mañas
Módulo 4: Creación y diseño de videojuegos móviles
Android: Interfaz de Usuario
2Introducció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
Notificaciones al usuario
3Introducció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 tiempo de ejecución
Interfaz contiene Views y ViewGroups
Todos los Views deben colocarse dentro de un ViewGroup
4Introducción a la programación – Enrique López Mañas
Views y ViewGroups
Tipos de ViewGroupsLinearLayout
TableLayout
RelativeLayout
FrameLayout
ScrollView
5Introducción a la programación – Enrique López Mañas
Linear Layout
Coloca los elementos en una columna o en una fila
6Introducción a la programación – Enrique López Mañas
Table Layout
Agrupa Views en filas y columnas
7Introducción a la programación – Enrique López Mañas
RelativeLayout
Permite especificar la posición relativa entre las Views
8Introducción a la programación – Enrique López Mañas
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 .
9Introducción a la programación – Enrique López Mañas
Diseño de la UI
Mediante archivos xml
En tiempo de ejecución
10Introducción a la programación – Enrique López Mañas
Ejemplo:
Creación de la interfaz en tiempo de ejecución
11Introducció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, relativos a cada View
onClick, onLongClick, onTouch, etc...EventHandler, eventos del dispositivo
onKeyDown, onKeyUp, onTouchEvent
Ejemplo
Capturar Eventos de la UI:
12Introducción a la programación – Enrique López Mañas
Extender Clase View
13Introducción a la programación – Enrique López Mañas
EventListener
14Introducción a la programación – Enrique López Mañas
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
15Introducció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ñores/layout
res/layout-land
16Introducción a la programación – Enrique López Mañas
Notificaciones al usuario
Según la situación existen diferentes maneras de notificar al usuario
Diálogos:
AlertDialogProgressDialogDatePickerDialogTimePickerDialog
Menús:
OptionsMenuContextMenu
Barra de notificaciones
Activity como Dialog
17Introducción a la programación – Enrique López Mañas
Ejemplo
Creación de Diálogos
Utilización de Menús
Notificaciones
Activity como Dialog
Aplicar Estilos
Con la participación deElectronic Arts
En colaboración con laUniversidad de Alcalá
Gracias por su atenciónContacto para dudas y sugerencias
Enrique López Mañ[email protected]
@eenriquelopez
