¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. Desarrolle una aplicación Android
  3. Navegación y ventanas emergentes
Extrait - Desarrolle una aplicación Android Programación en Java con Android Studio
Extractos del libro
Desarrolle una aplicación Android Programación en Java con Android Studio
1 opinión
Volver a la página de compra del libro

Navegación y ventanas emergentes

Los menús

Los antiguos terminales Android estaban dotados obligatoriamente de una tecla que permitía mostrar el menú de la aplicación activa. Desde Android 3.0 (Honeycomb), esta tecla se ha vuelto opcional en todos los terminales Android: se ha reemplazado por un botón dedicado, situado en la barra de acción. 

Google propone, como con la compatibilidad con los fragmentos, una biblioteca de soporte que permite al desarrollador no tener que preocuparse de eventuales problemas de compatibilidad: esta biblioteca se utiliza en nuestro proyecto para gestionar el menú de la aplicación.

1. Definición del menú

Como con la organización en la página, que puede hacerse mediante archivos de layout o por programación, los menús pueden definirse o bien a través de archivos de recursos, archivos en formato XML, o bien completamente por programación. El primer método es el más extendido y es el que seguiremos en esta sección.

Por defecto, Android Studio genera un archivo de menú tras la creación de una aplicación: este archivo, llamado menu_main.xml, se almacena en la carpeta /res/menu y presenta la opción settings.

La aplicación LocDVD necesita un menú que presenta dos opciones: la primera debe permitir, tras la confirmación del usuario, reinicializar la base de datos. La segunda opción debe, por su parte, mostrar información acerca de la aplicación.

En un marco de trabajo clásico, el desarrollador utilizará el archivo de menú ya creado y lo modificará. En lugar de hacer esto, nosotros vamos a crear un nuevo archivo de menú para seguir el proceso de principio a fin.

 Sitúese en la carpeta /res de la vista de proyecto.

 Haga clic con el botón derecho y seleccione la opción New.

 En el menú contextual que aparece, seleccione la opción Android Resource File para abrir el asistente de creación de recursos.

 Escriba menu_principal como nombre del archivo (en la opción File name del formulario).

 Seleccione, a continuación, para la entrada Resource type, la opción Menu.

 Deje los valores por defecto para las demás opciones del formulario.

 Haga clic en el botón OK para validar la creación del archivo de menú....

El navigation drawer

Además de los menús, la plataforma Android proporciona una segunda opción para organizar la navegación dentro de la aplicación: el navigation drawer, que podríamos traducir por la expresión «panel de navegación».

El panel de navegación ha aparecido progresivamente con la versión 4 de Android y se ha convertido en un elemento esencial en las aplicaciones Android. Consiste en un panel, generalmente oculto, que se muestra por delante de la pantalla principal cuando el usuario desliza la pantalla de izquierda a derecha.

La compatibilidad con este modo de navegación no es nativa del sistema Android: también aquí hay que utilizar la biblioteca de soporte android.support.app.v4.

1. Modificación del layout

La primera etapa para integrar un panel de navegación es modificar el archivo de layout de la actividad: el panel se gestiona a este nivel, y no a nivel del fragmento.

Para indicar al sistema que una actividad incluye un panel de navegación, el layout de la actividad debe contener como elemento raíz una etiqueta de tipo android.support.v4.widget.DrawerLayout.

 Edite el archivo de layout de la actividad principal, es decir, el archivo activity_main.xml.

 Reemplace, en este archivo, la etiqueta raíz LinearLayout por la etiqueta android.support.v4.widget.DrawerLayout (también hay que reemplazar la etiqueta de cierre </LinearLayout>).


<android.support.v4.widget.DrawerLayout   
xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical">  
    <FrameLayout  
        android:id="@+id/main_placeHolder"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"/>  
      
</android.support.v4.widget.DrawerLayout>
 

A continuación, hay que definir las vistas que formarán el contenido del panel de navegación. Es preciso respetar ciertas reglas:

  • El contenido del panel de navegación debe ser el último elemento de la pantalla definido...

Mostrar una ventana emergente estándar

Es habitual presentar al usuario una ventana emergente para permitirse confirmar una acción importante o irreversible. Es el caso, aquí, cuando el usuario pide reinicializar la base de datos a partir de la opción del menú.

La plataforma Android dispone de varios tipos de ventana emergente: el capítulo Controles avanzados ha presentado las ventanas emergentes DatePicker y TimePicker. Las ventanas emergentes que permiten solicitar la confirmación o informar de un hecho importante se llaman, en el universo Android, AlertDialog

Una ventana emergente AlertDialog se compone de tres partes: el título, en la parte superior de la ventana emergente, el contenido propiamente dicho -el mensaje comunicado al usuario-, que aparece en la zona central y, en la parte inferior de la ventana emergente, de uno a tres botones. Estos botones están etiquetados como neutro, positivo o negativo. Sin embargo, no hay que presumir la posición relativa de cada uno de estos botones, pues depende de la versión de Android tal y como demuestran las siguientes capturas de pantalla (la captura de pantalla situada a la izquierda se corresponde con Android Jelly Bean y la situada a la derecha, con Android Lollipop).

IMAGES/08EIT02.png

La API Android provee una clase que simplifica la creación de ventanas emergentes: la clase AlertDialog.Builder.


AlertDialog.Builder AlertDialog.Builder(Context.context);
 

Para la aplicación LocDVD, una ventana emergente debe preguntar al usuario si confirma que quiere reinicializar la base de datos: además del mensaje de confirmación, es necesario mostrar los botones positivo y negativo.

Dado que el menú está contenido en la actividad principal, la ventana emergente debe implementarse en esta actividad.

 Edite el archivo MainActivity.java.

 Defina un nuevo método, privado, llamado ensureReInitializeApp, que no reciba ningún parámetro.


private void ensureReInitializeApp() {  
   
}
 

 En primer lugar hay que definir una instancia de AlertDialog.Builder. Para esta clase se exponen dos constructores:


AlertDialog.Builder(Context context)  
AlertDialog.Builder(Context context, int theme)
 

El parámetro Context context es el contexto de ejecución de la aplicación.

El parámetro opcional int theme permite...

Crear ventanas emergentes personalizadas

La opción Información del menú, que se ha definido al principio de este capítulo, debe mostrar una breve descripción de la aplicación.

El mensaje que se ha de mostrar no es demasiado largo, de modo que resultaría molesto tener que crear un fragmento únicamente para esto. La mejor opción es mostrar una breve descripción utilizando una ventana emergente.

Si bien es posible utilizar la ventana emergente AlertDialog -no tendría más que un botón para cerrar la ventana emergente-, es más interesante definir un archivo de layout para esta ventana emergente: esto aporta una mayor flexibilidad en la definición del aspecto de dicha ventana.

 Sitúese en la carpeta /res/layout y cree un nuevo archivo de layout. Llame a este archivo dialog_informacion.xml.

 Para el ejemplo, el layout estará compuesto únicamente de un controlador de vista LinearLayout, que contendrá por su parte un componente TextView

El componente TextView debe mostrar el contenido en 10 líneas y debe tener un margen de de 16 dp por cada lado. También debe mostrar una barra de desplazamiento vertical.

El layout se define así:


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