View Personalizada
Para poder dibujar
sobre la pantalla, deberemos crear un tipo de dato que herede de
View. De esta manera, podremos poner nuestra View como contenido de la
Activity, en vez de un archivo xml de layout como se acostumbra al
desarrollar aplicaciones.
Crearemos una
clase llamada GameView y escribiremos un constructor que reciba
el Context como argumento, ya que deberemos pasárselo al constructor
de la clase superior.
public
class
GameView extends
View
{
public
GameView(Context context) {
super(context);
}
}
Luego
reemplazaremos la típica línea setContentView(R.layout.main) en
nuestra Activity por lo siguiente:
protected
void
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GameView gameView = new
GameView(this);
setContentView(gameView);
}
De esta forma la
Activity tendrá a nuestra View personalizada como contenido en pantalla.
Dibujando en nuestra View
Ahora que tenemos
nuestra clase GameView, podremos reescribir el método “onDraw” el
cual se ejecuta al re dibujarse la pantalla.
@Override
protected
void
onDraw(Canvas canvas) {
}
El método recibe
como argumento un objeto del tipo Canvas, este objeto es sobre el cual se dibuja, es decir, que nos proveerá métodos para dibujar
textos, imágenes, figuras geométricas, etc.
Dibujando un círculo en pantalla
Para dibujar un
círculo, primero debemos crear un objeto del tipo Paint, en el cual
se define el estilo con el que se dibujará (color de línea, color de
fondo, ancho de línea, etc.) De modo que creamos un atributo Paint en
nuestra clase y creamos un objeto en el constructor:
Paint
paint;
public
GameView(Context context) {
super(context);
paint
= new
Paint();
paint.setAntiAlias(true);
paint.setColor(Color.RED);
}
Ahora en nuestro método onDraw podemos indicarle al Canvas que dibuje un círculo aplicando como estilo el objeto Paint:
@Override
protected
void
onDraw(Canvas canvas) {
canvas.drawCircle(50,
50, 10, paint);
}
Los parámetros pasados al método drawCircle son x,y, el radio del circulo, y el objeto Paint respectivamente. Cabe destacar que las coordenadas y el
radio tienen como unidad el pixel.
Dibujando texto en pantalla con un tipo de fuente personalizada
Para dibujar un
texto, debemos utilizar el método drawText del objeto Canvas:
canvas.drawText("Laboratorio
de",
60, 110, paint);
canvas.drawText("Software
Libre",
50, 210, paint);
El tipo de fuente
y el tamaño del texto, lo debemos setear en el objeto paint:
paint.setTypeface(Typeface.createFromAsset(context.getAssets(),
"Snowtop.ttf"));
paint.setTextSize(48);
El archivo de
fuente, debemos colocarlo en la carpeta assets:
