Gráficos en Android
Introducción y objetivos
Android nos proporciona a través de su API gráfica una potente y variada colección de funciones que pueden cubrir prácticamente cualquier necesidad gráfica de una aplicación. Podemos destacar la manipulación de imágenes, gráficos vectoriales, animaciones, trabajo con texto o gráficos en 3D.
En este capÃtulo se introducen alguna de las caracterÃsticas más significativas de la API gráfica de Android. Nos centraremos en el estudio de las clases utilizadas para el desarrollo de gráficos en 2D. En el capÃtulo 2 hemos descrito cómo se utilizan las vistas como elemento constructivo para el diseño de la interfaz de usuario. DisponÃamos de una amplia paleta de vistas. No obstante, en muchas ocasiones va a ser interesante diseñar nuestras propias vistas. En este capÃtulo veremos cómo hacerlo.
Trataremos de aplicar lo aprendido en un ejemplo concreto, la representación de gráficos en Asteroides. Se utilizarán dos técnicas alternativas: los gráficos en mapa de bits y en formato vectorial. Al final del capÃtulo se describen las herramientas disponibles en Android para realizar animaciones. En concreto se describirán las animaciones Tween y las animaciones de propiedades. Por supuesto, resultarÃa imposible abarcar todas sus funciones para gráficos, por lo que se recomienda al lector que consulte la documentación de Android para obtener una descripción pormenorizada.
Objetivos:
-
Enumerar las distintas API gráficas par 2D y 3D disponibles en Android.
-
Describir cómo se utilizan las principales clases para gráficos en 2D (Canvas, Paint y Path).
-
Introducir la clase Drawable y utilizar muchos de sus descendientes (BitmapDrawable, GradienDrawable, …).
-
Estudiar cómo creas nuevas vistas y utilizarlas en distintas aplicaciones.
-
Aplicar gran parte de lo aprendido en un ejemplo concreto: Asteroides.
-
Describir las herramientas de Android para crear animaciones.
Antes de empezar a trabajar con gráficos conviene familiarizarse con las clases que nos van a permitir crear y manipular gráficos en Android. A continuación se introducen algunas de estas clases:
Canvas
La clase Canvas representa una superficie donde podemos dibujar. Dispone de una serie de métodos que nos permiten representar lÃneas, cÃrculos, texto, …Para dibujar en un Canvasnecesitaremos un pincel (Paint) donde definiremos el color, grosor de trazo, transparencia,… También podremos definir una matriz de 3x3 (Matrix) que nos permitirá transformar coordenadas aplicando una translación, escala o rotación. Otra opción consiste en definir un área conocida como Clip, de forma que los métodos de dibujo afecten solo a esta área.
Veamos a continuación algunos métodos de la clase Canvas. No se trata de un listado exhaustivo y muchos de estos métodos pueden trabajar con otros parámetros, por lo tanto se recomienda consultar la documentación del SDK para una información más detallada.
Para dibujar figuras geométricas:
drawCircle(float cx, float cy, float radio, Paint pincel)
drawOval(RectF ovalo, Paint pincel)
drawRect(RectF rect, Paint pincel)
drawPoint(float x, float y, Paint pincel)
drawPoints(float[] pts, Paint pincel)
Para dibujar lÃneas y arcos:
drawLine(float iniX, float iniY, float finX, float finY,
Paint pincel)
drawLines(float[] puntos, Paint pincel)
drawArc(RectF ovalo, float iniAnglulo, float anglulo,
boolean usarCentro,Paint pincel)
drawPath(Path trazo, Paint pincel)
Para dibujar texto:
drawText(String texto, float x, float y, Paint pincel)
drawTextOnPath(String texto, Path trazo, float desplazamHor,
float desplazamVert, Paint pincel)
drawPosText(String texto, float[] posicion, Paint pincel)
Para rellenar todo el Canvas (a no ser que se haya definido un Clip)
drawColor(int color)
drawARGB(int alfa, int rojo, int verde, int azul)
drawPaint(Paint pincel)
Para dibujar imágenes:
drawBitmap(Bitmap bitmap, Matrix matriz, Paint pincel)
Si definimos un Clip, solo se dibujará en el área indicada:
boolean clipRect(RectF rectangulo)
boolean clipRegion(Region region)
boolean clipPath(Path trazo)
Definir una matriz de transformación (Matrix) nos permitirá transformar coordenadas aplicando una translación, escala o rotación.
setMatrix(Matrix matriz)
Matrix getMatrix()
concat(Matrix matriz)
translate(float despazX, float despazY)
scale(float escalaX, float escalaY)
rotate(float grados, float centroX, float centroY)
skew(float despazX, float despazY)
Para averiguar el tamaño del Canvas:
int getHeight()
int getWidth()
Creación de una vista personalizada
A continuación se muestra un ejemplo donde se crea una vista que es dibujada por código por medio de un Canvas.
1. Crea un nuevo proyecto con los siguientes datos:
Application name: EjemploGraficos
Package name: org.example.ejemplograficos
Minimun Requiered SDK: API 7 Android 2.1 (Eclair)
Activity Name: EjemploGraficosActivity
Layout Name: main.xml
2. Reemplaza el código de la actividad por:
public class EjemploGraficosActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new EjemploView(this));
}
public class EjemploView extends View {
public EjemploView (Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
//Dibujar aquÃ
}
}
}
Comienza con la creación de una Activity, pero en este caso, el objeto View que asociamos a la actividad mediante el método setContentView() no está definido mediante XML. Por el contrario, es creado mediante código a partir del constructor de la clase EjemploView.
La clase EjemploView extiende View, modificando solo el método onDraw() responsable de dibujar la vista. A lo largo del capÃtulo iremos viendo ejemplos de código que pueden ser escritos en este método.
3. Si ejecutas la aplicación no se observará nada. Aprenderemos a dibujar en esta Canvasutilizando el objeto Paint descrito en la siguiente sección.
Nota sobre Java: Siempre que en un ejemplo aparezca un error indicándote que no se puede resolver un tipo, pulsa Ctrl-Shift-O para añadir los import de forma automática.