Android SDK: Crea una aplicación de dibujo: Creación de una interfaz

Spanish (Español) translation by CYC (you can also view the original English article)

En esta serie, crearemos una aplicación para pintar con los dedos para Android utilizando la interacción táctil. El usuario podrá seleccionar desde una paleta de colores, elegir un tamaño de pincel, borrar, crear un nuevo dibujo o guardar su dibujo existente en la galería del dispositivo.

En esta primera parte de la serie, obtendremos la configuración de la interfaz de usuario de la aplicación, luego en la segunda parte implementaremos la funcionalidad de dibujo. En la parte final agregaremos la capacidad del usuario para borrar, comenzar un nuevo dibujo, guardar dibujos existentes y elegir tamaños de pincel y borrador.

Formato de serie

Esta serie sobre Crear una aplicación de dibujo se dividirá en tres partes:

Vista previa final

Arriba hay una captura de pantalla de la aplicación que esta serie te enseñará a construir. ¡Espero que tus dibujos sean mejores que los míos!

1. Crea un proyecto de Android

Paso 1

Comienza un nuevo proyecto de Android en Eclipse, eligiendo nombres de aplicaciones y paquetes. Estamos utilizando un nivel mínimo de API de 14 y un objetivo de 17 para el código en este tutorial.

Permite que Eclipse cree una actividad y un diseño principal en blanco; puedes usar los nombres predeterminados.

Paso 2

Abre tu archivo Manifiesto de proyecto y cambia a la pestaña de edición XML. Tus niveles de actividad y SDK ya deberían estar configurados. Agrega lo siguiente a tu etiqueta de apertura del elemento de actividad, forzando a la aplicación a usar solo el retrato:

1
2	android:screenOrientation="portrait"

Paso 3

Antes de comenzar a construir la interfaz, definamos algunos números que usaremos a lo largo de la serie. En la carpeta "res/values" de tu aplicación, si Eclipse aún no lo ha creado, agrega el "dimens.xml" file - si ya está allí, simplemente puedes agregarle nuevos valores. El esquema debe ser el siguiente:

1
2	<resources>
3	</resources>

Si Eclipse creó el archivo, puede que ya tengas algunos valores. Vamos a utilizar tres tamaños posibles de pincel/borrador: pequeño, mediano y grande. Necesitamos definir el tamaño para cada una como una dimensión y un valor entero para que podamos usar estas medidas tanto en el diseño XML como en los recursos dibujables y el código de Java:


<!-- Brush sizes -->
<dimen name="small_brush">10dp</dimen>
<integer name="small_size">10</integer>
<dimen name="medium_brush">20dp</dimen>
<integer name="medium_size">20</integer>
<dimen name="large_brush">30dp</dimen>
<integer name="large_size">30</integer>

Los valores de dimensión y entero en cada tamaño son los mismos, de modo que la IU indica el tamaño del pincel, ya que funcionará cuando el usuario dibuje con él.

2. Crea una clase de vista personalizada

Paso 1

Vamos a definir una clase de vista personalizada en la que tendrá lugar. En el paquete fuente de tu aplicación, crea una nueva clase. Llámalo "DrawingView" y selecciona "android.view.View" como la Superclase. La nueva clase debe tener el siguiente esquema:


public class DrawingView extends View
{

}

Paso 2

En tu nueva clase View, necesitarás las siguientes declaraciones de importación además de la importación de View que Eclipse debería haber agregado para ti:

1
2	import android.content.Context;
3	import android.util.AttributeSet;

Agrega un método constructor a la clase:


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

Agregaremos una instancia de la Vista personalizada al archivo de diseño XML. Agrega el método de ayuda especificado a la clase:

1
2	private void setupDrawing(){
3	//get drawing area setup for interaction
4	}

Implementaremos este método en la próxima parte de la serie, además de agregar otros métodos a la clase.

3. Diseñando la plantilla de la actividad

Paso 1

Abre el archivo XML de cadenas de "res/values" de tu aplicación y agrega algunas cadenas de texto que usaremos en el diseño:


<string name="start_new">New</string>
<string name="brush">Brush</string>
<string name="erase">Erase</string>
<string name="save">Save</string>
<string name="paint">Paint</string>

Abre el archivo de diseño principal de la aplicación y cambia a la pestaña XML para editar el código. El contenido de la pantalla de actividad será más fácil de implementar utilizando diseños lineales. Reemplaza el contenido del archivo de diseño con el siguiente esquema:


<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="#FFCCCCCC"
	android:orientation="vertical"
	tools:context=".MainActivity" >

</LinearLayout>

Establecemos la orientación vertical y un color de fondo gris.

Paso 2

Dentro del diseño lineal principal, agrega otro para mantener los botones de la interfaz de usuario en la parte superior de la pantalla:


<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:layout_gravity="center"
    android:orientation="horizontal" >
</LinearLayout>

Esta vez, el diseño es horizontal con una altura establecida y centrado aplicado. Dentro de este diseño, agregaremos los botones para comenzar un nuevo dibujo, seleccionar un pincel, seleccionar un borrador y guardar un dibujo. Estamos utilizando las siguientes imágenes para estos botones, aunque puedes crear las tuyas si lo prefieres:

Copia las imágenes en la(s) carpeta(s) dibujable(s) de tu aplicación. Si creas la tuya, puedes seleccionar densidades particulares. Para completar la serie de tutoriales sin seleccionar densidades de pantalla particulares, simplemente puedes crear una carpeta llamada "dibujable" y agregarle todos tus recursos dibujables.

Ahora agreguemos un ImageButton para cada opción en la Actividad. Comienza con el botón para crear un nuevo dibujo dentro del segundo diseño lineal:


<ImageButton
    android:id="@+id/new_btn"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:contentDescription="@string/start_new"
    android:src="@drawable/new_pic" />

Utilizaremos el ID para responder a los clics de los botones en la clase Actividad. Especificamos la nueva imagen de icono de botón como fuente para ImageButton y agregamos una cadena de descripción de contenido.

Luego agrega el botón de pincel:


<ImageButton
	android:id="@+id/draw_btn"
	android:layout_width="wrap_content"
	android:layout_height="fill_parent"
	android:contentDescription="@string/brush"
	android:src="@drawable/brush" />

Ahora agrega el botón borrador:


<ImageButton
	android:id="@+id/erase_btn"
	android:layout_width="wrap_content"
	android:layout_height="fill_parent"
	android:contentDescription="@string/erase"
	android:src="@drawable/eraser" />

Al hacer clic en el botón Pincel o borrador, se le pedirá al usuario que seleccione un tamaño; lo implementaremos más adelante. Luego agrega el botón guardar:


<ImageButton
	android:id="@+id/save_btn"
	android:layout_width="wrap_content"
	android:layout_height="fill_parent"
	android:contentDescription="@string/save"
	android:src="@drawable/save" />

Eso es todo para los botones de control de diseño lineal superior.

Paso 3

Después del botón de diseño lineal, pero aún dentro del diseño lineal externo en el archivo, agreguemos ahora una instancia de la clase de vista personalizada que creamos:


<com.example.drawingfun.DrawingView
	android:id="@+id/drawing"
	android:layout_width="fill_parent"
	android:layout_height="0dp"
	android:layout_marginBottom="3dp"
	android:layout_marginLeft="5dp"
	android:layout_marginRight="5dp"
	android:layout_marginTop="3dp"
	android:layout_weight="1"
	android:background="#FFFFFFFF" />

Como puedes ver, puedes agregar una Vista personalizada a tus diseños de la misma manera que los elementos estándar de la interfaz de usuario de Android. Establecemos las propiedades generales de diseño, un fondo blanco para el dibujo y proporcionamos una identificación para hacer referencia a la Vista en Java. Al recuperar una referencia a esta instancia de la clase de vista personalizada, nuestra actividad podrá acceder a los métodos que definimos en la declaración de clase de vista que creamos.

Paso 4

Ahora agreguemos la paleta de colores. Después del elemento Vista personalizado, agrega otro Diseño lineal para los botones de la paleta:


<LinearLayout
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_gravity="center"
	android:orientation="vertical" >
</LinearLayout>

Este elemento contendrá dos filas de botones, así que ingresa dos diseños lineales más para estos. Coloca lo siguiente dentro del que acabas de agregar:


<!-- Top Row -->
<LinearLayout
	android:id="@+id/paint_colors"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:orientation="horizontal" >
</LinearLayout>
<!-- Bottom Row -->
<LinearLayout
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:orientation="horizontal" >
</LinearLayout>

