SafeArgs es un complemento de Gradle que le permite pasar datos a los componentes de la interfaz de usuario de destino. Genera clases de objetos y constructores simples para una navegación con seguridad de tipos y acceso a cualquier argumento asociado. Se recomienda encarecidamente Safe Args para navegar y pasar datos porque garantiza la seguridad de tipos. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin .
Implementación paso a paso
Paso 1: Crear un nuevo proyecto
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.
Paso 2: Agregar dependencia
Dentro de build.gradle (proyecto) agregue el siguiente código en dependencias.
dependencias {
classpath «androidx.navigation:navigation-safe-args-gradle-plugin:2.3.2»
}
Dentro de build.gradle (aplicación) agregue el siguiente código y haga clic en Sincronizar ahora
complementos {
id ‘com.android.aplicación’
id ‘kotlin-android’
id ‘kotlin-android-extensiones’
id «androidx.navegación.safeargs.kotlin»
}
Paso 3: crea dos nuevos fragmentos
En este artículo, enviaremos datos de un fragmento y los recibiremos en otro. Entonces, Primero, crea dos Fragmentos. Para crear un nuevo Fragmento:
Nombre del proyecto (clic con el botón derecho) -> nuevo -> Fragmento -> Fragmento (en blanco)
Se abrirá un cuadro de diálogo. En Fragment Name, escriba Registration y en Fragment layout name, escriba fragment_registration . De manera similar, cree otro fragmento con el nombre del fragmento Detail y el nombre del diseño del fragmento como fragment_detail .
Paso 4: crea un diseño XML de ambos fragmentos
Vaya al archivo Fragment_registration.xml y consulte el siguiente código. A continuación se muestra el código del archivo Fragment_registration.xml . Esto es para el diseño básico utilizado en la aplicación.
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=".Registration"> <EditText android:id="@+id/et_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_alignParentEnd="true" android:layout_margin="20dp" android:ems="10" android:hint="Name" android:inputType="textPersonName" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <EditText android:id="@+id/et_email" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" android:hint="Email" android:layout_margin="20dp" android:inputType="textPersonName" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/et_name" /> <EditText android:id="@+id/et_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" android:hint="Password" android:layout_margin="20dp" android:inputType="textPersonName" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/et_email" /> <Button android:id="@+id/button_send" android:layout_width="276dp" android:layout_height="50dp" android:text="Send" android:layout_margin="20dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/et_password" /> </androidx.constraintlayout.widget.ConstraintLayout>
Vaya al archivo Fragment_detail.xml y consulte el siguiente código. A continuación se muestra el código para el archivo Fragment_detail.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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" xmlns:app="http://schemas.android.com/apk/res-auto" tools:context=".Details"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Name :" android:id="@+id/tv1" android:textSize="20sp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="50dp" android:layout_marginStart="30dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" android:textColor="@color/black" android:id="@+id/tv_name" app:layout_constraintLeft_toRightOf="@id/tv1" app:layout_constraintTop_toTopOf="@id/tv1" android:layout_marginStart="20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Email :" android:id="@+id/tv2" android:textSize="20sp" app:layout_constraintTop_toBottomOf="@id/tv1" app:layout_constraintLeft_toLeftOf="parent" android:layout_marginTop="20dp" android:layout_marginStart="30dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" android:textColor="@color/black" android:id="@+id/tv_email" app:layout_constraintLeft_toRightOf="@id/tv2" app:layout_constraintTop_toTopOf="@id/tv2" android:layout_marginStart="20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Password :" android:id="@+id/tv3" android:textSize="20sp" app:layout_constraintTop_toBottomOf="@id/tv2" app:layout_constraintLeft_toLeftOf="parent" android:layout_marginTop="20dp" android:layout_marginStart="30dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" android:textColor="@color/black" android:id="@+id/tv_password" app:layout_constraintLeft_toRightOf="@id/tv3" app:layout_constraintTop_toTopOf="@id/tv3" android:layout_marginStart="20dp" /> </androidx.constraintlayout.widget.ConstraintLayout>
Paso 5: crea una nueva clase de Kotlin
Cree un nuevo Class User.kt , usaremos datos de » Usuario » genérico personalizado que tenga un nombre, correo electrónico y contraseña para pasar a otro fragmento.
Kotlin
import android.os.Parcelable import kotlinx.android.parcel.Parcelize @Parcelize data class User( val name : String ="", val email : String= "", val password : String ="" ) : Parcelable
Paso 6: crea un nuevo gráfico de navegación
res (clic derecho) -> nuevo -> archivo de recursos de Android
En el cuadro de diálogo, escriba el nombre del archivo como nav_graph y elija el tipo de recurso como » Navegación «. y haga clic en Aceptar. Ahora abra el archivo nav_graph.xml recién creado , haga clic en el nuevo ícono de destino y elija ambos fragmentos. Haga Fragment_registration como el hogar. Cree una acción desde fragment_registration a fragment_detail y pase el argumento User en los argumentos de Fragment_detail. Su código XML se proporciona a continuación.
XML
<?xml version="1.0" encoding="utf-8"?> <navigation 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:id="@+id/nav_graph" app:startDestination="@id/registration"> <fragment android:id="@+id/registration" android:name="com.geeksforgeeks.navargsexample.Registration" android:label="fragment_registration" tools:layout="@layout/fragment_registration" > <action android:id="@+id/action_registration_to_details" app:destination="@id/details" /> </fragment> <fragment android:id="@+id/details" android:name="com.geeksforgeeks.navargsexample.Details" android:label="fragment_details" tools:layout="@layout/fragment_details" > <argument android:name="user" app:argType="com.geeksforgeeks.navargsexample.User" /> </fragment> </navigation>
Paso 7: trabajar con el archivo activity_main.xml
Vaya al archivo activity_main.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_main.xml. Este diseño contiene un diseño de marco y un fragmento que actuará como anfitrión para los fragmentos que creamos anteriormente. Observe la etiqueta navGraph dentro de la etiqueta del fragmento.
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"> <FrameLayout android:id="@+id/frameLayout" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <!--this fragmnet will act as the host for both fragments in the main activity--> <fragment android:id="@+id/nav_Host_Fragment" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="match_parent" android:layout_height="match_parent" app:defaultNavHost="true" app:navGraph="@navigation/nav_graph" /> </FrameLayout> </androidx.constraintlayout.widget.ConstraintLayout>
Paso 8: Trabajar con el archivo Registration.kt
Vaya al archivo Registration.kt y consulte el siguiente código. A continuación se muestra el código para el archivo Registration.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.navigation.fragment.findNavController
import com.geeksforgeeks.navargsexample.databinding.FragmentRegistrationBinding
class Registration : Fragment() {
private var _binding: FragmentRegistrationBinding? = null
private val binding get() = _binding!!
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View {
_binding = FragmentRegistrationBinding.inflate(inflater, container, false)
val view = binding.root
// call onClick on the SendButton
binding.buttonSend.setOnClickListener {
val name = binding.etName.text.toString()
val email = binding.etEmail.text.toString()
val password = binding.etPassword.text.toString()
// create user object and pass the
// required arguments
// that is name, email,and password
val user = User(name,email, password)
// create an action and pass the required user object to it
// If you can not find the RegistrationDirection try to "Build project"
val action = RegistrationDirections.actionRegistrationToDetails(user)
// this will navigate the current fragment i.e
// Registration to the Detail fragment
findNavController().navigate(
action
)
}
return view
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null
}
}
Paso 9: trabajar con el archivo Details.kt
Vaya al archivo Details.kt y consulte el siguiente código. A continuación se muestra el código para el archivo Details.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.navigation.fragment.navArgs
import com.geeksforgeeks.navargsexample.databinding.FragmentDetailsBinding
class Details : Fragment() {
private var _binding: FragmentDetailsBinding? = null
private val binding get() = _binding!!
// get the arguments from the Registration fragment
private val args : DetailsArgs by navArgs()
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View {
_binding = FragmentDetailsBinding.inflate(inflater, container, false)
val view = binding.root
// Receive the arguments in a variable
val userDetails = args.user
// set the values to respective textViews
binding.tvName.text = userDetails.name
binding.tvEmail.text = userDetails.email
binding.tvPassword.text = userDetails.password
return view
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null
}
}
Nota: En este ejemplo, no tenemos que escribir ningún código dentro de ActivityMain.kt
Producción:
Github Repo aquí .