Android / Creacion de una vista en un archivo independiente

Bienvenidos sean a este post, en nuestro post anterior hemos creado una app de ejemplo para poder ver ciertas clases de graficos y tenemos una clase llamada EjemploView que extiende a la clase View pero esta lamentablemente solo funcionara para la clase EjemploGraficoActivity pero que sucederia si nosotros necesitaremos utilizarla para otra clase o en nuestro layout, simple no podriamos utilizarla. Para ello debemos separar dicha clase y utilizarla por solitario pongamos manos a la obra para poder trabajar sobre ella.

Abramos nuestra app por medio de Android Studio, vamos a nuestra clase EjemploGraficosActivity y cortaremos la siguiente parte:

public class EjemploView extends View {
    private ShapeDrawable miImagen;

    public EjemploView(Context context){
        super(context);
        miImagen = new ShapeDrawable(new OvalShape());
        miImagen.getPaint().setColor(0xff0000ff);
        miImagen.setBounds(10,10,310,60);
        setBackgroundResource(R.drawable.degradado);
    }

    @Override
    protected void onDraw(Canvas canvas){
        miImagen.draw(canvas);
    }
}

Ahora crearemos una nueva clase, para ello haremos un click con el boton derecho sobre el recurso de los contenedores de las clases Java, seleccionaremos New -> Java class como se ve en la siguiente imagen

Una vez seleccionado aparecera el siguiente cuadro

Aca modificaremos el campo Name por EjemploView y el resto debe quedar como se ve en la imagen, pulsen Ok para generar la nueva clase y quedara como se ve en la siguiente imagen

Ahora si abrimos la clase tendremos el siguiente codigo:

package com.tinchicus.ejemplograficos;

public class EjemploView {
}

Lo reemplazaremos por el siguiente codigo:

package org.example.ejemplograficos;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.view.View;

public class EjemploView extends View {
    private ShapeDrawable miImagen;

    public EjemploView(Context context){
        super(context);
        miImagen = new ShapeDrawable(new OvalShape());
        miImagen.getPaint().setColor(0xff0000ff);
        miImagen.setBounds(10,10,310,60);
        setBackgroundResource(R.drawable.degradado);
    }

    @Override
    protected void onDraw(Canvas canvas){
        miImagen.draw(canvas);
    }
}

Este no deja de ser la seccion de codigo cortada de nuestra clase anterior pero a su vez les agregue los paquetes necesarios para poder trabajar, una vez hecho esto podemos probar nuestra app nuevamente, deberan obtener el mismo resultado al post anterior

Nota: Recuerden haber cortado o eliminado esa parte de la clase
EjemploGraficoActivity porque sino ocasionara un error al compilarlo.

Ahora vamos a ver unos conceptos basicos, si nosotros necesitamos crear nuevas vistas deberemos extender la clase View con nuestra nueva clase y en la clase deberemos crear un constructor, y sobrecargar los metodos onSizeChanged() y onDraw() como minimo, sobrecargar una funcion es basicamente declarar una funcion existente pero con distintos parametros (el lenguaje se encarga de diferenciarlas por medio de ellos) y poder ser utilizadas de distintas formas, la estructura basica es aproximadamente de esta forma:

public class MiVista extends View {

	public MiVista(Context context, AttributeSet attrs) {
		super(context, attrs);
		... instrucciones ...
		}

	@Override
	protected void onSizeChanged(int ancho, int alto,
			int ancho_anterior, int alto_anterior) {
		... instrucciones ...
		}

	@Override
	protected void onDraw(Canvas canvas) {
		... instrucciones ...
		}
}


Como pueden ver el primer bloque es nuestro constructor, el segundo bloque es la sobrecarga del metodo onSizeChanged() y el ultimo bloque es la otra sobrecarga para el metodo onDraw() para entender mejor este tema vamos a hacer una serie de modificaciones a nuestra app para poder probar como podemos utilizar nuestra nueva clase y generar nuevas vistas, procedamos primero a modificar nuestra clase EjemploView de la siguiente forma:

package org.example.ejemplograficos;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.util.AttributeSet;
import android.view.View;

public class EjemploView extends View {
    private ShapeDrawable miImagen;

    public EjemploView(Context context, AttributeSet attrs){
        super(context, attrs);
        miImagen = new ShapeDrawable(new OvalShape());
        miImagen.getPaint().setColor(0xff0000ff);
    }

    @Override
    protected void onSizeChanged(int ancho, int alto, int ancho_anterior,
                                 int alto_anterior){
        miImagen.setBounds(0,0,ancho,alto);
    }

    @Override
    protected void onDraw(Canvas canvas){
        miImagen.draw(canvas);
    }
}

Como pueden ver por medio del constructor creamos nuestra figura, luego en el metodo onSizeChanged() setearemos al cuadro para utilizar nuestro grafico y en el metodo onDraw() dibujara nuestra figura ahora procederemos a modificar nuestro archivo activity_main.xml, veamos su codigo actual:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:background="@drawable/degradado"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".EjemploGraficosActivity">

    <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Hello World!"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Lo reemplazaremos por el siguiente codigo:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

</LinearLayout>

Ahora haremos una pequeña modificacion en nuestro layout para ello debemos pasar a la solapa Design como se ve en la siguiente imagen

Cuando pasemos a la solapa Design, ahora deberemos agregar las vistas creadas por nosotros, para ello en Palette deberan buscar la opcion Project (puede ser Custom view en algunos casos) donde aparecen todas nuestras vistas generadas, como se ve en la siguiente imagen aparecera una sola

Ahora seleccionaremos nuestra vista y pulsaremos dos veces Enter para agregarla dos veces a nuestro Layout, debera quedar como se ve en la siguiente imagen

Ahora volveremos a ver el codigo de nuestro layout por medio de la solapa text

Veamos nuestro nuevo codigo del layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.tinchicus.ejemplograficos.EjemploView
        android:id="@+id/ejemploView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.tinchicus.ejemplograficos.EjemploView
        android:id="@+id/ejemploView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Vamos a modificar el codigo de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.tinchicus.ejemplograficos.EjemploView
        android:id="@+id/ejemploView"
        android:layout_width="400px"
        android:layout_height="200px"  />

    <com.tinchicus.ejemplograficos.EjemploView
        android:id="@+id/ejemploView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Como pueden ver modificamos la altura y el ancho de nuestras nuevas vistas para poder mostrarla en pantalla, ahora solo nos falta una modificacion mas para poder probar nuestra app para ello debemos volver a nuestra clase EjemploGraficosActivity para modificar la siguiente linea:

setContentView(new EjemploView(this));

La modificaremos por esta linea:

setContentView(R.layout.activity_main);

Esta linea no creara una nueva vista sino aprovechara nuestro nuevo layout, ahora si lo probamos obtendremos un resultado como el siguiente

Como pueden ver nuestro layout genero los ovalos por medio de la clase y por el layout donde estan nuestras vistas que invocan a las clases.

En resumen, hemos aprendido como separar clase propia para extender a una clase base, hemos visto como una vez creada estas quedan a nuestra disposicion en la solapa design para poder agregarlas como parte del layout, hemos visto las leves modificaciones que se necesitan para poder trabajar con ellas, los requerimientos minimos para poder crear nuestra clase, y que es muy basicamente la sobrecarga de una funcion o metodo, espero les haya sido util sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.