La primera fila tiene un ID porque vamos a usarla en Java cuando la aplicación comience a establecer el primer color predeterminado seleccionado. De esta manera, el usuario puede comenzar a dibujar de inmediato. Para cada color, vamos a utilizar la siguiente estructura de ImageButton:


<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FF660000"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FF660000" />

No agregues esto a tu archivo de diseño todavía; lo haremos en breve, por ahora mira el código. Usamos uno de los valores de dimensión que definimos para el botón de color. Observa que los atributos de fondo y etiqueta son los mismos: el fondo es para la apariencia del botón en la interfaz de usuario, mientras que la etiqueta es para que podamos establecer el color de pintura de acuerdo con lo que el usuario haga clic en el código de Actividad Java. El elemento incluye un método para ejecutar al hacer clic en el botón. Implementaremos esto en la clase Actividad la próxima vez. También especificamos un dibujante llamado "pintura". Agrega esto al proyecto ahora, crea un nuevo archivo en la(s) carpeta(s) dibujable(s) del proyecto y nómbralo "paint.xml". Ingresa el siguiente código en el nuevo archivo dibujable:


<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
	<shape android:shape="rectangle" >
		<stroke
			android:width="4dp"
			android:color="#FF999999" />
		<solid android:color="#00000000" />
		<padding
			android:bottom="0dp"
			android:left="0dp"
			android:right="0dp"
			android:top="0dp" />
	</shape>
</item>
<item>
	<shape xmlns:android="http://schemas.android.com/apk/res/android" >
		<stroke
			android:width="4dp"
			android:color="#FF999999" />
		<solid android:color="#00000000" />
		<corners android:radius="10dp" />
	</shape>
</item>
</layer-list>

Esto es menos complejo de lo que parece a primera vista. Para crear una apariencia de botón redondeado, usamos dos formas de Drafting, uno con un contorno de rectángulo y el otro con un trazo redondeado. Los trazos tienen un color gris, con una transparencia en el centro a través de la cual se verá el color de fondo de cada botón (el color de fondo es el color representado por el botón).

De vuelta en el archivo de diseño, dentro del diseño de la fila superior en la sección de la paleta de colores, agrega los siguientes elementos de ImageButton para representar los primeros seis colores, utilizando la estructura que describimos anteriormente:


<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FF660000"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FF660000" />

<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FFFF0000"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FFFF0000" />

<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FFFF6600"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FFFF6600" />

<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FFFFCC00"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FFFFCC00" />

<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FF009900"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FF009900" />

<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FF009999"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FF009999" />

Cada botón es idéntico, aparte de los colores definidos en el fondo y los atributos de etiqueta. Agrega los siguientes seis en el diseño de la fila inferior:


<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FF0000FF"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FF0000FF" />

<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FF990099"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FF990099" />

<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FFFF6666"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FFFF6666" />

<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FFFFFFFF"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FFFFFFFF" />

<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FF787878"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FF787878" />

<ImageButton
	android:layout_width="@dimen/large_brush"
	android:layout_height="@dimen/large_brush"
	android:layout_margin="2dp"
	android:background="#FF000000"
	android:contentDescription="@string/paint"
	android:onClick="paintClicked"
	android:src="@drawable/paint"
	android:tag="#FF000000" />

Cambia los colores si lo deseas, pero asegúrate de usar el mismo valor de color en el fondo y los atributos de etiqueta para cada botón. Ahora deberías poder ver el diseño en la pestaña Diseño gráfico en Eclipse:

Conclusión

¡Ya hemos completado la primera parte de la serie! Tu aplicación no hará mucho en este momento, pero en la siguiente parte implementaremos las funciones de dibujo, detectaremos y responderemos a la interacción táctil, y le permitiremos al usuario elegir los colores. En la parte final, mejoraremos esta funcionalidad para permitir que el usuario borre, elija tamaños de pincel y borrador, comience un nuevo dibujo o guarde el dibujo actual.

En futuros tutoriales de seguimiento de esta serie, veremos el uso de rellenos de patrón en las funciones de dibujo, utilizando opacidad y admitiendo la interacción no táctil (por ejemplo, trackball, lápiz y mouse). Podrás utilizar estos tutoriales posteriores para desarrollar las habilidades que aprendes en esta serie. ¡Debes estar pendiente!