6.4.0.- Programación en Android: Creando nuestra Splash (I)

6.4.0.- Programación en Android: Creando nuestra Splash (I)

Comenzaremos a realizar el diseño del layout para nuestra actividad Splash, y para ello es conveniente realizar primero un pequeño boceto de lo que tenemos en mente para no perder después tiempo diseñando el layout.

La disposición de nuestros elementos será como muestra en la figura (más o menos):

Los títulos serán recursos de texto, aunque podríamos haber puesto imágenes. En el centro irán cuatro imágenes, las podéis bajar del enlace del proyecto, aunque yo os aconsejo crear unas propias, ya que posiblemente al ponerlas os va a cambiar el layout y tendréis que pelearos un poco y experimentar, por último abajo de todo pondremos información sobre el creador, copyright, versión, etc.

Este sería el esquema básico de disposición, aunque después le vamos a añadir una serie de animaciones a cada uno de estos elementos, para hacer más bonita la cosa o también podéis realizar uno completamente diferente.

Debemos recordar al realizar diseños de layouts para android que éstos van a ser ejecutados en dispositivos con diferentes configuraciones de pantalla, e incluso en el mismo dispositivo podría ser ejecutado en vertical o horizontal.

Vamos a abrir nuestro layout splash.xml, que de momento sólo tiene un TextView que contiene el título splash. Para nuestro ejemplo, después de mirar el esquema vemos que vamos a necesitar dos tipos de controles, uno va a ser el TextView, en el que meteremos los textos, y otro el ImageView, que será donde pongamos las imágenes. Los controles son como pequeños rectángulos que controlan una parte de la pantalla.

Además vamos a necesitar otro tipo de controles que son los que nos ayudaran a cambiar la disposición en pantalla de los demás, permitiéndonos poner los controles "hijos" (los que cuelgan de estos) de una forma ordenada.

A este tipo de controles, que cambian la disposición en pantalla de los widgets, se les llaman controles de layout. (Layout control). Pueden ser los siguientes:

Nombre Control Layout	Descripción	Notas
LinearLayout	Cada ventana hija se pone después de la anterior, en una única fila o columna.	Controla la orientación, vertical o horizontal.
RelativeLayout	Cada ventana hija se pone en relación a otras vistas en el layout, o relativa a las esquinas del layout padre.	Tiene muchos atributos para cambiar la alineación.
FrameLayout	Cada ventana hija está apilada dentro del marco (frame), relativo a la esquina superior izquierda. Los controles se pueden superponer.	Utilizado cuando el orden y la disposición de los controles es importante y se usa con los ajustes de gravedad (gravity) adecuados.
TableLayout	Cada ventana hija es una celda en una rejilla de filas y columnas.	Cada fila necesita un elemento de tipo "TableRow".

También había otras disposiciones como AbsoluteLayout, pero han quedado en desuso, e incluso con nuevas versiones de la API de Android pueden aparecer otros.

Tanto los layouts como los controles hijos tienen ciertos atributos que nos ayudan a controlar su apariencia. Hay algunos atributos que son comunes para todos, como pueden ser android:layout_width y android:layout_height, que controlan el ancho y alto de cada control. Los valores de estos atributos pueden ser dados en pixels (o otras unidades), o utilizar los atributos fill_parent o wrap_content. Utilizando fill_parent se le indica al control que utilice todo el ancho del layout padre. Wrap_content hace que la ventana se ajuste al tamaño del contenido. (Experimentar con ellos, es mejor verlo en la práctica).

Veamos como quedaría nuestro diseño:

A partir de aquí sabemos que tenemos que añadir más recursos.

Añadir recursos

Vamos a añadir los recursos que necesitamos. Hemos visto que necesitamos varias cadenas de texto, así que abrimos el fichero strings.xml en la carpeta values, y procedemos a añadirle las siguientes cadenas:

Clave	Valor
splash_Titulo1	CORRECTO
splash_Titulo2	INCORRECTO
Splash_Informacion	Versión 1.00\n © Copyright 2012 Pafh Software\n pafh99.blogspot.com\nTodos los derechos reservados.

Nota: El \n es un valor que indica "retorno de carro".

Además borramos el recurso de la cadena de texto "Splash" ya que no lo vamos a utilizar más.

También añadimos los recursos de imagen en la carpeta res\drawable. Estos recursos son simbolo_correcto.png y simbolo_incorrecto.png, pero podéis crear los vuestros y llamarle como queráis (siguiendo las pautas para los nombres de los recursos). Lo ideal sería haber creado varios dependiendo de la resolución, como cuando creamos el icono de la aplicación, y meterlos en cada una de las carpetas para las distintas resoluciones. (drawable-hdpi, drawable-mdpi, drawable-ldpi, drawable-xhdpi).

Añadiendo recursos de color

Crearemos otro fichero dentro de la carpeta values con el título colors.xml que tendrá varios recursos que utilizaremos posteriormente. Estos recursos son parámetros de colores (color) que emplearemos en los TextViews. Serían por ejemplo:

Nombre recurso	Valor	Color
color_Titulo1	#00ff00	Verde
color_Titulo2	#ff0000	Rojo
color_Informacion	#ffffff	Blanco
color_FondoInformacion	#0000ff	Azul

Debemos recordar cuando pulsemos en añadir recursos, de la lista que despliega elegir el que pone Color.

Añadiendo recursos de dimensiones

Crearemos ahora otro fichero llamado dimension.xml (en la carpeta values). En este fichero pondremos varios recursos de valores de dimensiones que utilizaremos después para darle tamaño al texto. Añadiremos los siguientes recursos de dimensión a este fichero:

Nombre recurso	Valor	Descripción
dim_Titulo1	50dp	Texto del primer Título.
dim_Titulo2	40dp	Texto del segundo Título.
dim_Informacion	15dp	Texto de información.
dim_InformacionEspaciado	3dp	Espaciado entre las líneas.

Bien, ahora guardamos todo y "al tema Josema".

(Hablaremos sobre las unidades de medida en otro capítulo.)

Construyendo el Layout

Ahora vamos a añadir los recursos que creamos anteriormente al layout de nuestra ventana de Splash, así que primero nos aseguramos de que esté completamente vacía, para ello podemos borrar los elementos a mano en el editor gráfico, o podemos ir al editor xml y borrar todo excepto la cabecera (<?xml version="1.0" encoding="utf-8"?>)

1- A partir de aquí si hemos borrado todo no nos mostrará nada el GUI, así que elegimos el control LinearLayout y lo arrastramos a la vista.

Ahora procederemos a cambiar algunas propiedades de este LinearLayout, para ello debemos tener abierta la pestaña de propiedades, en caso contrario pulsamos con el botón derecho en la ventana del teléfono dentro del editor de layouts y seleccionamos la última opción (Mostrar en-> Propiedades). Nos aparecerá la ventana de las propiedades que la podemos desplazar a dónde más cómodos nos sintamos con ella.

Con la ventana de propiedades abierta (aunque también lo podemos hacer en el menú contextual) cambiamos los siguientes parámetros de nuestro LinearLayout:

Propiedad	Valor	Descripción
Background	@android:color/darker_gray	Color de fondo. Este valor está en los recursos internos (*)
Orientation	Vertical	Orientación del Layout, así es tipo columna.

* Para mostrar la ayuda del SDK, nos ponemos encima del elemento y pulsamos SHIFT+F2. Fijaos en la imagen, seleccionamos R, y pulsamos las teclas mencionadas, con lo que nos abre la ayuda del SDK sobre dicho elemento.

2- Añadimos un control de tipo TextView. En sus propiedades cambiamos lo siguiente:

Propiedad	Valor	Descripción
Id	@+id/textView_Titulo1	Nombre del identificador que tendrá en el archivo de recursos. El + indica que se añada.
Layout width	fill_parent	Indica que se ajuste al ancho de la ventana padre. (El LinearLayout).
Layout height	wrap_content	Indica que se ajuste el alto al contenido de este control.
Text	@string/splash_Titulo1	El recurso string que añadimos antes. Si pulsamos en los [...] nos aparece una lista con los recursos.
Gravity	Center	Alineación central del texto.
Text Size	@dimen/dim_Titulo1	Tamaño del texto. Lo pusimos antes en las dimensiones.
Text Color	@color/color_Titulo1	Color del Texto. Lo especificamos antes en los recursos.
Background	@color/color_Titulo2	Color que especificamos en los recursos. Color del fondo del cuadro de texto.

3- Insertamos un TableLayout, y establecemos las siguientes propiedades:

Propiedad	Valor	Descripción
Id	@+id/tableLayout_Tabla1	Nombre del identificador que tendrá en el archivo de recursos. El + indica que se añada.
Layout width	fill_parent	Indica que se ajuste al ancho de la ventana padre.
Layout height	wrap_content	Indica que se ajuste el alto al contenido de este control.
StretchColums	*	Para que ajuste las columnas a todo el ancho de la pantalla, en caso de ocupar menos. El asterisco indica a partir de que índice de columna se aplica.
ShrinkColums	*	Para que ajuste las columnas que no cojan en la pantalla, en caso de ocupar más. * Indica el índice a partir del que se cuentan.

Al añadir el TableLayout, nos a añadido también dentro una serie de TableRow, debemos borrarlos y quedarnos sólo con dos de ellos (TableRow1 y TableRow2).

Seleccionamos el TableRow1 y arrastramos a él un control de tipo ImageView. En caso de que no lo veamos dónde debería estar entonces miramos en la vista de esquema, y lo arrastramos a la posición adecuada. Al soltar el control nos pregunta que imagen queremos asignarle de las que tenemos en los recursos, para este primer control ImageView hacemos que sea el contenedor de simbolo_correcto.png. Arrastramos otro control ImageView a esta tabla, y cuando nos pregunte por el recurso le indicamos que es simbolo_incorrecto.png.

Repetimos los mismos pasos para el control TableRow2, pero alternamos las imágenes tal como teníamos en el boceto.

4-Después del TableLayout insertamos otro control de tipo TextView y establecemos las propiedades siguientes:

Propiedad	Valor	Descripción
Id	@+id/textView_Titulo2	Nombre del identificador que tendrá en el archivo de recursos. El + indica que se añada.
Layout width	fill_parent	Indica que se ajuste al ancho de la ventana padre. (El LinearLayout).
Layout height	wrap_content	Indica que se ajuste el alto al contenido de este control.
Text	@string/splash_Titulo2	El recurso string que añadimos antes. Si pulsamos en los [...] nos aparece una lista con los recursos.
Gravity	Center	Alineación central del texto.
Text Size	@dimen/dim_Titulo2	Tamaño del texto. Lo pusimos antes en las dimensiones.
Text Color	@color/color_Titulo2	Color del Texto. Lo especificamos antes en los recursos.
Background	@color/color_Titulo1	Color que especificamos en los recursos. Color del fondo del cuadro de texto.

5-Insertamos el último control TextView, y establecemos los siguientes atributos:

Propiedad	Valor	Descripción
Id	@+id/textView_splash_Informacion	Nombre del identificador que tendrá en el archivo de recursos. El + indica que se añada.
Layout width	fill_parent	Indica que se ajuste al ancho de la ventana padre. (El LinearLayout).
Layout height	fill_parent	Indica que se ajuste el alto al contenido que queda libre.
Text	@string/splash_Informacion	El recurso string que añadimos antes. Si pulsamos en los [...] nos aparece una lista con los recursos.
Gravity	Center	Alineación central del texto.
Text Size	@dimen/dim_Informacion	Tamaño del texto. Lo pusimos antes en las dimensiones.
Text Color	@color/color_color_Informacion	Color del Texto. Lo especificamos antes en los recursos.
Background	@color/color_FondoInformacion	Color que especificamos en los recursos. Color del fondo del cuadro de texto.
Line spacing extra	@dimen/dim_InformacionEspaciado	Espaciado extra entre las líneas de texto.

Si hemos hecho todo bien, veremos como las imágenes o el texto no quedan como deberían o no cogen en la pantalla (probad con varios tamaños y veréis), así que vamos a ajustarlas.

Seleccionamos el control TableLayout_Tabla1, y en el parámetro "Layout weight" lo cambiamos a 1. Esto también lo hacemos para el control TableRow1 y TableRow2. Este parámetro indica el "peso" o importancia del control con relación a otros, o los "derechos" de este control sobre el tamaño del área de pantalla a ocupar. Podéis ver como cambia la cosa.

Seleccionamos ahora las cuatro imágenes, y cambiamos la propiedad "Scale Type" a fitXY. Esto hace que se ajuste al ancho y alto disponibles en la fila. Cambiamos también la propiedad "Adjust view bounds" a true. Esta propiedad indica que ajuste los límites del ImageView para que guarde la relación de aspecto (que no se distorsione).

Por último damos otros toques aquí y allá, como cambiar el "Layout Gravity" de las imágenes para hacer que estén centradas, etc...

Continuaremos en el siguiente capítulo "tuneando" con más añadidos nuestra splash screen.

Podéis bajar el código de este proyecto de aquí.

Las imágenes están aquí.

Ver. 1.0 – Revisión 2.2.2012