Google Groups Home
Help | Sign in
Recent pages and files
Primera aplicación de ejemplo: Eurocalculadora    

Una vez instalado el SDK de desarrollo de Android, Eclipse y el plug-in, vamos a empezar a desarrollar una eurocalculadora. No es que sea la aplicación estrella de estas navidades, pero por algo se tiene que empezar.

 

Para comenzar, dentro de Eclipse, creamos un nuevo proyecto.

 

 

Marcamos "Android Project" dentro de la categoría "Android" y pulsamos "Next".

 

 

Ahora rellenamos los datos que definen nuestro proyecto.



A continuación explico para qué sirve cada cosa:

  • Project name: Es el nombre que queramos darle al proyecto para el editor Eclipse.
  • Package name: Deberá de ser un nombre único. No debería haber otra aplicación con el mismo nombre. Google sugiere que como base pongas el nombre de tu compañía y después el nombre de la aplicación.
  • Activity name: El nombre de la clase que implementará la actividad.
  • Application name: El nombre que tendrá nuestra aplicación, que será legible por un humano.

Pulsamos el botón "Finish".

 

Una vez se haya cargado el proyecto esqueleto, veamos lo que contiene "Eurocalculadora.java" haciendo doble clic sobre su nombre. (Hay que ir desplegando el arbol de elementos.) 


Vemos que lo único que hace cuando se carga es establecer una vista como interfaz de usuario de la aplicación:


setContentView(R.layout.main)


Para ver qué es lo que se muestra vamos a ejecutar la aplicación en el emulador, para ello, pulsamos sobre el menú "Run" y después sobre "Open Run Dialog...".



Aparecerá un cuadro de diálogo. En el arbol de elementos de la izquierda, hacemos doble clic sobre "Android Application" para crear un nuevo entorno de ejecución. Una vez hecho, en "Name:" establecemos el valor "Ejecución normal" o lo que quieras poner. Después pulsa sobre el botón "Browse..." selecciona el proyecto actual "Eurocalculadora". Pulsa "OK" y para terminar aplicando los cambios pulsa sobre "Apply".



En "Activity" también puede seleccionar la actividad que quieres iniciar. Por ahora, como sólo tenemos una, lo vamos a dejar en blanco.


Como puedes ver, tenemos dos pestañas más: "Emulator" y "Common": 

  • En "Emulator" podremos seleccionar el tamaño de la pantalla del terminal, la velocidad de la red, así como la latencia de la misma. (También podremos especificar ciertos parámetros adicionales al emulador, como por ejemplo, para activar el sonido, para que cargue una tarjeta SD emulada, etc.)
  • En "Common" varias opciones de ejecución y depurado.

Si pulsas el botón "Run", se arrancará el emulador desde esta ventana de diálogo. Esta vez, vamos a pulsar sobre "Close" para cerrar esta ventana y ejecutar la aplicación en el emulador mediante otro botón más accesible.

 

 

La primera elipse roja marca donde hay que hacer clic para desplegar el menú para depurar la aplicación. La segunda elipse roja marca la zona donde hay que hacer clic para ejecutar la aplicación. Como podrás ver, aparece un elemento llamado "Ejecución normal". Vamos a hacerle clic para arrancar la aplicación. Una vez cargado el emulador, que se lleva su tiempo, verás arrancar la aplicación. (Recuerda no cerrar la aplicación del emulador entre ejecución y ejecución de nuestra aplicación. No es necesario.)



Por ahora la aplicación no hace nada más, así que vamos a remediarlo.


Lo primero de todo que haremos será la interfaz de usuario de la misma. ¿Recuerdas la instrucción que se ejecutaba nada más arrancar la aplicación?


setContentView(R.layout.main)

 

Especifica que se establezca la interfaz de usuario "main". Nosotros vamos a editarla. Para ello, hacemos doble clic al archivo "main.xml" que contiene esta interfaz de usuario.

 

 

Si no te aparece el texto que compone el archivo XML, pulsa sobre la pestaña de abajo que pone "Source" para verlo.

 

 

