Cómo implementar la navegación inferior de Android mediante componentes de navegación | Por Krishan Madushanka | Abril de 2022

Componente de navegación de Android Android viene con mochila propulsora, Simplifica la implementación de la navegación y, al mismo tiempo, lo ayuda a visualizar el flujo de navegación de su aplicación. En el artículo de hoy, hablaré sobre cómo integrar la navegación inferior con los componentes de navegación.

Antes de comenzar a implementar, hablemos más sobre los componentes de navegación de Andriod.

Beneficios de usar componentes de navegación:

1. Maneje la pila trasera usted mismo
2. Transacciones de fragmentos automatizados
3. Parámetros de tipo seguro aprobados Parámetros de seguridad (Proporciona un complemento de Gradle con seguridad de tipos al navegar y pasar datos entre destinos)
4. Implementar patrones de interfaz de usuario de navegación, como cajones de navegación y navegación inferior
5. Manejo de animaciones de transición
6. Enlaces profundos simplificados
7. Centraliza y visualiza la navegación entre destinos
8. apoyo ViewModelen un rango posible ViewModel a un gráfico de navegación para compartir datos relacionados con la interfaz de usuario entre los destinos del gráfico

El componente de navegación tiene 3 partes principales,

1. Mapa de navegación: un archivo de recursos XML que contiene toda la información relacionada con la navegación en una ubicación centralizada. Esto incluye todas las áreas de contenido individuales en su aplicación, llamados destinos y las posibles rutas que los usuarios pueden tomar a través de su aplicación.
2. NavHostFragment: un contenedor vacío que muestra el destino en el gráfico de navegación. Muestra destinos de fragmentos en su mapa de navegación.
3. NavController: el objeto que gestiona la navegación de la aplicación en NavHost. Coordina el intercambio de contenido de destino en NavHost (NavHostFragment) a medida que el usuario se mueve a través de su aplicación.

implementar

Primero cree un nuevo proyecto con actividad vacía (MainActivity) y lenguaje Kotlin (usaremos Kotlin durante toda la implementación). Luego agregue el componente de navegación inferior en activity_mail.xml como se muestra a continuación.

necesitas ‘com.google.android.material:material:‘ (Yo uso 1.5.0)Dependencias en archivos gradle, que se pueden agregar automáticamente cuando se crea el proyecto.

Ahora vamos a crear el gráfico de navegación.hacer clic administrador de recursos (1) → Hacer clic navegación (2) → Haga clic en + (3) En Estudio Android.

Siguiente clic Archivos de recursos de navegación de la lista desplegable.

Finalmente ingrese un nombre de archivo para el archivo del mapa de navegación y haga clic en Aceptar.

Ahora puede encontrar su archivo de mapa de navegación en la ruta res → navegación → my_nav.xml en la estructura de su proyecto. Puede crear esta carpeta (navegación) y archivo (mi_nav.xml) utilizando el método anterior, haciendo clic derecho recurso carpeta también.

Ahora abra el archivo del gráfico de navegación y agreguemos destinos (fragmentos) al gráfico de navegación.Haga clic en el icono de agregar destino (1) → haga clic en Crear un nuevo destino (2).Después de eso, siga las instrucciones del IDE para crear el fragmento.

Creé 3 fragmentos (destino) similares a la siguiente interfaz de usuario y cambié texto y color de fondo Lo puedes encontrar aquí.

Ahora mi gráfico de navegación se ve a continuación.

A continuación, cree navHost y ábralo. actividad_principal.xml → Buscar Fragmento de host de navegación(1) → Arrastrar y soltar Fragmento de host de navegación llegar maestro de actividades ui

Luego seleccione su archivo de mapa de navegación (mi_nav.xml) desde la ventana emergente.

ahora tu actividad_principal.xml Debería tener el siguiente aspecto, con las restricciones y los ID necesarios.

A continuación, cree el menú para la navegación inferior.

hacer clic archivo de recursos de menú después del paso 3 en la imagen de arriba y asigne un nombre (menú_inferior.xml) al menú Archivo y luego haga clic en Aceptar.Ahora menú_inferior.xml archivo creado en Embalse → Menú carpeta.A continuación, cree 3 iconos vectoriales haciendo clic en Explorador→Dibujable→+→Activo vectorial

A continuación, agregue el ID, el icono y el título del fragmento (destino) como se muestra en el código a continuación.

Ahora agregue una referencia al archivo de menú a continuación Vista de navegación inferior Componentes existir actividad_principal.xml documento.

android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/black"
app:backgroundTint="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="@menu/bottom_menu" />

Ahora use el controlador de navegación para configurar la navegación inferior, agregue el siguiente código MainActivity.kt

val bottomNav = findViewById(R.id.bottom_nav)
val navController = findNavController(R.id.fragment)
bottomNav.setupWithNavController(navController)

También agregue el siguiente código si desea cambiar el título de la barra de acción cuando cambiamos de página desde la navegación inferior MainActivity.kt

val appBarConfiguration = AppBarConfiguration(setOf(R.id.firstFragment,R.id.secondFragment,R.id.thirdFragment))
setupActionBarWithNavController(navController,appBarConfiguration)

Aquí debe pasar los ID de todos los fragmentos en el gráfico de navegación a Configuración de la barra de aplicaciones.

Al final MainActivity.kt Toda la configuración anterior,

El código final se puede encontrar en este repositorio de github. Aplaude, comparte y comenta para inspirarme 🙂