Descripción general de la navegación en los componentes de la arquitectura de Android

La navegación básicamente en el desarrollo móvil se refiere a la interacción entre diferentes pantallas o contenidos dentro de la aplicación. El componente de la arquitectura de Android Jetpack, la navegación, es tan poderoso que brinda una experiencia de usuario consistente y predecible. El componente de navegación ayuda a implementar la navegación entre actividades y fragmentos o fragmentos de datos en la aplicación mediante simples clics de botón. En este artículo, se ha discutido desde las propiedades de la tecla de navegación hasta la implementación de la navegación de muestra entre los fragmentos.

Tres propiedades clave de la Navegación son:

1. Gráfico de navegación: este es el archivo XML que contiene todas las áreas de contenido individuales, dentro de las aplicaciones denominadas destinos. Estos pueden ser caminos posibles que los usuarios pueden tomar a través de la aplicación.
2. NavHost: este es el archivo XML que es un contenedor vacío que muestra los destinos a medida que el usuario navega, an. Básicamente, contiene NavHostFragment, que muestra los distintos destinos de Navigation Graph.
3. NavController: NavController es un objeto que gestiona la navegación de destinos con NavHost. Esto controla el intercambio de contenido de destino a medida que el usuario navega por los destinos a través de la aplicación.

Los beneficios que obtienen los desarrolladores del componente de navegación son:

• El componente de navegación maneja la transacción Fragment.
• Manejo de acciones hacia arriba y hacia atrás, básicamente manejo de Backstack.
• Proporciona animaciones y transiciones estandarizadas al cambiar el contenido de NavHost.
• Fácil manejo e implementación de enlaces profundos.
• Fácil manejo e implementación de patrones de IU de navegación, como el cajón de navegación o las vistas de navegación inferior, etc.
• Safe Args, un complemento de Gradle que proporciona una transferencia de datos segura entre los destinos.
• El componente de navegación también es compatible con ViewModel. Puede abarcar un modelo de vista a un gráfico de navegación para compartir la interfaz de usuario relacionada entre destinos.

Primeros pasos con el componente de navegación

Nota: el componente de navegación requiere Android Studio versión 3.3 o superior

Paso 1: crear un proyecto de actividad vacío

Cree un proyecto de Android Studio de actividad vacío. Y seleccione Kotlin como lenguaje de programación. android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio? .

Paso 2: Agregar las dependencias requeridas

Las siguientes son las dependencias que deben invocarse dentro del archivo Gradle de nivel de aplicación.

// nav_version puede variar

def versión_navegación = “2.3.5”

// componente de navegación

implementación “androidx.navigation:navigation-fragment-ktx:$nav_version”

implementación “androidx.navigation:navigation-ui-ktx:$nav_version”

implementación «androidx.navigation:navigation-dynamic-features-fragment:$nav_version»

androidTestImplementation «androidx.navigation: prueba de navegación: $nav_version»

Agregue el siguiente complemento dentro del archivo Gradle de nivel de aplicación:

id «androidx.navegación.safeargs.kotlin»

A continuación se muestra el classpath que se necesita invocar dentro de las dependencias del archivo Gradle de nivel de proyecto o de nivel superior.

// nav_version puede variar

def versión_navegación = “2.3.5”

classpath «androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version»

Paso 3: Creando la primera propiedad del Componente de Navegación

Creación del gráfico del componente de navegación, que contiene todos los destinos. Para crear un archivo XML de gráfico de navegación , haga clic con el botón derecho en la carpeta res -> Ir a nuevo -> y seleccione Archivo de recursos de Android. Este paso se demuestra en la siguiente imagen.

Ahora asigne el nombre para el fragmento de inicio como navigation_graphs y seleccione el Tipo de recurso como Navegación y haga clic en el botón Aceptar. Este paso se demuestra en la siguiente imagen.

Ahora cree un nuevo fragmento haciendo clic en el ícono + que se muestra en el editor y seleccione «Crear nuevo destino», luego deje en blanco el fragmento y haga clic en siguiente. Ahora asigne el nombre del fragmento como fragment_1. Este paso se demuestra en el siguiente video.

Ahora, siguiendo el paso anterior, crea otro fragmento llamado fragment_2. Ahora agregue el botón Navegar al archivo fragment_1.xml, ya que cuando se hace clic en él se navega a fragment_2. Para implementar la interfaz de usuario, invoque el siguiente código dentro del archivo fragment_1.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment_1"
    tools:ignore="HardcodedText">
  
    <TextView
        style="@style/TextAppearance.MaterialComponents.Headline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/navigate_button"
        android:layout_centerHorizontal="true"
        android:text="This is Fragment 1" />
  
    <Button
        android:id="@+id/navigate_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="NAVIGATE TO FRAGMENT 2" />
  
</RelativeLayout>

Ahora, para diferenciar entre también haga cambios en la interfaz de usuario dentro del archivo fragment_2.xml. Para implementar los cambios, invoque lo siguiente dentro del archivo fragment_2.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment_2"
    tools:ignore="HardcodedText">
  
    <TextView
        style="@style/TextAppearance.MaterialComponents.Headline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="This is Fragment 2" />
  
</RelativeLayout>

Paso 4: agregar acciones para navegar del fragmento 1 al fragmento 2

Desde el archivo navigation_graphs.xml debajo de la sección de diseño, arrastre y suelte la flecha del fragmento 1 al fragmento 2. Y luego popUpTo fragmento 1, ya que cuando el usuario hace clic en el botón Atrás, el usuario debe navegar al fragmento 1. Consulte lo siguiente video si no puede obtener este paso.

popUpTo extrae los fragmentos a fragmentos específicos de la pila trasera si el usuario presiona el botón Atrás.

Paso 5: maneje el clic del botón del fragmento 1

Maneje el botón, haga clic en el fragmento 1 para navegar al fragmento 2. Para implementar lo mismo, invoque el siguiente código dentro del archivo fragment_1.kt .

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import androidx.navigation.fragment.findNavController
  
class fragment_1 : Fragment() {
  
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        // Inflate the layout for this fragment
        val view: View = inflater.inflate(R.layout.fragment_1, container, false)
  
        // create instance of navigate button
        val navigateButton: Button = view.findViewById(R.id.navigate_button)
  
        // handle the navigate button to navigate to the fragment 2
        navigateButton.setOnClickListener {
  
            // if fragment_1Directions is giving error then rebuild the project
            val action = fragment_1Directions.actionFragment1ToFragment22()
            findNavController().navigate(action)
        }
  
        return view
    }
}

Paso 6: Trabajando con activity_main.xml

Ahora, en activity_main.xml, es necesario alojar el fragmento de inicio, que es el fragmento 1. Para implementar lo mismo, invoque el siguiente código dentro del archivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    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=".MainActivity"
    tools:ignore="HardcodedText">
  
    <fragment
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/navigation_graphs" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Producción:

La salida se ve extraña y agregar animaciones hace que se vea elegante. Siga el video que se muestra a continuación para agregar animaciones a las transiciones de fragmentos.