Gráficos 2D, animaciones, controles multimedia

(1)

Aplicaciones para Telefonía Móvil

Ingeniería de Telecomunicación

Gráficos 2D, animaciones, controles multimedia…

(2)

Gráficos y multimedia

1.

Introducción

2.

Gráficos 2-D

1.

Canvas

2.

Drawable

3.

Animación de Drawables

1.

Frame Animation

4.

Animación de Vistas

1.

Tween animation

5.

Gráficos 3-D

6.

Audio

1.

PlayBack de audio y video

2.

Captura de audio

Versión adaptada a partir del trabajo de Eusebio Gallardo Izquierdo y Mouad Seddiki para la asignatura Aplicaciones para Telefonía Móvil de la titulación de Ingeniería de Telecomunicación,

(3)

1.

Conocer las bases del manejo de gráficos en

2-D de Android

2.

Conocer las funcionalidades de programación

en 3-D de Android

3.

Conocer la forma de reproducir archivos

(4)

1.

Android Developers.

(5)



Siempre se debe tener en cuenta las

necesidades gráficas que va a tener una

aplicación cuando se está escribiendo la

misma: Una aplicación estática necesitará

diferente características que las que requeriría

un juego interactivo.



De esta forma podría usarse:



Canvas y Drawables



Aceleración gráfica (Hardware Acceleration)



OpenGL

(6)

 Cuando se está implementando una aplicación donde se

quieren realizar un dibujo especializado y/o controlar una animación, se debe realizar a través de un Canvas.

 Un canvas (lienzo) funciona como interfaz de la superficie sobre

la que los gráficos serán dibujados, recibiendo todas las llamadas de métodos de dibujo.

 A través de Canvas, el dibujo es realizado realmente sobre un

Bitmap subyacente, el cual es colocado en la ventana.

(7)

 Todo el proceso de dibujo se realizará en la llamada al método

de callback onDraw(), donde el Canvas se proporciona para su modificación y/o actualización a través de llamadas a métodos de dibujo sobre él.

 También se puede adquirir un Canvas a través de la llamada al

método SurfaceHolder.lockCanvas(), cuando se esté usando un objeto SurfaceView.

 Sin embargo si se necesita crear un nuevo Canvas, se debe

definir el Bitmap sobre el cual se realizará realmente el dibujo. El Bitmap siempre es requerido para un Canvas.

(8)

 Se puede crear un nuevo Canvas de la siguiente manera:

Bitmap b =

Bitmap.createBitmap(100,100,Bitmap.Config.ARGB_8 888);

Canvas c = new Canvas(b);

 Ahora el Canvas puede dibujar sobre el Bitmap previamente

definido. Una vez terminado el dibujo sobre el Canvas, se puede llevar el Bitmap a otro Canvas a través de métodos como Canvas.drawBitmap(Bitmap,...). Se recomienda que se dibujen el gráfico definitivo a través de un Canvas conseguido a través de métodos como View.onDraw() o

SurfaceHolder.lockCanvas().

(9)

 La clase Canvas tienes su propio conjunto de métodos de

dibujo tales como: drawBitmap(...), drawRect(...), drawText(...), y otros muchos.

 Otras clases que se pueden usar también proporcionan

métodos de dibujo, como los objetos Drawable que se pueden poner en un Canvas. La clase Drawable tiene sus propios

métodos draw() que toman el Canvas que los incorpora como argumento.

(10)

 Android ofrece una biblioteca de gráficos 2D personalizados

para dibujar y animar formas e imágenes.

 Los paquetes android.graphics.drawable y

android.view.animation es donde se encuentran las clases más comunes utilizadas para el dibujo y la animación en dos

dimensiones.

 Vamos ver el uso del objeto Drawable para dibujar gráficos, así

cómo utilizar un par de subclases de la clase Drawable y cómo crear animaciones que permitan mover, estirar y rotar un

gráfico o animación de una serie de gráficos

(11)

 Drawable es una abstracción general de "algo que se puede elaborar“.

 La clase Drawable se extiende para definir una variedad de tipos específicos de gráficos, incluyendo BitmapDrawable,

ShapeDrawable, PictureDrawable, LayerDrawable y otros más.  Por supuesto, también puede ampliarse para definir sus propios

objetos personalizados.

 Hay tres maneras de definir y crear instancias de Drawable:  El uso de una imagen guardada en los recursos del proyecto,  Mediante un archivo XML que define las propiedades del

Drawable.

 Con los constructores de clase normal. A continuación, vamos a discutir cada uno de los primeros dos técnicas (el uso de constructores no es nada nuevo para un desarrollador con experiencia).

(12)

 Una forma sencilla de añadir gráficos es por referencia a un

archivo de imagen de los recursos del proyecto. Los tipos de archivo admitidos son:

 PNG (preferido), JPG (aceptable) y GIF (desaconsejado).

 Esta técnica es la aconsejable para los iconos de aplicaciones,

logotipos u otros gráficos, como los utilizados en un juego.

 Para utilizar un recurso de imagen, sólo tiene que añadir el

archivo al directorio res/drawable/ del proyecto. Desde allí, puede hacer referencia a ella desde el código o el diseño de XML.

 El código siguiente muestra cómo construir un ImageView que

utiliza una imagen de recursos del proyecto.

Drawables

(13)

LinearLayout mLinearLayout;

protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState);

//Create a LinearLayout in which to add the ImageView mLinearLayout = new LinearLayout(this);

//Instantiate an ImageView and define its properties ImageView i = new ImageView(this);

i.setImageResource(R.drawable.my_image); i.setAdjustViewBounds(true);

i.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

//Add the ImageView to the layout

// and set the layout as the content view mLinearLayout.addView(i);

setContentView(mLinearLayout); }

Drawables

Creación de gráficos a partir de una imagen. Ejemplo

<ImageView

android:layout_width="wrap_content" android:layout_height="wrap_content" android:tint="#55ff0000"

(14)

 Si sabemos que las propiedades de los gráficos pueden

cambiar durante el diseño de la aplicación, es conveniente la definición del objeto mediante XML, lo que nos permitirá

cambiar sus propiedades cada vez que se instancie.

 Definido el objeto en XML, se guarda el archivo en el directorio

res/drawable del proyecto. Se crea una instancia del objeto mediante una llamada a Resources.getDrawable() y le

pasamos el identificador de recurso del archivo XML.

Drawables

(15)

 Se pueden definir mapas de bits

que estén referenciados en XML para aportar características

adicionales, como el entrelazado (dither) y el replicado (tiling).

 También permite filtrado cuando

la imagen está deformada.

 El recurso será gestionado con la

clase BitmapDrawable.  Referencia en Java: R.drawable.filename  Referencia en XML: @[package:]drawable/filename

Drawables

XML Bitmap Dithering Tiling

(16)

<?xml version="1.0" encoding="utf-8"?>

<bitmap xmlns:android=http://schemas.android.com/apk/res/android

android:src="@[package:]drawable/drawable_resource" android:antialias=["true" | "false"]

android:dither=["true" | "false"] android:filter=["true" | "false"]

android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />

Ejemplo: <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/icon" android:tileMode="repeat" />

Drawables

XML Bitmap. Definición

(17)

 Un gráfico NinePatchDrawable es una imagen de mapa de bits

elástico, que Android cambiará automáticamente de tamaño para acomodar el contenido de la vista en la que la han

colocado como fondo.

 Un ejemplo de uso de un NinePatch son los fondos utilizados de

forma estándar en los botones de Android, los botones deben estirarse para acomodar cadenas de longitudes diferentes.

 También se puede definir en un XML: <?xml version="1.0" encoding="utf-8"?> <nine-patch xmlns:android="http://schemas.android.com/apk/res/android" android:src="@[package:]drawable/drawable_resource" android:dither=["true" | "false"] />

Drawables

Nine-patch

(18)



Un NinePatch es una

imagen PNG estándar

que incluye un borde

adicional de 1 píxel de

ancho.



Se deben guardar con

la extensión 0.9.png, y se

guarda en el directorio

res/drawable/ del

proyecto.

Drawables

Crear un Nine-patch

(19)



La línea de borde se utiliza para definir el área que debe

definir la imagen. Se indica una sección extensible por

una (o más) de líneas negras de 1 píxel de ancho en la

parte izquierda y borde superior.



Opcionalmente de pueden definir dos líneas a la

derecha y debajo del Nine-path, para definir un área

efectiva de dibujo, de forma que si queremos meter un

texto dentro de este área, se ajustará a la misma, si no

existen estas líneas el dibujo se extiende hasta ajustare al

texto.

Drawables

(20)

 Cuando se quiere dibujar un gráfico en 2D dinámicamente, el

objeto ShapeDrawable es el más indicado.

 Un ShapeDrawable es una extensión de Drawable, puede

utilizarse en lugar de Drawable, por ejemplo para el fondo de una pantalla, con la opción setBackgroundDrawable().

 La clase ShapeDrawable (al igual que muchos otros tipos

Drawable en el paquete android.graphics.drawable) permite definir sus propiedades con los métodos públicos.

 También puede definir las formas Drawable utilizando XML.

Drawables

(21)

<?xml version="1.0" encoding="utf-8"?> <shape

xmlns:android=http://schemas.android.com/apk/res/android android:shape=["rectangle" | "oval" | "line" | "ring"] >

<corners android:radius="integer" android:topLeftRadius="integer" android:topRightRadius="integer" android:bottomLeftRadius="integer" android:bottomRightRadius="integer" /> …

Drawables

(22)

<gradient android:angle="integer" android:centerX="integer" android:centerY="integer" android:centerColor="integer" android:endColor="color" android:gradientRadius="integer" android:startColor="color"

android:type=["linear" | "radial" | "sweep"] android:useLevel=["true" | "false"] />

Drawables

(23)

<padding android:left="integer" android:top="integer" android:right="integer" android:bottom="integer" /> <size android:width="integer" android:height="integer" />

Drawables

Shape Drawable. Definición

(24)

Drawables

Shape Drawable. Ejemplo

<?xml version="1.0" encoding="UTF-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle"> <stroke android:width="2dp" android:color="#FFFFFFFF" /> <gradient android:endColor="#DDBBBBBB" android:startColor="#DD777777" android:angle="90" /> <corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" android:topLeftRadius="7dp" android:topRightRadius="7dp" /> </shape>

(25)

 Un StateListDrawable es un drawable que permite usar

imágenes diferentes para un mismo gráfico en función del estado del mismo.

 Definición: <?xml version="1.0" encoding="utf-8"?> < selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize=["true" | "false"] android:dither=["true" | "false"] android:variablePadding=["true" | "false"] > <item>…</item> <item>…</item> </selector >

Drawables

StateList Drawable

(26)

Drawables

(27)

Otros tipos de Drawables

 Layer List: un Drawable que gestiona un array de otros

Drawables.

 Estos Drawables son dibujados en el orden del array, siendo el que tiene el índice mayor el que se dibuja encima de los demás.

 Crea un objeto LayerDrawable.

 Level List: Es un fichero XML que define una serie de Drawables

que pueden ser mostrados alternativamente a través de la asignación de un valor numérico o «nivel» .

 El Drawable a mostrar será aquel que coincida con un nivel mayor o igual al establecido.

 Crea un objeto LevelListDrawable. Se puede establecer el nivel con setLevel() de Drawable o setImageLevel() de ImageView.

(28)

Otros tipos de Drawables

 Inset Drawable: Es un fichero XML que define un drawable que

incrusta otro drawable a una distancia especificadas.  Útil para vistas que necesitan un fondo más pequeño que sus

dimensiones actuales.

 Clip Drawable: Es un fichero XML que define un drawable que es

un recorte de otro basándose en el nivel actual de ese

Drawable (Drawable.setLevel(), valor máximo 10000, la imagen no está recortada, nivel 0 totalmente recortada).

 Crea un ClipDrawable.

 Scale Drawable: Un XML que cambia la escala de un drawable

en función de su nivel actual.  Crea un ScaleDrawable.

(29)

 Esta es una animación tradicional en el sentido de se que crea

con una secuencia de imágenes diferentes y se reproducen en orden como un rollo de película. La clase AnimationDrawable es la base de Frame Animation.

 Se pueden definir el frame de animación mediante código

usando la clase AnimationDrawable, pero es mas simple definirlas en un fichero XML y almacenarlo en el directorio res/drawable del proyecto.

 El archivo XML se compone de un elemento <animation-list>

como el nodo raíz y una serie de nodos hijos <item> que cada uno define un frame: una imagen para el frame.

(30)

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true"> <item android:drawable="@drawable/rocket_thrust1" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust2" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust3" android:duration="200" /> </animation-list>

Frame Animation

(31)

 A la Activity se le añade una animación a un objeto ImageView

(archivo XML rocket_thrust.xml)

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.main);

ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image); rocketImage.setBackgroundResource(R.drawable.rocket_thrust);

rocketAnimation = (AnimationDrawable) rocketImage.getBackground(); }

Frame Animation

(32)

public boolean onTouchEvent(MotionEvent event) {

if (event.getAction() == MotionEvent.ACTION_DOWN) { rocketAnimation.start(); return true; } return super.onTouchEvent(event); }

Frame Animation

Ejemplo. Continua

(33)

 No se puede llamar al método start() del AnimationDrawable

dentro del método onCreate() de la Activity, ya que el

AnimationDrawable no está completamente adjuntado a la ventana.

 La animación se podrá iniciar a través de cualquier acción del

usuario posteriormente.

 Si se quiere iniciar la animación automáticamente al inicio de la

Activity se debe hacer en el método onWindowFocusChanged() de la Activity, el cual se llama cuando Android otorga el foco a su ventana.

Frame Animation

(34)

 Con las transiciones TransitionDrawable se pueden generar

efectos de transición entre dos imágenes, pero tan solo dos.

 Definición XML: <?xml version="1.0" encoding="utf-8"?> <transition xmlns:android="http://schemas.android.com/apk/res/android”> <item android:drawable="@[package:]drawable/drawable_resource" android:id="@[+][package:]id/resource_name" android:top="dimension" android:right="dimension" android:bottom="dimension" android:left="dimension" /> </transition>

Transiciones

(35)

 res/drawable/transition.xml <transition xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/image_expand“ /> <item android:drawable="@drawable/image_collapse“ /> </transition>

 Se aplica este drawable a un ImageButton <ImageButton android:id="@+id/button" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/transition" />

Transiciones

(36)



Se instancia el TransitionDrawable y se configura como el

contenido de un ImageView.

ImageButton button = (ImageButton) findViewById(R.id.button); TransitionDrawable drawable = (TransitionDrawable)

button.getDrawable();

drawable.startTransition(500);//tiempo en milisegundos

Transiciones

(37)



Una Tween Animation puede realizar una serie de

transformaciones simples (posición, tamaño, rotación y

transparencia) sobre el contenido de un objeto View.



El animation_package ofrece todas las clases que se

utilizan en un Tween Animation.

Tween Animation

Por ejemplo en un objeto TextView, se puede

mover, rotar, ampliar o reducir el tamaño del

texto, si tiene una imagen de fondo, la imagen

se modificará con el texto.

(38)



La definición de instrucciones de animación, como los

layout, es más recomendable que se incluyan en ficheros

XML, que en instrucciones de Android, pues son más

fáciles de leer, reutilizar e intercambiar.



El fichero XML de animación es almacenado en el

directorio res/anim del proyecto.



El archivo XML debe tener un único elemento raíz, este

será un solo elemento <alpha>, <scale>, <translate>,

<rotate>, o el elemento <set> que contiene grupos de

estos elementos (pueden incluir otro <set>).



Por defecto, todas las instrucciones de animación se

aplican simultáneamente.

(39)

<set android:shareInterpolator="false"> <scale android:interpolator="@android:anim/accelerate_decelerate_int erpolator" android:fromXScale="1.0" android:toXScale="1.4" android:fromYScale="1.0" android:toYScale="0.6" android:pivotX="50%" android:pivotY="50%" android:fillAfter="false" android:duration="700" />

Tween Animation

(40)

… <set android:interpolator="@android:an im/decelerate_interpolator"> <scale android:fromXScale="1.4" android:toXScale="0.0" android:fromYScale="0.6" android:toYScale="0.0" android:pivotX="50%” android:pivotY="50%" android:startOffset="700" android:duration="400" android:fillBefore="false"/>

Tween Animation

Ejemplo: Ensancha, gira y rota simultáneamente una vista … <rotate android:fromDegrees="0" android:toDegrees="-45" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:startOffset="700" android:duration="400" /> </set> </set>

(41)

 Para aplicar la animación se ejecuta el siguiente código java.

Tween Animation

Ejemplo: Ensancha, gira y rota simultáneamente una vista

ImageView spaceship = (ImageView) findViewById(R.id.spaceshipImage); Animation hyperspaceJumpAnimation =

AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump); spaceship.startAnimation(hyperspaceJumpAnimation);

(42)



Android incluye soporte para gráficos 3D de alto

rendimiento a través de la API OpenGL -

específicamente, la API OpenGL ES.



OpenGL ES es una versión de la especificación OpenGL

destinado para dispositivos embebidos. Las versiones de

OpenGL ES se ajustan, más o menos, a las versiones

iniciales del estándar OpenGL. Android actualmente

soporta OpenGL ES 1.0, que se corresponde a OpenGL

1.3. Así que si la aplicación que queremos desarrollar es