Para esta aplicación queremos un formulario sencillo, algo parecido a esto:


Euros: ________________

Pesetas: ______________

[       Euros a pesetas      ]

[       Pesetas a Euros     ]


Vamos a utilizar varios "LinearLayout" (Contenedores) para reorganizar los elementos. Un "LineraLayout" nos permitirá alinear sus hijos en una sola dirección: Horizontal o vertical.


Como vemos en el esquema que acabo de poner, tenemos en un "LinearLayout" con disposición vertical (que ocupará toda la zona disponible a interfáz de usuario) cuatro entradas:

 

  • Euros: ________________
  • Pesetas: ______________
  • [       Euros a pesetas      ]
  • [       Pesetas a Euros     ]

 

Cada uno de estos elementos van dispuestos en orden vertical y hacia abajo.


Ahora bien... ¿Qué pasa con "Euros: ________________"?

 

Contiene dos elementos:  un TextView (Para mostrar texto al usuario) y un EditText (Para que el usuario introduzca información en nuestra aplicación) ¿Qué hacemos si queremos tratarlos como uno? Pues los metemos dentro de otro "LinearLayout" con disposición horizontal en los que estos dos elementos aparezcan uno detrás del otro.


Vamos a empezar a escribir el main.xml. Primera aproximación. Vamos a intentar conseguir poner un TextView y un EditText juntos en la misma línea.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/euros" />
        <EditText id="@+id/euros"
          android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>  
</LinearLayout>


La parte que está en verde define el LinearLayout que ocupará toda la pantalla y que contendrá todos nuestros "controles":

 

    android:layout_width="fill_parent" (Ancho)
    android:layout_height="fill_parent" (Alto)


layout_width="fill_parent" indicará que tomará el ancho total que le esté dejando su padre, en este caso, la pantalla completa. Si pusiéramos layout_width="wrap_content", estaríamos indicando que queremos que tome de ancho el mínimo en el que entraran todos los hijos.

 

También se especifica que la disposición de los elementos será en vertical (Podríamos poner "horizontal" para disposición horizontal):

 

    android:orientation="vertical"


La parte de rojo define el LinearLayout que contiene el TextView y el EditText en una misma línea en horizontal. Por eso se define como:


    android:orientation="horizontal" 


Para este LinearLayout se definen las siguientes propiedades:


    android:layout_width="fill_parent"
    android:layout_height="wrap_content"

 

Con layout_width="fill_parent" estamos diciendo que tomaremos como ancho, todo el ancho que tenga disponible nuestro "contenedor" "padre". Y con layout_height="wrap_content" indicamos que queremos que como alto, ocupe lo mínimo posible como para contener y mostrar a los hijos: TextView y EditText.

 

Dentro de este LinearLayout tenemos los dos elementos. El primero:

 

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

 

Que se renderizará con el alto y ancho mínimo para mostrar el texto asociado en el archivo de cadenas de texto. Como se puede ver, se ha especificado como texto "@string/euros". Con esto estamos diciendo que tome el valor de la clave "euros" dentro del archivo "strings.xml". Abrimos este archivo haciendole doble clic.

 

 

Y añadimos la entrada "euros". Así quedará el archivo después de añadir la entrada:


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Conversor</string>
    <string name="euros">Euros:</string>
</resources>


En "name" está el nombre que le queremos dar para referenciarla y entre <string ...> y </string> el texto que queremos que contenga.

 

El segundo elemento que nos encontramos dentro de este LinearLayout es:


        <EditText id="@+id/euros"
          android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

 

En el que estamos definiendo un campo de entrada de texto con identificador euros, que en horizontal (layout_width) ocupa el resto de espacio que queda disponible para dibujarse ("fill_parent") y en vertical (layout_height) el mínimo espacio ("wrap_content").

 

Vamos a ejecutar la aplicación a para ver cómo queda: 


 

Vamos bien. Ahora sólo tenemos que añadir más de lo mismo para tener la otra fila. (Añadiendo un LinearLayout con un TextView y un TextEdit dentro.)


En el archivo main.xml añadimos el siguiente código justo ántes del último </LinarLayout>:


    <LinearLayout android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/pesetas" />
        <EditText id="@+id/pesetas"
          android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

 

Como podéis ver, es exáctamente igual que la fila inicial que hemos hecho, pero cambiando los valores.

 

Ahora tenemos que añadir una definición de texto al archivo "strings.xml" para "@string/pesetas". Hay que ponerlo junto con todos los demás, justo debajo del que acabamos de añadir hace un momento.

 

<string name="pesetas">Pesetas:</string>

 

Volvemos a ejecutar la aplicación para ver cómo va...

 

 

Recapitulemos... Tenemos un LinearLayout que representa a la pantalla completa que lista elementos en vertical. Los dos primeros elementos que aparecen son dos LinearLayout (Que dentro tienen dos elementos en horizontal.). Pues ahora, después de estos dos LinearLayout, vamos a añadir dos botones.

 

Símplemente tenemos que añadir el siguiente código al archivo "main.xml" justo ántes del último </LinearLayout>:

 

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

 

"@+id/pesetas2euros" sirve para indicar que queremos hacer referencia a este botón con el identificador pesetas2euros (Cosa que luego utilizaremos desde la programación de la aplicación). Cuando utilzamos "@string/pesetas2euros", estamos indicando que tome el texto que hace referencia a pesetas2euros en el archivo de cadenas de texto strings.xml

 

Recordad añadir las definiciones de las cadenas de texto "euros2pesetas" y "pesetas2eutos" al archivo "strings.xml".

 

    <string name="euros2pesetas">Convertir euros en pesetas</string>
    <string name="pesetas2euros">Convertir pesetas en euros</string>

 

Vamos a ejecutarlo a ver cómo va quedando...

 


¿Véis para qué sirve poner layout_width="wrap_content"? En este caso, los botones ocupan el mínimo ancho que pudieran ocupar. (Para que se vea su contenido correctamente.)

 

¿Y si yo quiero que los botones se alarguen y ocupen de ancho toda la ventana?

 

Pues les cambio el layout_width="wrap_content" por layout_width="fill_parent". De esta forma, los botones tomarán tanto ancho como tenga el contenedor que los contiene. Ahora el código XML de los botones quedan así:

 

    <Button id="@+id/euros2pesetas"
      android:text="@string/euros2pesetas"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <Button id="@+id/pesetas2euros"
      android:text="@string/pesetas2euros"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

 

Volvemos a ejecutar y...


 

Ahora aparece como nosotros queríamos.

 

Si. Muy bonito, pero no hace nada. Vamos a solucionarlo. 

 

Si observamos el código Eurocalculadora.java, la línea:

 

public class Eurocalculadora extends Activity {

 

Sirve para indicar que nuestra Eurocalculadora hereda de Activity. Esto significa que nuestra Eurocalculadora la vamos a tratar como si fuera un objeto Activity. De hecho, con sólo este gesto, ya funciona de la misma forma que Activity. Este objeto representa una actividad que el usuario puede realizar en nuestra aplicación. Como seleccionar un punto en un mapa, seleccionar un contacto en su lista de contactos, o, como en este caso, convertir el valor de una moneda a otra. (Es muy importante conocer cómo funciona el ciclo de vida de este objeto. De todas formas, para este ejemplo no te hará falta. Se hablará de ello en su momento.)


Para obtener los datos que el usuario introduzca en los EditText, necesitamos dos variables que los referencien. Una para cada campo. Para ello, vamos a añadir estos dos atributos a nuestra clase Eurocalculadora. Lo hacemos añadiendo las siguientes dos líneas al archivo Eurocalculadora.java justo debajo de "public class Eurocalculadora extends Activity {".


    private EditText campoEuros;
    private EditText campoPesetas;


Los definimos como private porque no queremos que estén disponibles desde fuera de esta clase (Nuestra aplicación).

Y los establecemos como atributos de la clase, ya que necesitaremos que estén ahí para acceder a ellos desde el manejador de acciones de los botones. (Cuando hagamos clic en algún botón necesitaremos acceder y cambiar los valores del EditText.) 


Ahora obtenemos esto:

 

 

El texto EditText nos aparece subrayado con una línea roja para indicarnos que el compilador no sabe de la existencia del objeto EditText. Para solucionarlo, vamos a utilizar una característica del Eclipse. Pulsamos Control+Shift+O (Shift = Tecla situada normalmente encima de la tecla Ctrl de la izquierda) y el editor buscará donde está ese objeto y realizará la instrucción/es import correspondiente/s.



Como se puede observar, Eclipse nos ha añadido la línea import android.widget.EditText, que indica dónde se encuentra la clase EditText. Ahora aparecen subrayadas en amarillo, pero simplemente es para indicarnos que hemos definido atributos que no se están utilizando.


Ahora hay que hacer que cada uno de estos atributos hagan referencia a sus respectivos EditText, para ello, añadimos el siguiente código justo debajo de setContentView(R.layout.main);

 

        campoEuros = (EditText) findViewById(R.id.euros);
        campoPesetas = (EditText) findViewById(R.id.pesetas);

 

Mientras tecleas estas líneas, podrás ver cómo una vez que escribes R. te aparecen una serie de sugerencias, así como cuando escribes R.id. (Esta es la característica de autocompletado de Eclipse.)

 

Ya tenemos las referencias a los campos de los valores... Ahora nos falta añadir una acción a cada botón. (Una que nos lea el valor escrito en campoEuros, nos lo convierta a pesetas y lo escriba en el campo de las pesetas. Lo mismo para la otra acción, pero al revés.)

 

Para añadir las acciones a cada botón, necesitamos hacer lo mismo que hemos hecho antes, pero esta vez sólo añadiendo las siguientes líneas debajo de las anteriores y similares.

 

        Button eurosAPesetas = (Button) findViewById(R.id.confirm); 

        Button pesetasAEuros = (Button) findViewById(R.id.confirm);  

 

Si observas bien, esta vez no hemos puesto Button euroAPesetas; como atributo de la clase, ya que sólo necesitaremos la referencia a este control para añadirle el manejador de acciones. (Un objeto que sabe qué hacer ante cada evento que ocurra. En el caso del botón, cuando se le haga clic.)


Pulsamos Control+Shift+O y continuamos...

 

Por ahora vamos a añadir una acción tan sencilla como establecer un texto en cada EditText. Para ello añadimos el siguiente código justo debajo de las dos últimas líneas que hemos escrito.


        eurosAPesetas.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                campoEuros.setText("Pulsacion eurosAPesetas...");
            }
        });
        pesetasAEuros.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                campoPesetas.setText("Pulsacion pesetasAEuros...");
            }
        });


¡Aviso! No es recomendable introducir cadenas de texto directamente dentro del código. Ya que nos encontraríamos problemas a la hora de establecer varios idiomas para la misma. Lo hago aquí porque es una prueba que vamos a deshacer dentro de poco.


En este caso establecemos el manejador de la acción del clic mediante dando la orden setOnClickListener al atributo que representa el objeto del botón (eurosAPesetas). A la orden setOnClickListener le pasamos un callback que implementa el método público onClick(View view), que será el método que se llame cuando el botón reciba un clic. Adivina. Cualquier cosa que pongamos dentro de la definición de este método será ejecutado sólo cuando se haga clic en el botón.


Para este ejemplo, si se pulsa algún botón ejecuto el código: campoEuros.setText("Aquí pongo lo que quiera...");

Con el código anterior le estoy diciendo al objeto referenciado por campoEuros (Que es un EditText) que establezca su contenido al texto que le estoy indicando.


Vamos a ejecutar, no sin antes pulsar Control+Shift+O, ya que la clase View nos aparece subrayada en rojo. (Otra cosa que puedes hacer para evitar tener que hacer esto es añadir manualmente cada include. Eso sí, como es imposible saber donde está cada clase, deberás de ver el listado de clases. Una vez pulses sobre la clase que estés usando, en este caso View, verás arriba del todo de la página que aparezca, en negrita y con texto grande la localización de la misma: android.view.View. Sólo tendrías que hacer el import correspondiente.)


Ahora sí. Ejecutamos... Pulsamos el primer botón...



Al parece funciona. Ahora pulsamos el segundo botón...


 

Al pacere funciona... Ahora tenemos que hacer la conversión. Vamos ahora con el primer botón. Reemplazaremos:


        eurosAPesetas.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                campoEuros.setText("Pulsacion eurosAPesetas...");
            }
        });


por:


        eurosAPesetas.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                campoPesetas.setText(""+Double.parseDouble(campoEuros.getText().toString())*166.386);
            }
        });


Vamos a explicar lo que hace este chorizo...


    campoPesetas.setText( "Aquí el texto que queramos poner" );


Esto está claro... Entre los paréntesis ponemos el texto que queramos que aparezca en el EditText.

En este caso queremos que aparezca el resultado de procesar:

 

    Double.parseDouble(campoEuros.getText().toString())*166.386

 

Con campoEuros.getText().toString() obtenemos el número de euros introducido, pero como letras. (Una cadena de carácteres.) Para pasarlo a número, en este caso del tipo double

 

Ejemplo: Double.parseDouble("132.55") nos devolverá el valor de tipo double que representa 132.55, y no una cadena de texto que forme "132.55" con la cual no puedes realizar operaciones aritméticas.


Así que todo esto: Double.parseDouble(campoEuros.getText().toString())

Es para obtener el valor numérico de los Euros con el cual podamos realizar la siguiente operación, que será multiplicarlo por 166.386 para convertirlo en pesetas.

 

¿Qué pintan las comillas en ""+Double.parseDouble(campoEuros.getText().toString())*166.386 ?

  

Es una forma muy cómoda de pasar de un valor decimal a una cadena de texto. (La conversión que hicimos antes era la inversa.)


Vamos a ejecutar el programa en el emulador para ver cómo va... (Introduzco un 6 en el campo Euros y pulso el primer botón.)

 

 

Parece que funciona... Pero qué pasa si en vez de un número introducimos una letra. Pues que obtendremos un error a la hora de convertir la cifra escrita a número. ¿Cómo arreglamos esto? Tenemos dos soluciones. La primera y más rápida es hacer que solo se puedan escribir números:

 

En el main.xml (Donde definimos la interfaz de usuario) añadiríamos el atributo android:numeric="true" a cada una de las etiquetas EditText. Ejemplo:

 

        <EditText id="@+id/euros"
          android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numeric="true"
            android:layout_weight="1"/> 


La forma más larga... Reemplazando otra vez el código de antes por:

 

        eurosAPesetas.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                try{
                    campoPesetas.setText(""+Double.parseDouble(campoEuros.getText().toString())*166.386);
                }catch(Exception e){
                    campoPesetas.setText(getResources().getString(R.string.valorInvalido));
                }
            }
        });


Y añadimos una nueva entrada al archivo strings.xml de la misma forma que están las demás líneas dentro de este archivo.


<string name="valorInvalido">¡Valor introducido inválido!</string>


¿Qué hemos hecho? Pues hemos metido dentro de un bloque try ... catch la instrucción que puede provocar errores. (Lanzar excepciones) En el caso de que salte algún error en la ejecución de cualquier instrucción de esta línea, se ejecutaría inminentemente el código que esté dentro del bloque catch(Exception e)


De esta forma, cuando introduzcamos alguna letra dentro del valor numérico y pulsemos el botón de convertir, en vez de mostrarnos la cantidad convertida, nos aparecerá un mensaje de error.

 

 

Lo más conveniente está en limitar a que el usuario introduzca siempre valores correctos. Por eso, siempre es más aconsejable (y rápida) la primera opción que hemos visto.

 

Ejercicio 1

 

Realiza la programación del otro botón. Es lo mismo que para el primer botón, sólo que en vez de multiplicar "*", hay que dividir "/" y utilizar los nombres de las variables correctos.

 

Ejercicio 2

 

¿Podrías añadir un botón que al pulsarlo te borrara los dos campos? 

 

Ahora vamos a añadir un botón para "Salir". Añadimos a strings.xml el texto del botón:


    <string name="salir">Salir</string>


Añadimos a main.xml este botón, justo debajo de los dos que tenemos:


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


El botón tendrá identificador salir y tomará el texto de strings.xml con nombre (name) salir. (El que acabamos de incluir.)


Ahora añadimos unas cuantas líneas a Eurocalculadora.java. Justo después de obtener las referencias a los otros dos botones (y ántes de establecer las acciones de los mismos) añadimos la referencia al nuevo botón:

 

        Button salir = (Button) findViewById(R.id.salir);

 

Y le establecemos su funcionalidad. (Debajo de las acciones de los dos botones.)

 

        salir.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                setResult(RESULT_OK);
                finish();

            }
        });

 

Queda claro, salimos de la aplicación indicando que todo fué correcto. Es la forma que tenemos de decir que hemos finalizado la actividad actual.

 

Ejecutamos la aplicación...



Pulsamos el botón Salir y funciona correctamente, la aplicación sale.

 

Ahora vamos a añadir un pequeñomenú para realizar las tres acciones que hacen los botones. Para esto necesitamos definir tres constantes para tener referencia a cada acción. En Eurocalculadora, justo debajo de:


    private EditText campoEuros;
    private EditText campoPesetas;


Añadimos:


    private static final int EUROS_EN_PESETAS = Menu.FIRST;
    private static final int PESETAS_EN_EUROS = Menu.FIRST + 1;
    private static final int SEPARADOR = Menu.FIRST + 2;
    private static final int SALIR = Menu.FIRST + 3;

 

Lo que hemos hecho es dar un valor numérico a cada una de estas constantes que representará a un elemento del menú, el valor numérico comienza por el valor que nos devuelva Menu.FIRST y vamos tomando los siguientes... 

Pulsamos Control+Shift+O para importar la clase Menu en el archivo de forma automática.

 

Ahora, tenemos que sobreescribir el método que crea el menú, que por defecto crea un menú vacío. Así que justo debajo de las líneas anteriores escribimos lo siguiente:

 

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        menu.add(0, EUROS_EN_PESETAS, R.string.euros2pesetas);
        menu.add(0, PESETAS_EN_EUROS, R.string.pesetas2euros);
        menu.addSeparator(0, SEPARADOR);
        menu.add(0, SALIR, R.string.salir);

        return true;
    }

 

Explicamos paso a paso...

El método vacío contedría todo el texto que no se ha marcado en negrita. Es decir, todo lo que hay en negrita es lo que genera el menú en esta actividad. Como podemos observar en rojo, se nos pasa el objeto menú para que nosotros, llamando a sus métodos, lo vayamos rellenando.

 

Utilizamos menu.add para añadir un elemento del menú, en el primer caso, el elemento tendrá de identificador el valor de la constante EUROS_EN_PESETAS y contendrá el texto que definimos en el archivo de cadenas de texto strings.xml. En este caso, vamos a reutilizar las cadenas que establecimos para los botones.


(Por ahora no hay que hacerle caso al número 0 que se pone de primer parámetro. En contadas ocasiones habrá que poner algo distinto... Pero todo a su tiempo.)


Mediante menu.add añadimos cada entrada, y mediante menu.addSeparator añadimos una línea horizontal que separa los elementos del menú. En este caso, estamos separando las dos primeras acciones (de conversión) de la acción de salir.

 

Vamos a ejecutar para ver cómo se ve...



Tiene buena pinta. Ahora sólo tenemos que darle funcionalidad. Para ello, vamos a sacar cada acción de cada botón a parte en forma de método de la clase Eurocalculadora.

 

Para ello, sólo tenemos que añadir el siguiente código justo debajo del que generaba el menú.

 

    public void f_euros_a_pesetas()
    {
           campoPesetas.setText(""+Double.parseDouble(campoEuros.getText().toString())*166.386);
    }   
    public void f_pesetas_a_euros()
    {
            campoEuros.setText(""+Double.parseDouble(campoPesetas.getText().toString())/166.386);
    }
    public void f_salir()
    {
        setResult(RESULT_OK);
        finish();
    }


Tal y como hemos hecho, hemos definido tres métodos para esta clase. Los tres son públicos y no devuelven nada como resultado de su ejecución (void). El codigo que aparece en el método f_salir, es el código que se debe escribir para indicar que una actividad ha salido de su ejecución de forma correcta.


Reemplazamos el código de las acciones de los botones, para que se parezcan al siguiente:


        eurosAPesetas.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                f_euros_a_pesetas();
            }
        });
        pesetasAEuros.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                f_pesetas_a_euros();
            }
        });
       
        salir.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                f_salir();
            }
        });


Donde antes estaba la acción, ahora se llama al método que realiza esa acción.


Igual que antes, que sobreescribimos el método que configuraba el menú para que se generara el menú que nosotros hemos querido, ahora vamos a sobreescribir el método que se encarga de procesar la acción de selección de un elemento del menú. En este caso será para realizar una conversión, o para salir. Después de las tres últimas funciones que hemos añadido, escribimos el siguiente código:


    @Override
    public boolean onMenuItemSelected(int featureId, Item item) {
        super.onMenuItemSelected(featureId, item);
        switch(item.getId()) {
        case EUROS_EN_PESETAS:
            f_euros_a_pesetas();
            break;
        case PESETAS_EN_EUROS:
            f_pesetas_a_euros();
            break;
        case SALIR:
            f_salir();
            break;
        }

        return true;
    }


Esto es casi lo mismo que en la función que generaba el menú. Sólo he añadido lo que está en negrita. Paso a comentar su funcionamiento:


        switch(item.getId()) {
        case EUROS_EN_PESETAS:
            f_euros_a_pesetas();
            break;
        case PESETAS_EN_EUROS:
            f_pesetas_a_euros();
            break;
        case SALIR:
            f_salir();
            break;
        }


Como hemos dicho antes, cuando un usuario selecciona un elemento del menú, se llamará a este método automaticamente, pasándonos entre otras cosas, el elemento que hemos seleccionado del menú en forma de variable llamada item. Le enviamos el mensaje .getId() para obtener el identificador del elemento en cuestión. ¿Qué hacemos entonces? Pues dependiendo del elemento al que hayamos seleccionado, llamamos a un método u otro. Si hicimos clic sobre el item con id SALIR, llamaremos a f_salir() y así...


Ejecutamos la aplicación y podemos comprobar que el menú funciona perfectamente. Ahora bien... ¿Qué pasa si no escribimos ningún número e intentamos realizar cualquier acción? Pues que la aplicación falla. Para no complicarlo más, he decidido no continuar con este ejemplo.



Si quieres bajarte el proyecto en un archivo ZIP tal y como está ahora, puedes hacerlo pulsando aquí

Si tienes alguna duda o sugerencia, entra en Dudas y preguntas y coméntala. Intentaré responder lo ántes posible. 

Version: 
Latest 3 messages about this page (5 total) - view full discussion
Dec 22 2007 by Sergio Padrino
Muy buen tutorial!
Es fácil de seguir y toca un poco de muchos aspectos básicos de
Android.

Muchas gracias por el tutorial :D Sigue así!
Nov 25 2007 by juande
layout_weight se utilizan en los LinearLayouts para asignar una
"importancia" a las vistas (objetos) que se encuentran dentro del
mismo. Todas las vistas (objetos) tienen un valor 0 para
layour_weight, lo que significa que sólo ocuparán tanto espacio en la
pantalla como necesiten para mostrarse (el espacio mínimo). Asignar un
Nov 24 2007 by Sau
Impresionante tutorial, lo he seguido paso a paso y he aprendido un
montón. Solo me queda la duda del atributo android:layout_weight="1",
que no he acabado de entender su funcionamiento.

Ánimo y felicidades.

Saludos.
2 more messages »
Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2008 Google