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ñaseenriquelopez@gmail.com

@eenriquelopez