Introducción a los conceptos básicos de navegación de Android de Souvik Biswas | Octubre de 2020

Este artículo es el enfoque principal Navegación, nos ocuparemos principalmente de conceptos relacionados. Sin embargo, si desea echar un vistazo más de cerca a la interfaz de usuario y la lógica de la aplicación, puede ir al repositorio GitHub de la aplicación de muestra, que se enumera al final de este artículo.

Usaremos Android KTX la versión de las dependencias que usamos Kotlin idioma en nuestro proyecto. Pero si usas JavaTambién están disponibles versiones de las mismas dependencias distintas de ktx.

Para usar Componente de navegación, agregue las siguientes dependencias a su archivo build.gradle (app) expediente:

Agregar una carta de navegación

Crea uno nuevo xml haga clic derecho en el icono res carpeta y selección Nuevo > Archivo de recursos de Android. Seleccione el tipo de fuente como Navegación y usa el nombre del archivo navigation.

Enlace al archivo fuente de navegación

Tienes que conectarte navigation.xml archivo en su activity_main.xml archivo agregando NavHostFragment utilícelo para explorar diferentes fragmentos de su aplicación.

Agregar un fragmento al gráfico

Ir Editor de navegación de navigation.xml expediente. Haga clic en Nuevo gol y seleccione la pantalla que desea agregar a la carta de navegación.

Moverse a otro destino

Para navegar desde el destino actual a cualquier otro, primero cree acción en la carta de navegación.

Tu tienes que escribir Kotlin código específicamente para activar la acción que definió en el gráfico de navegación.

Usaremos la navegación condicional al decidir si ir al usuario WonFragment o LostFragment. En nuestro juego trivial, un usuario que puede responder alrededor del 80% Las preguntas correctas se considerarán ganadoras.

Establecer acciones desde TriviaFragment a dos fragmentos que se pueden navegar.

Ejecutando acciones desde el código de Kotlin:

Si intentas regresar de WonFragment o LostFragment, la aplicación te llevará a TriviaFragment. Sin embargo, esta no debería ser la acción predeterminada, ya que el usuario puede querer volver directamente a la pantalla de inicio. Ellos tambien existen OTRO PARTIDO y JUEGA DE NUEVO botones si alguien quiere volver a jugar.

Entonces, para hacerse cargo del usuario directamente desde WonFragment o LostFragment a WelcomeFragment, necesitamos manipular el Back Stack. Esto se puede lograr fácilmente configurando Pop Behavior cualquier acción de Editor de navegación.

Establezcamos el comportamiento pop action_triviaFragment_to_wonFragment Y action_triviaFragment_to_lostFragment en popUpTo TriviaFragment (incluso).

Args seguros es un complemento de Gradle que genera clases de objetos simples y clases de constructor para una navegación de tipos segura y también simplifica el paso de argumentos.

Agregue lo siguiente classpath al más alto nivel de tu proyecto build.gradle expediente:

Aplicar el complemento a nivel de aplicación build.gradle expediente:

Esto genera un código Kotlin adecuado para módulos exclusivos de Kotlin. Si usa Java o módulos mixtos de Java y Kotlin, use lo siguiente:

Realice una construcción limpia del proyecto.

Ahora puedes reemplazar CARNÉ DE IDENTIDAD utilizado para especificar acciones de navegación con generado NavDirections clases como esta:

Puede agregar los argumentos que desea pasar directamente desde Navigation Editor seleccionando un Fragmento.

Haz una construcción limpia.

Para pasar argumentos de un fragmento, debe modificar el código de Kotlin de la siguiente manera:

Paquete de Android utilizado para cargar argumentos en el destino navegado:

los NavigationUI puede manejar Arriba el comportamiento del botón en sí, por lo que no tiene que administrarlo explícitamente. También oculta automáticamente el botón Arriba cuando estamos en la pantalla de inicio de la aplicación.

Dentro Actividad principalconectar NavController a ActionBar:

Entonces reescribe onSupportNavigateUp método de actividad:

Se encargará de toda la navegación entre los distintos fragmentos de esta actividad.

Agreguemos un menú desplegable que guíe al usuario a AboutFragment. Solo se mostraría en WelcomeFragment nuestra aplicación.

