En el artículo anterior View Binding en Android Jetpack , se discutió por qué la adquisición de la función ViewBinding en el proyecto de Android brinda muchos beneficios. Pero cuando se trata de ViewBinding con fragmentos, el escenario cambia. Debido a que el ciclo de vida del Fragmento es diferente y el de la actividad es diferente Aquí también las cosas van igual como se discutió en el artículo anterior, las convenciones de nomenclatura del diseño del fragmento se cambian al caso pascal y las propiedades del diseño del fragmento al caso camel. Por ejemplo, fragment1.xml -> Fragment1Binding y edit_text (id) que está debajo del diseño del fragmento cambia a eEditText(caso del camello) Entonces, en este artículo, ViewBinding se analiza usando Fragmentos. 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 de actividad vacío
- Con Android Studio, cree un proyecto de Activity Android Studio vacío. Consulte Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio? .
Paso 2: habilite la función ViewBinding
- Habilite la función ViewBinding invocando el siguiente fragmento de código dentro del archivo build.gradle del nivel de la aplicación y haga clic en los botones «Sincronizar ahora» que aparecen en la esquina superior derecha.
construir características {
viewBinding = verdadero
}
- Consulte la siguiente imagen si no puede ubicar el archivo build.gradle de nivel de aplicación que invoca la función de compilación anterior.
Paso 3: trabajar con el archivo activity_main.xml
- El diseño principal de la actividad contiene dos botones, para alternar el fragmento 1 y el fragmento 2, y un Framelayout para contener los fragmentos dentro de CardView . Y un botón Enviar para verificar cuando se presiona de quién se envían los datos del fragmento.
- Para implementar lo mismo, invoque el siguiente código dentro del archivo activity_main.xml .
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" tools:viewBindingIgnore="true"> <Button android:id="@+id/fragment_1B" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="FRAGMENT 1" app:layout_constraintEnd_toStartOf="@+id/fragment_2B" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/fragment_2B" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="FRAGMENT 2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/fragment_1B" app:layout_constraintTop_toTopOf="parent" /> <androidx.cardview.widget.CardView android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="256dp" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/fragment_1B"> <FrameLayout android:id="@+id/fragment_holder" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginEnd="8dp" /> </androidx.cardview.widget.CardView> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:text="SUBMIT" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/card_view" /> </androidx.constraintlayout.widget.ConstraintLayout>
Interfaz de usuario de salida:
Paso 4: Creando dos fragmentos
- Cree dos fragmentos, que incluyen una vista de texto para representar el texto de edición del número de fragmento y un botón. Para implementar la interfaz de usuario de cada fragmento, puede consultar los siguientes códigos.
- Fragmento 1:
XML
<?xml version="1.0" encoding="utf-8"?> <!--fragment 1--> <LinearLayout 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" android:orientation="vertical" tools:context=".ExampleFragment1" tools:ignore="HardcodedText"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:text="Fragment 1" android:textSize="18sp" /> <EditText android:id="@+id/edit_text1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:hint="Enter Something" /> <Button android:id="@+id/done_button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end" android:layout_marginTop="8dp" android:layout_marginEnd="16dp" android:text="DONE" /> </LinearLayout>
- Fragmento 2:
XML
<?xml version="1.0" encoding="utf-8"?> <!--fragment 2--> <LinearLayout 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" android:orientation="vertical" tools:context=".ExampleFragment2" tools:ignore="HardcodedText"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:text="Fragment 2" android:textSize="18sp" /> <EditText android:id="@+id/edit_text2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:hint="Enter Something" /> <Button android:id="@+id/done_button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end" android:layout_marginTop="8dp" android:layout_marginEnd="16dp" android:text="DONE" /> </LinearLayout>
Paso 5: trabajar con los archivos Fragments.kt
- En primer lugar, la variable vinculante que admite valores NULL se asigna a NULL inicialmente, y también cuando la vista del fragmento se destruye, nuevamente debe establecerse en NULL (que en este caso es _binding ).
- Y para evitar la verificación nula del objeto de vinculación anulable, mediante el uso de la propiedad de respaldo de kotlin hacemos otra copia de la variable de vinculación (que en este caso es vinculante ).
- Sin embargo, si el fragmento desea acceder a las vistas desde la actividad del host, puede hacerlo mediante el método findViewById() .
- Invoque el siguiente código dentro de cada uno de los archivos .kt del fragmento. Se agregan comentarios para una mejor comprensión.
- Fragmento 1:
Kotlin
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.Toast
import androidx.fragment.app.Fragment
// Enter your package name here
import com.adityamshidlyali.gfgarticle.databinding.Fragment1Binding
class ExampleFragment1 : Fragment() {
// assign the _binding variable initially to null and
// also when the view is destroyed again it has to be set to null
private var _binding: Fragment1Binding? = null
// with the backing property of the kotlin we extract
// the non null value of the _binding
private val binding get() = _binding!!
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View {
// inflate the layout and bind to the _binding
_binding = Fragment1Binding.inflate(inflater, container, false)
// retrieve the entered data by the user
binding.doneButton1.setOnClickListener {
val str: String = binding.editText1.text.toString()
if (str.isNotEmpty()) {
Toast.makeText(activity, str, Toast.LENGTH_SHORT).show()
} else {
Toast.makeText(activity, "Please Enter Data", Toast.LENGTH_SHORT).show()
}
}
// handle the button from the host activity using findViewById method
val submitButton: Button = activity!!.findViewById(R.id.submit_button)
submitButton.setOnClickListener {
Toast.makeText(activity, "Host Activity Element Clicked from Fragment 1", Toast.LENGTH_SHORT).show()
}
// Inflate the layout for this fragment
return binding.root
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null
}
}
- Fragmento 2:
Kotlin
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.Toast
import androidx.fragment.app.Fragment
// Enter your package name here
import com.adityamshidlyali.gfgarticle.databinding.Fragment2Binding
class ExampleFragment2 : Fragment() {
// assign the _binding variable initially to null and
// also when the view is destroyed again it has to be
// set to null
private var _binding: Fragment2Binding? = null
// with the backing property of the kotlin
// we extract
// the non null value of the _binding
private val binding get() = _binding!!
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View {
// inflate the layout and bind to the _binding
_binding = Fragment2Binding.inflate(inflater, container, false)
// retrieve the entered data by the user
binding.doneButton2.setOnClickListener {
val str: String = binding.editText2.text.toString()
if (str.isNotEmpty()) {
Toast.makeText(activity, str, Toast.LENGTH_SHORT).show()
} else {
Toast.makeText(activity, "Please Enter Data", Toast.LENGTH_SHORT).show()
}
}
// handle the button from the host activity using findViewById method
val submitButton: Button = activity!!.findViewById(R.id.submit_button)
submitButton.setOnClickListener {
Toast.makeText(activity, "Host Activity Element Clicked from Fragment 2", Toast.LENGTH_SHORT).show()
}
// Inflate the layout for this fragment
return binding.root
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null
}
}
Paso 6: trabajar con el archivo MainActivity.kt
- En el archivo MainActivity.kt solo se implementa la funcionalidad de transacción de los fragmentos. Consulte el siguiente código y su salida para una mejor comprensión.
Kotlin
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import com.adityamshidlyali.gfgarticle.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
// create binding instance for the activity_main.xml
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
// when app is initially opened the Fragment 1 should be visible
supportFragmentManager.beginTransaction().apply {
replace(binding.fragmentHolder.id, ExampleFragment1())
addToBackStack(null)
commit()
}
// handle the fragment 2 button to toggle the fragment 2
binding.fragment1B.setOnClickListener {
changeFragment(ExampleFragment1())
}
// handle the fragment 2 button to toggle the fragment 2
binding.fragment2B.setOnClickListener {
changeFragment(ExampleFragment1())
}
}
// function to change the fragment which is used to reduce the lines of code
private fun changeFragment(fragmentToChange: Fragment): Unit {
supportFragmentManager.beginTransaction().apply {
replace(binding.fragmentHolder.id, fragmentToChange)
addToBackStack(null)
commit()
}
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por adityamshidlyali y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA