domingo, 6 de mayo de 2012

Abrir una segunda ventana para aplicaciones de android

Como ya sabemos la mayoría de las aplicaciones de android tienen varias ventanas, las primeras por lo regular son los menus y a éstas les prosiguen nuevas ventanas ya con las funcionalidades. Aquí presento la manera en que se crea una segunda ventana para una aplicación de android.

El primer paso es crear un nuevo proyecto, yo lo llamé Ventanas. Ya creado el proyecto, buscaremos la interfaz que se nos crea por defecto llamada main.xml, ésta se encuentra  en la carpeta layout del apartado res. Una vez ahí arrastramos un botón del panel From Widgets a la ventana y le ponemos cualquier texto. Yo lo llamé Opción 'X'. Al crear este botón, damos clic derecho sobre éste y seguimos la secuencia: Other Properties - All by name - onClick y en el cuadro de texto que dice New onClick Value: escribimos lanzar (con este atributo le daremos la funcionalidad al presionar el botón ya que empecemos con la codificación)


Ya hecho esto, el siguiente paso es crear un segundo archivo .xml el cual será la interfaz de la segunda ventana. Para crearlo buscaremos en el panel izquierdo de las carpetas, la carpeta layout damos clic derecho sobre ella, y seguiremos la secuencia New - Other - Android XML File, una vez creado, aparecerá una ventana y en el cuadro de texto que dice File: llamaremos este archivo xml como queramosb(yo lo llamé acercade.xml). OJO: el nombre debe ser en minúsculas y de preferentemente sin espacios.
Ya que hallamos creado el nuevo xml, añadiremos a la interfaz un TextView que llevará un mensaje cualquiera y un botón que servirá para regresarnos a la ventana principal. Al crear este botón, damos clic derecho sobre éste y seguimos la secuencia: Other Properties - All by name - onClick y en el cuadro de texto que dice New onClick Value: escribimos cerrar (con este atributo le daremos la funcionalidad al presionar el botón ya que empecemos con la codificación).  Esta interfaz se verá tal y como se muestra en la siguiente figura.


Ahora ya tenemos las interfaces, sigue programar la funcionalidad.

En la pestaña src, podemos ver que Eclipse inicialmente nos crea una clase por defecto. Lo que vamos a hacer es crear una segunda clase para esto haremos clic derecho sobre el paquete que nos haya creado Eclipse y seguiremos la secuencia New - Class y le daremos un nombre (a manera de ejemplo yo le llamé AcercaDe). Después de nombrarla nos vamos al cuadro de texto que dice Superclass: y ahí especificaremos que esta clase AcercaDe es hijo (se hereda) de la clase Activity. (Activity es una librería ya definida que importaremos más adelante), y nos debe quedar como se muestra en la siguiente imagen:



Damos clic en Finish para crearla.
package ventanas.proyecto001; /** paquete donde se localiza el proyecto */

import android.app.Activity;   /** importacion libreria Activity y Bundle */
import android.os.Bundle;

public class AcercaDe extends Activity {    /** clase AcercaDe hereda de la clase Activity */
    
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);   /**metodo OnCreate enlaza la clase AcercaDe con el archivo xml creado acercade */
        setContentView(R.layout.acercade);
    }
}
Guardamos los cambios realizados en el proyecto y proseguimos con el siguiente paso.

Lo siguiente es localizar el archivo AndroidManifest.xml. Una vez dentro de este archivo nos localizamos en la pestaña Application, ya ahí deslizamos la barra de desplazamiento hasta abajo donde dice  Application Nodes y damos clic en el botón Add y agregamos una nueva Activity.


Por último, ahí mismo en Application Nodes nos aparece la Activity que acabamos de crear, le damos un clic y en el lado derecho dónde dice Attributes for Activity escribimos en el cuadro de texto Name: la clase que creamos anteriormente (la que llamamos AcercaDe) y guardamos los cambios.


Ahora lo que sigue es implementar la funcionalidad, para acceder de la primera a la segunda ventana en la clase principal (la que Eclipse nos creó por defecto).
package ventanas.proyecto001; /** paquete donde se localiza el proyecto */
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class VentanasActivity extends Activity { /** clase VentanasActivity hereda de la clase Activity */
    
      public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); /**metodo OnCreate enlaza la clase VentanasActivity con el archivo main.xml */
        setContentView(R.layout.main);
        
    }
    
    public void lanzar(View view) {
          Intent i = new Intent(this, AcercaDe.class );  /*metodo que abrira la segunda ventana al presionar el boton Opcion 'X' */
          startActivity(i);
    }
}

Si analizamos con detalle el método lanzar, primero creamos un objeto de la clase Intent y le pasamos como parámetros la referencia del objeto de esta clase (this) y la referencia del otro Activity (Acerca.class)
Llamamos posteriormente al método startActivity pasando el objeto de la clase Intent (con esto ya tenemos en pantalla la ventana del segundo Activity.

Ahora ya para terminar le daremos la funcionalidad al botón de Regresar, simplemente creando un método finish() para que nos libere el espacio de memoria de esta actividad y nos regrese a la actividad o ventana principal. El código final de la clase AcercaDe queda así:
package ventanas.proyecto001; /** paquete donde se localiza el proyecto */
package ventanas.proyecto001;

import android.app.Activity;
import android.os.Bundle;       
import android.view.View;

public class AcercaDe extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.acercade);
    }
    
    public void cerrar(View view) {            /** método que da la funcionalidad al botón Regresar */
     finish();
    }
}
Y con esto terminamos el proyecto y podemos proceder a probarlo.


8 comentarios:

  1. pues he segido este tutorial y nada

    ResponderEliminar
  2. ¿qué no te funciona? si es lo del botón checa que la propiedad OnClick de éste mismo se llame de la misma forma que el método del .java dónde le das la funcionalidad, en lo personal cuando tuve este problema era debido a eso.

    ResponderEliminar
  3. pasa el proyecto compa para checarlo bien
    saludos

    ResponderEliminar
  4. Respuestas
    1. Me alegra que te haya servido, suerte con tu proyecto.

      Eliminar
  5. Buen tutorial. Ademas utilizas el entorno gráfico para no escribir tanto código.

    ResponderEliminar
  6. si agrego otro boton no me funciona por que esta exactamente igual como el ejemplo

    ResponderEliminar