lunes, 22 de septiembre de 2014

Dibujar con Android 1

Dibujar con Android 1.

Para dibujar en la pantalla simplemente debemos sobreescribir la función onDraw del componente en el cual deseamos dibujar. 

A continuación os pongo un ejemplo. He creado una clase que extiende de la clase View, en esta como podeis ver se sobreescribe la función onDraw y en ella se dibuja un circulo de color azul sobre fondo negro en el centro del componente.


package com.ljlg.dibuja;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.View;

public class DrawCircle extends View {

    private final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    public DrawCircle(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public DrawCircle(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public DrawCircle(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {

         // Calculamos el punto central del componente
        int cx = this.getWidth() / 2;
        int cy = this.getHeight() / 2;

        // Ponemos el fondo de color negro
        canvas.drawColor(Color.BLACK);

         // Dibujamos un circulo relleno de color azul
        paint.setStyle(Style.FILL_AND_STROKE);
        paint.setColor(Color.BLUE);
        canvas.drawCircle(cx, cy, 100, paint);

    }

}
 

Así pues lo único que debeis hacer es dibujar en el canvas aquello que se desee (circulos, líneas, un bitmap, texto, etc..)

En caso de que se desee que forzar la llamada a la función onDraw simplemente se debe hacer una llamada a la función invalidate().

Para añadir el componente creado simplemnete nos vamos a la actividad en la cual queremos que aparezca y lo añadirmos, tal y como se muestra a continuación


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.ljlg.dibuja.MainActivity" >

 <com.ljlg.dibuja.DrawCircle
        android:id="@+id/drawView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="1dp"
        android:layout_marginTop="1dp"/>



</RelativeLayout>


Como puede verse sólo es necesario añadir una etiqueta indicando la clase que implementa el componente.