compatible con OpenGL 1.3, será también compatible

son Android.



El API específica proporcionada por Android es similar a

la API J2ME JSR239 OpenGL ES, sin embargo, pueden no

ser idénticas, así que hay que tener cuidado de las

(43)



Android permite reproducir audio y video de varios tipos

de fuentes de datos.

 Puede reproducir audio o vídeo de los archivos multimedia

almacenados en los fuentes de la aplicación (archivos raw)

 A partir de archivos del sistema.

 O de una secuencia de datos a través de una conexión de

red.



Para reproducir contenido multimedia (audio o vídeo) se

usa la clase MediaPlayer.



La plataforma también permite grabar audio y vídeo

cuando sea soportado por el hardware del dispositivo.



Para grabar audio o vídeo se utiliza la clase

(44)

 Para la reproducción de audio también se usa la clase

SoundPool.

 Solo es posible reproducir en los dispositivos de salida estándar:

altavoz o auriculares Bluetooth.

 No es posible reproducir archivos de sonido mientras se

mantiene una conversación de audio.

(45)

 Nos permite reproducir, sobre todo, sonido dentro de la aplicaciones.

Para hacer esto:

 Poner el archivo de sonido en el directorio res/raw del proyecto.

 Crear una instancia de MediaPlayer y hacer referencia a ese recurso usando

MediaPlayer.create y luego llamar a start() en la instancia:

MediaPlayer mp = MediaPlayer.create(context, R.raw.sound_file_1); mp.start();

 Para hacer uso de las distintas funciones de reproducción se puede

llamar los distintos métodos de MediaPlayer: stop(), reset(), pause(), etc.

PlayBack de audio

(46)

 Se pueden reproducir archivos desde el sistema de ficheros o

desde una URL. Para hacer esto:

 Crear una instancia de MediaPlayer.

 Llamar a setDataSource con la cadena que contenga el path o url

donde se encuentra el archivo para reproducir.

 Llamar a prepare() y despues start() de la instancia.

MediaPlayer mp = new MediaPlayer(); mp.setDataSource(PATH_TO_FILE); mp.prepare();

mp.start();

 El resto de funciones es igual que para la reproducción de

archivos raw.

PlayBack de audio

(47)

 Para capturar audio desde el dispositivo se necesitan estos pasos:

1. Crear una instancia de android.media.MediaRecorder.

2. Crear una nueva instancia de android.content.ContentValues y poner algunas de las propiedades estándar, como TÍTULO,

TIMESTAMP, y todos los importantes MIME_TYPE. 3. Definir la ruta del archivo de datos ( se puede usar

android.content.ContentResolver para crear una entrada en la base de datos de contenido y conseguir que se asigne

automáticamente una ruta que se pueda utilizar). 4. Ajustar la fuente de audio mediante

MediaRecorder.setAudioSource().

5. Formatear el archivo de salida utilizando MediaRecorder.setOutputFormat().

(48)



Para capturar audio desde el dispositivo se

necesitan estos pasos:

6.

Ajuste el codificador de audio con

MediaRecorder.setAudioEncoder().

7.

Llamar a prepare() en la instancia

MediaRecorder.

8.

Para iniciar la captura de audio llamar a

start().

9.

Para detener la captura de audio, llamar a

stop().

10.

Al terminar liberar la instancia llamando a

release().

Captura de audio

(49)

 El siguiente ejemplo ilustra cómo configurar la captura de audio.

recorder = new MediaRecorder();

ContentValues values = new ContentValues(3);

values.put(MediaStore.MediaColumns.TITLE, SOME_NAME_HERE);

values.put(MediaStore.MediaColumns.TIMESTAMP, System.currentTimeMillis()); values.put(MediaStore.MediaColumns.MIME_TYPE,

recorder.getMimeContentType());

ContentResolver contentResolver = new ContentResolver(); Uri base = MediaStore.Audio.INTERNAL_CONTENT_URI;

Uri newUri = contentResolver.insert(base, values); if (newUri == null) {

// need to handle exception here - we were not able to create a new // content entry

(50)

 El siguiente ejemplo ilustra cómo configurar la captura de audio.

// could use setPreviewDisplay() to display a preview to suitable View here recorder.setAudioSource(MediaRecorder.AudioSource.MIC); recorder.setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP); recorder.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB); recorder.setOutputFile(path); recorder.prepare(); recorder.start();

 Para parar la grabación:

recorder.stop(); recorder.release();