Añadir AboutFragment en el gráfico de navegación, pero no cree ninguna acción para él.

Crea un nuevo recurso de menú llamado overflow_menu haciendo clic derecho en res y selección Nuevo > Archivo de recursos de Android.

Declarar item con el mismo id del Fragmento al que desea ir.

Para mostrar el menú solo en WelcomeFragment, agregue lo siguiente al Fragmento:

Sobrescribir onCreateOptionsMenu e inflar la fuente de suministro:

Sobrescribir onOptionsItemSelected conectarlo a nuestro NavigationUI:

Toma de navegación el componente es parte de la Biblioteca de diseños de materiales para Android. Este es el panel de la interfaz de usuario, que se puede abrir deslizando el dedo desde el borde izquierdo de la pantalla o haciendo clic en el icono icono de menú presentar en ActionBar. Suele ocurrir en aplicaciones con cinco o más pantallas.

Agrega una dependencia de Gradle desde Diseño de materiales al nivel de la aplicación build.gradle expediente:

Agregue un fragmento más al gráfico de navegación llamado RulesFragment.

Crea un nuevo recurso de menú llamado navdrawer_menu y suma dos item a.

EN activity_main.xml paquete LinearLayout con DrawerLayout:

Añadir NavigationView en la parte inferior DrawerLayout.

Ahora ve a Actividad principal:

private lateinit var drawerLayout: DrawerLayout
private lateinit var appBarConfiguration: AppBarConfiguration
drawerLayout = binding.drawerLayout
NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)
appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)NavigationUI.setupWithNavController(binding.navView, navController)
return navController.navigateUp()

con ese:

return NavigationUI.navigateUp(navController, drawerLayout)

Esto ayuda en el intercambio Arriba botón con Menú cuando llegamos a la primera pantalla de la aplicación.

Puede agregar y headerLayout propiedad a NavigationView dentro activity_main.xml:

los nav_header.xml el archivo se ve así:

Aunque no puedas ver Menú en sitios que no sean la primera pantalla, aún tendrá acceso a Toma de navegación deslice desde el borde izquierdo de la pantalla en otras páginas.

Para resolver este problema y evitar que se abra en otros sitios, debemos escuchar los cambios de navegación y solo permitirlo cajón en la primera pantalla.

En tus Actividad principal archivo dentro onCreate agregue lo siguiente:

Ya no podrá abrir el cajón de navegación desde ningún sitio que no sea la primera pantalla.

Siempre estará feliz de compartir su puntuación ganadora con sus amigos. Así que agreguemos un Compartir botón con Intención en nuestra aplicación.

Intenciones Puede haber principalmente dos tipos:

Si hay varias aplicaciones de Android en el dispositivo del usuario que pueden manejar una intención predeterminada específica, aparecerá una selección.

Crea uno nuevo Menú llamado el archivo fuente share_menu.

Agregar un elemento de menú:

Queremos mostrar compartir icono solo en WonFragment, por lo que solo tendremos que configurarlo en este fragmento.

Dentro onCreateView añadir:

Crea un método para definir Intención:

Cómo iniciar la actividad:

Sobrescribir onCreateOptionsMenu , infle el recurso del menú y muestre el botón de compartir solo si hay una aplicación instalada en el dispositivo del usuario que puede manejar esta intención predeterminada.

Sobrescribir onOptionsItemSelected cómo procesar la acción después de hacer clic en el botón compartir.

Puede aplicar diferentes tipos de animaciones a un archivo. Navegación.

Primero, cree un nuevo archivo de recursos de animación haciendo clic derecho en el icono res carpeta y selección Nuevo > Archivo de recursos de Android.

Definamos un desvanecimiento animación:

Y corredizo La animación se puede definir de la siguiente manera:

Puedes usar Editor de navegación para uso directo de animaciones.

Después de usar todas las animaciones, la aplicación se ve así:

Parte de la navegación de Android facilita la gestión de todo el sistema de navegación de la aplicación. El editor de navegación, junto con el gráfico de navegación, proporciona una buena descripción general de los objetivos, acciones, argumentos y animaciones que se utilizan en la aplicación. Aunque hemos cubierto la mayoría de las funciones básicas en este artículo, el componente de navegación tiene funciones mucho más sorprendentes para explorar.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *