Programación en Android - Actividad Menú -1

6.5.0.- Programación en Android – Actividad Menú (I)

Ahora que ya tenemos la ActividadSplash más o menos lista vamos a trabajar con la ActividadMenu, y en su desarrollo iremos viendo otros tipos de layouts y la forma de utilizar listas (ListView). Primero veamos un boceto de como debería de quedar el diseño de nuestra ActividadMenu:

Para este diseño utilizaremos un RelativeLayout, en el que colocaremos las imágenes (ImageView), los textos (TextView) y una lista (ListView), las imágenes inferiores estarán rotando en todo momento.

Primero vamos a añadir unos recursos que utilizaremos posteriormente:

Las imágenes ya las hemos añadido anteriormente (los símbolos de correcto e incorrecto) así que los reutilizaremos. Además de esto, añadiremos un recurso en la carpeta drawable, que será el que utilizaremos para el fondo, podéis crear uno vosotros mismos, o bajar este que es el que utilizamos en el proyecto. No es muy vistoso, pero es sólo por poner un ejemplo. Le llamaremos piel_237x397.jpg.

Añadiremos también los siguientes recursos, cada uno en su fichero correspondiente:

Nombre recurso	Valor	Tipo
dim_Titulo_Menu	50sp	Dimensión. (Fichero dimension.xml)
dim_Opciones_Menu	30sp	Dimensión.
color_Titulo_Menu	#00f	Color. Fichero colors.xml.
color_Titulo_Menu_sombra	#AAAA	Color.
color_Opciones_Menu	#AA0	Color.
color_Sombra_Opciones_Menu	#AFFF	Color.
menu	"Menú"	String. Fichero strings.xml.
array_OpcionesMenu	Jugar Configuración Puntuaciones Ayuda Salir	Éste es un recurso de tipo string-array, y contiene varias cadenas de texto, cada cadena es un item.

En el Motodev studio los iconos para añadir arrays son los siguientes:

1. 
   Para añadir un recurso de tipo String-array.
2. Para añadir un item a nuestro string-array.

Este recurso de string array, tambíen podría haber sido sustituido por varios de string normal, cada uno conteniendo el texto indicado anteriormente, pero se pone así como ejemplo (Además de ser más práctico).

Continuaremos editando (o creando en caso de no tenerlo) el fichero de layout menu.xml. En el editor gráfico, editamos el tipo de layout, pulsamos botón derecho sobre el tipo de layout en la vista de esquema, y seleccionamos “ChangeLayout”, y elegimos “Relative Layout”, el ID de éste será “RelativeLayout1”.

Ahora a este layout le añadimos un control ImageView, un TextView y otro ImageView, que vamos a proceder a modificar de la siguiente manera:

El primer ImageView editamos la propiedad source (“Src” en propiedades”) para que apunte al icono de correcto : ”@drawable/simbolo_correcto”.

En el segundo ImageView ponemos su source para que apunte al símbolo de incorrecto: “@drawable/simbolo_incorrecto”.

Para ambos controles realizamos los siguientes cambios:

Propiedad	Valor
Layout height	wrap_content
Layout width	wrap_content
Adjust View Bounds	true
Layout align parent top	true
Layout align parent right	true (Sólo para el símbolo incorrecto)
Layout align parent left	true (Sólo para el símbolo correcto)
Scale Type	fitXY
Max height	@dimen/dim_Titulo_Menu
Max width	@dimen/dim_Titulo_Menu

Ahora editamos el TextView que irá en el medio de las imágenes que acabamos de añadir. Cambiamos las siguientes propiedades:

Propiedad	Valor	Descripción.
Gravity	Center	Tipo de alineado del texto.
Id	@+id/textView_menu	Nombre del recurso.
Shadow color	@color/color_Titulo_Menu_Sombra	Color de la sombra del texto.
Shadow dx	10.0	Desplazamiento X de la sombra con respecto al texto. (float)
Shadow dy	10.0	Desplazamiento Y de la sombra con respecto al texto. (float)
Shadow radius	3.0	Radio de la sombra (float).
Text	@string/menu	Recurso cadena de texto.
Text color	@color/color_Titulo_Menu	Recurso de color.
Text Size	@dimen/dim_Titulo_Menu	Recurso de dimension.
Text Style	Bold	Para que aparezca en negrita.
Layout align bottom	@+id/textView_menu	Alinea la linea base con la línea base de dicho recurso.
Layout Height	wrap_content
Layout center horizontal	true	Centrado horizontal.

Al terminar con la línea superior, añadiremos un ListView, que será el que muestre las opciones a escoger.

A este ListView le daremos las siguiente propiedades:

Propiedad	Valor	Descripción
Id	@+id/listview_Opciones_Menu	Identificador de recurso.
Layout above	@+id/ImageView01	No confundir con ImageView1, estos son los inferiores. Indica que la línea inferior de este recurso está situado encima de ese recurso.
Layout below	@+id/textView_menu	Recurso a partir del cuál se pinta este. La parte baja de ese recurso indica dónde comienza la parte alta de éste.
Layout center horizontal	true	Centrado horizontal.
Layout center vertical	true	Centrado vertical.
Layout height	wrap_content
Layout width	fill_parent

Terminaremos ahora añadiendo dos imágenes inferiores, que por aprovechar recursos utilizaremos los mismos símbolos de correcto e incorrecto, a los cuales les pondremos las propiedades como a los superiores, pero cambiaremos las siguientes:

Propiedad	Valor
Layout align parent bottom	true
Layout align parent top	false
ID	@+id/ImageView01 (para el símbolo de correcto)
ID	@+id/ImageView02 (para el símbolo de incorrecto)

Dentro de poco, nuestro layout se parecerá a lo siguiente:

En el siguiente capítulo añadiremos un par de recursos de animación, y trabajaremos nuestro ListView...

Ver. 1.0 – Revisión 22/02/2012