Menús en Android (1ra Parte)

En este artículo vamos a hablar sobre los menús en Android, un recurso importante para nuestras aplicaciones cuando queremos mostrar opciones secundarias o queremos simplificar espacio dentro de la vista. En Android existen tres tipos diferentes de menús:

· Menús principales: De estos decir que son los más habituales, aparece cuando se oprime el botón menú del dispositivo en la parte inferior del mismo.

· Submenús: Son usados para mostrar opciones secundarias y se pueden mostrar al pulsar una opción del menú principal.

· Menús Contextuales: Aparece cuando se hace una pulsación larga sobre algún elemento de la vista de la aplicación.

En este artículo hablaremos sobre el primer tipo de menú y dejaremos los otros tipos de menú para próximos artículos.

Los menús los podemos implementar de dos formas en nuestra aplicación, una mediante la definición en un fichero XML y la segunda mediante código. En este artículo abordaremos la primera por ser la que más utilizo por su rápida implementación.

Para entender el tema de los menús pues nada mejor que llevarlo a la práctica y para esto le pondremos unos menús a la app que comenzamos en los artículos anteriores.

Para diseñar un menú es necesario crear el fichero menú.xml en la carpeta res / menú. En nuestra app pondremos un menú con tres opciones, por lo que el diseño quedaría así:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:id="@+id/Menu1" android:title="Opción 1" 
	      android:icon="@drawable/tag"></item>
	<item android:id="@+id/Menu2" android:title="Opción 2"
	      android:icon="@drawable/filter"></item>
	<item android:id="@+id/Menu3" android:title="Opción 3"
	      android:icon="@drawable/chart"></item>
</menu>

Este XML se compone de un elemento principal <menu> que contiene tantos elementos <item> como opciones queramos ponerle a nuestro menú. Destacar que los elementos <item> tiene propiedades como el id, el título y el icono. Podemos observar que nuestro XML tiene un detalle y es que los títulos están puestos directamente, algo que vimos que no era aconsejable, para esto creamos los Strings de las opciones y lo referenciamos en el XML por lo que quedaría así:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:id="@+id/MenuPrincipal"  
            android:title="@string/texto_opcion1_menu" 
	      android:icon="@drawable/tag"></item>
	<item android:id="@+id/Menu2" 
            android:title="@string/texto_opcion2_menu"
	      android:icon="@drawable/filter"></item>
	<item android:id="@+id/Menu3" 
            android:title="@string/texto_opcion3_menu"
	      android:icon="@drawable/chart"></item>
</menu>

Ahora tenemos que implementar el evento onCreateOptionsMenu() del activity que queremos que muestre el menú. En este evento vamos a “inflar” el menú. Primero obtendremos una referencia al inflater mediante el método getMenuInflater() y posteriormente generamos la estructura del menú llamando a su método inflate() pasándole como parámetro el ID del menú definido en el XML que en nuestro caso será R.menu.menu. Por último devolveremos el valor true para confirmar que debe mostrarse el menú.

Ahora solos nos queda implementar cada una de las opciones del menú. Esto se hará incluyendo el evento onOptionsItemSelected() del activity que mostrará el menú. Este evento recibe como parámetro el ítem que fue pulsado, cuyo ID podemos recuperar con el método getItemId(). Con el ID podemos saber qué opción ha sido pulsada y ejecutar lo que queramos. Por ahora lo único que haremos es mostrar un mensaje.

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
	    switch (item.getItemId()) {
	        case R.id.Menu1:
	            Toast.makeText(this, "Opcion 1 pulsada!",
                  Toast.LENGTH_LONG).show();
	            return true;
	        case R.id.Menu2:
	        	Toast.makeText(this, "Opcion 2 pulsada!", 
                  Toast.LENGTH_LONG).show();
	            return true;
	        case R.id.Menu3:
	        	Toast.makeText(this, "Opcion 3 pulsada!", 
                  Toast.LENGTH_LONG).show();
	            return true;
	        default:
	            return super.onOptionsItemSelected(item);
	    }
    }

De este código solo comentar como se muestra el mensaje y es utilizando la clase Toast, el mismo tiene el método makeText para indicar el texto que se mostrará en el mensaje y luego usamos el método show() para que se muestre en nuestro activity. De las notificaciones hablaremos en próximos artículos.

{ Leer Más }

Nuestra primera aplicación (2da parte)

En el artículo anterior comenzamos a desarrollar una pequeña aplicación. Definimos toda la parte visual y en esta entrega vamos a desarrollar toda la lógica de la aplicación. Recordando, nuestra app lo único que hará es que al hacer clic en un botón, este cambie el valor de su texto.

Antes de comenzar con la lógica veremos cómo nos quedó la parte visual de nuestra app.

Lo primero que debemos hacer es captar el evento que ejecutará el cambio de texto del botón y es el clic, es decir, cuando se le da clic al botón, este llama a su evento onClick, que es el que tenemos que capturar nosotros. Para eso vamos al fichero donde está la clase de que representa al Activity donde pertenece el botón, en nuestro caso se llama PrimeraActivity.java.

Lo primero que debemos hacer es declarar un objeto Button que es el que va a representar a nuestro botón de la parte visual en el código. Para esto escribimos el siguiente código:

private Button boton;

Señalar que para usar la clase Button de Android es necesario importar el paquete android.widget.Button como muestra la siguiente línea:

import android.widget.Button;

Después de creado el objeto, vamos a asociar el objeto creado con el botón visual. Esto lo hacemos en el método onCreate de la siguiente forma:

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        boton = (Button)this.findViewById(R.id.button1);     
    }

Vamos a explicar un poco este código. El método onCreate de la case Activity se lanza cuando se lanza esta activity. Con el método findViewByid del activity lo que hacemos es devolver la referencia del objeto visual que tiene como id, el que se pasa por parámetro. En anteriores artículos hablamos de la clase R. En el código cuando ponemos R.id.button1 estamos accediendo al componente visual que tiene un id igual a button1.

Ahora vamos a capturar el evento onClick del botón. Esto lo haremos de la siguiente forma:

boton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
            	//Acciones a ejecutar	
            }
        });

Después de saber cómo capturar el evento onClick del botón, solo nos queda cambiar el texto del mismo:

boton.setText(R.string.texto);

Es válido aclarar que texto es un String cualquiera que debemos crear para guardar el texto que vamos a mostrar cuando se de clic en el botón. El método onCreate quedaría así:

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        boton = (Button)this.findViewById(R.id.button1);
        
        boton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
            	boton.setText(R.string.texto);
            }
        });
    }

Con esto hemos hemos terminado nuestra primera aplicación en Android. En próximos artículos iremos enriqueciendo aún más esta aplicación.

{ Leer Más }

Nuestra primera aplicación (1era Parte)

Ya viene siendo hora de ponernos a programar. Soy de los que piensa que en la práctica es donde mejor se aprende la teoría por lo que hoy vamos a hacer una pequeña aplicación donde aplicaremos lo visto en artículos anteriores y algunas cosas nuevas. Nuestra primera aplicación lo único que hará es tener un botón que al hacer clic cambie su texto.

Lo primero que haremos es abrir el eclipse. Yo usaré la versión Indigo. Una vez abierto el eclipse crearemos una nueva aplicación para esto vamos a File > New > Android Project nos saldrá un cuadro donde pondremos el nombre de nuestra aplicación. Yo le llamaré Primera App. Luego deberemos seleccionar para qué versión de Android haremos nuestra aplicación. Esta selección es importante pues la versión que seleccionemos significará que será la versión mínima de Android que debe tener la aplicación que crearemos. En estos artículos usaremos la versión 2.2 por ser una de las más usadas.

Después de haber seleccionado la versión, entonces nos tocará seleccionar el nombre del paquete. En nuestro caso pondremos el siguiente: softpei.app. También debemos seleccionar el nombre de nuestra Activity. No hemos explicado qué es un Activity, pues llegó el momento: un Activity no es más que el componente principal de la interfaz gráfica. Viene siendo como la ventana en cualquier lenguaje visual. En nuestro caso seleccionaremos como nombre de nuestro Activity el de PrimeraActivity.

Con esto ya hemos creado los parámetros iniciales de nuestra aplicación. Ahora nos dedicaremos a la parte visual de la aplicación. Como vimos en el artículo Conociendo la estructura de un Proyecto Android, para ver el XML que representará la interfaz visual de nuestra Activity vamos a la carpeta res > layout. Ahí tendremos el fichero main.xml que por defecto tendrá el siguiente código:

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

</LinearLayout>

Aquí podemos ver que por defecto el Layout es linear con una orientación vertical y dentro hay un texto que tiene como valor lo que está en la variable hello.

Nosotros le haremos a esto unos pequeños ajustes, y es que quitaremos ese texto y pondremos un botón; entonces el código quedará así:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

Aquí vemos que el texto del botón tiene un valor escrito en el fichero por lo que, como vimos en Los textos en Android es importante poner todos nuestros textos en el fichero strings.xml por lo que vamos a crear una variable en este fichero de nuestra aplicación para asignárselo al texto del botón creado. Nuestro fichero de textos quedaría así:

<resources>

    <string name="hello">Hello World, PrimeraActivity!</string>
    <string name="app_name">Primera App</string>
    <string name="texto_boton">Aceptar</string>

</resources>

Ahora procedemos a modificar el valor del botón por la variable creada, por lo que el main.xml quedará así:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/texto_boton" />

Bueno ya tenemos la parte visual casi lista. Solo nos quedaría crear también un texto para cuando hagamos clic sobre el botón, para esto creamos otra variable en el fichero strings.xml:

<string name="texto_boton_clickeado">Botón Clickeado</string>

Con esto ya hemos terminado la parte visual, ahora nos quedará la lógica pero esto lo veremos en un próximo articulo.

{ Leer Más }

Los textos en Android

A veces los programadores no le damos mucha importancia a este tema del que se va a hablar hoy porque a veces es más rápido y fácil escribir el texto de un componente directamente pero es que imaginemos que tenemos una aplicación compleja y donde se usa un texto en varios componentes que es necesario cambiar luego. Tendremos que ir por toda la aplicación buscando cada uno de los textos para cambiarlo. Este problema se puede solucionar en Android usando el fichero strings.xml que se encuentra en el directorio res/values.

El archivo strings.xml guarda las cadenas de texto utilizando el lenguaje XML. El element raíz de este recurso es <resources></resources>. Cada vez que necesitemos agregar una nueva cadena de texto deberemos agregar un elemento <string> con un atributo name cuyo valor debe ser un identificador de la cadena. Vamos a poner un ejemplo de cómo quedaría el fichero strings.xml a la hora de definir el texto que se utilizará en un botón de Aceptar.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<string name="button_name">ACEPTAR</string>
</resources>

Aquí vemos un ejemplo sencillo de definición de un string que se puede usar entre otras cosas para el texto de un botón. Ahora vamos a ver cómo sería si lo quisiéramos usar. Para hacer referencia en nuestro código del string que hemos creado usaremos la siguiente sintaxis @string/[nombre_variable] para aplicar lo anteriormente explicado ponemos el siguiente código.

<Button android:text="@string/button_name"/>

En el código anterior se ha definido un botón que tiene como texto el valor de la variable button_name creado anteriormente en el fichero strings.xml

Así debemos hacer con cada uno de los textos que vayamos a utilizar en nuestra aplicación . Esta sin duda es una muy buena práctica en la programación de aplicaciones Android.

{ Leer Más }