Generalidades

Navegación inferior simplificada con los componentes de navegación Jetpack. | Por Sharon Ross | Marzo de 2022

Explora los componentes de navegación | Kotlin | Android X

Administrar la navegación con fragmentos se trata de manejar la pila de actividades, manejar transacciones de fragmentos, resaltar opciones de fragmentos, perderse en el medio y no saber a dónde volver.

La mejor solución a todo esto es el componente de navegación, una vez que comencé a usarlo, no pude volver atrás. Esta es una solución integral para todos los problemas a la vez. Se trata de hacer navegación inferior, que será más fácil y amena que nunca.

Antes de sumergirme en él, también publiqué un video sobre la navegación inferior y los componentes de navegación en YouTube. ¡Echar un vistazo!

  • Procesamiento automático de transacciones de fragmentos
  • Manejar correctamente hacia arriba y hacia atrás de forma predeterminada
  • Comportamiento predeterminado para animaciones y transacciones.
  • La vinculación profunda como una operación de primera clase
  • Los patrones de la interfaz de usuario de navegación (cajón de navegación y navegación inferior) se implementan con trabajo adicional.
  • Escriba seguridad al pasar parámetros mientras navega

¡Vamos a sumergirnos en el código sin esfuerzo!

Agregue las siguientes dependencias al build.gradle de su aplicación para que el componente de navegación sea compatible con su proyecto.

// Kotlin
implementation("androidx.navigation:navigation-fragment-ktx:2.4.1")
implementation("androidx.navigation:navigation-ui-ktx:2.4.1")

// Feature module Support
implementation("androidx.navigation:navigation-dynamic-features-fragment:2.4.1")

// Testing Navigation
androidTestImplementation("androidx.navigation:navigation-testing:2.4.1")

// Jetpack Compose Integration
implementation("androidx.navigation:navigation-compose:2.4.1")

Quiero crear 3 fragmentos y una actividad principal. La actividad principal se centrará en la navegación inferior y el host de navegación.

actividades principales
Fragmento-1
Fragmento 2
Fragmento 3

¿Cómo crear un mapa de navegación?

  • Vaya a su carpeta de recursos -> haga clic derecho
  • Crear archivo de recursos
  • pon el nombre que quieras
  • Seleccione Navegación en Tipo de recurso
  • Haga clic en Aceptar

Ya tienes listo tu gráfico de navegación.

Es un espacio centralizado que muestra todos los clips, transiciones y acción entre ellos. Navgraph tiene 2 partes de diseño y código, podemos diseñarlo como queramos.

así es como se ve

diseño
código

El usuario necesita llegar a un destino fijo específico después de iniciar la aplicación. La navegación debe basarse en una pila LIFO (último en entrar, primero en salir). Moverse a un nuevo destino significa empujar una nueva pantalla a la parte superior de la pila. El destino inicial será el último de la pila, y la mayoría de las veces la última página cuando cerramos la aplicación.

Configurar un destino de pila es tan fácil como hacer clic en un botón, simplemente seleccione un fragmento de la lista desplegable y esta será la primera pantalla de su aplicación.

Fragmento NavHost: el componente más importante del componente de navegación. Es un fragmento vacío que se aloja dentro y fuera a medida que el usuario navega por la aplicación.

Navegación inferior: es una vista en la parte inferior de la pantalla con varios botones, cuando se hace clic en cualquier botón, el fragmento en la parte superior cambia la interfaz de usuario según la acción realizada, y la parte inferior se resalta para ayudar al usuario a mostrar la pantalla.

xml version="1.0" encoding="utf-8"?>
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.activity.MainActivity">

android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="@id/bottomNavigation"
app:defaultNavHost="true"
android:layout_marginBottom="60dp"
app:navGraph="@navigation/nav_graph" //the nav graph/>

android:layout_height="60dp"
android:layout_width="match_parent"
android:id="@+id/bottomNavigation"
app:layout_constraintTop_toBottomOf="@id/nav_host_fragment"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="@menu/menu_bottom_nav"// the menu file />

Finalmente, necesitamos mapear el gráfico de navhost y crear un menú con opciones de navegación inferiores y mapearlo a xml.

xml version="1.0" encoding="utf-8"?>

android:id="@id/homeFragment"
android:icon="@drawable/home"
android:title="Home" />

android:id="@id/favouritesFragment"
android:icon="@drawable/home"
android:title="Favourites" />

android:id="@id/accountsFragment"
android:icon="@drawable/home"
android:title="Account" />

La navegación en la aplicación se realiza mediante NavController, que es un objeto en NavHost que gestiona la navegación de la aplicación.

Inicialice NavHost Fragment y NavHost como actividad.

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
val navController = navHostFragment.navController
val navView: BottomNavigationView = findViewById(R.id.bottomNavigation)
navView.setupWithNavController(navController)

}
}

Ahora podemos ejecutar la aplicación y ver el resultado.

De eso se tratan los componentes de navegación Jetpack y la navegación inferior.

LEER  Creación de una serie de aplicaciones de podcasts: 3. Exoplayer

Publicaciones relacionadas

Deja una respuesta

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

Botón volver arriba