Patron MVVM I - Callbacks

Israel Lucas Torrijos        Prog. multimedia y disp. móviles

Tabla de contenido

Patron MVVM II - Callbacks        2

1.        Crear el proyecto        2

1.1.        Crear un fragmento        2

1.2.        Diseñar la vista del fragmento        3

1.3.        Diseñar la actividad principal        5

2.        Bloqueos, pérdida de datos y Memory Leaks        6

2.1.        Bloqueo        6

2.2.        Pérdida de datos (Data Leakage)        10

2.3.        Fugas de memoria (Memory Leak)        11

3.        Arquitectura MVVM        12

4.        Implementación MVVM        13

4.1.        Model: HipotecaModel        13

4.2.        ViewModel: HipotecaViewModel        14

4.3.        View: MiHipotecaFragment        16

5.        Comunicación de componentes        18

6.        Mecanismo callback        19

6.1.        Pasos para implementar un mecanismo callback        19

7.        Incluir callbacks al proyecto        24

7.1.        Model: HipotecaModel        24

7.2.        ViewModel: HipotecaViewModel        25

7.3.        View: MiHipotecaFragment        27

8.        Barra de progreso        29

8.1.        Model: HipotecaModel        29

8.2.        ViewModel: HipotecaViewModel        31

8.3.        View: MiHipotecaFragment        33

Patron MVVM II - Callbacks

Esta guía muestra cómo implementar la arquitectura Model-View-ViewModel (MVVM) en una aplicación Android, integrando la clase Callback. La arquitectura MVVM es recomendada por Google, ya que facilita la separación de responsabilidades y mejora la mantenibilidad del código.

1. Crear el proyecto

Primero, generamos un proyecto con una actividad vacía (Empty Activity). Luyego, en el archivo build.gradle, agregamos las siguientes dependencias necesarias para MVVM, LiveData y Navigation:

implementation ("androidx.lifecycle:lifecycle-viewmodel:2.8.6")
implementation ("androidx.lifecycle:lifecycle-livedata:2.8.6")

implementation ("androidx.navigation:navigation-fragment:2.8.2")
implementation ("androidx.navigation:navigation-ui:2.8.2")

Para utilizar ViewBinding, que permite interactuar fácilmente con los elementos de la interfaz de usuario, añadimos el siguiente bloque en la sección android de tu archivo build.gradle:

buildFeatures {
viewBinding = true
}

1. Crear un fragmento

El siguiente paso consiste en crear un fragmento que servirá como la interfaz de usuario principal. Este fragmento será gestionado por un FragmentContainerView en la actividad principal.

Para crear el fragmento:

• Haz clic derecho en la carpeta de tu proyecto.
• Navega a New > Fragment > Fragment (Blank).
• Sigue las indicaciones para nombrar el fragmento, MiHipotecaFragment, y generar el archivo XML de diseño y la clase correspondiente.

[pic 1]

A continuación, abrimos la clase java MiHipotecaFragment.java, eliminamos todo el código generado por plantilla (boilerplate), excepto el constructor y los métodos: onCreate() y onCreateView().

Configuramos el ViewBinding dentro del fragmento y ajustamos el código de los métodos.

La clase la tendremos que definir para obtener el siguiente código:

public class MiHipotecaFragment extends Fragment {
   private FragmentMiHipotecaBinding binding;;

   public MiHipotecaFragment() { }

   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
   }

   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
                            Bundle savedInstanceState) {
       binding = FragmentMiHipotecaBinding.inflate(inflater, container, false);
       return binding.getRoot();
   }

}

1. Diseñar la vista del fragmento

En el layout del fragmento, añadimos dos EditText para el capital y el plazo, un botón para calcular la cuota, y un TextView para mostrar el resultado.

<?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=".MiHipotecaFragment">

   <EditText
       android:id="@+id/capital"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginStart="16dp"
       android:layout_marginTop="16dp"
       android:layout_marginEnd="16dp"
       android:hint="@string/capital"
       android:minHeight="48dp"
       android:gravity="center"
       android:inputType="numberDecimal"
       android:textSize="32sp"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       tools:ignore="Autofill,TextFields,VisualLintTextFieldSize" />

   <EditText
       android:id="@+id/plazo"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginStart="16dp"
       android:layout_marginTop="8dp"
       android:layout_marginEnd="16dp"
       android:hint="@string/plazo"
       android:minHeight="48dp"
       android:gravity="center"
       android:inputType="numberDecimal"
       android:textSize="32sp"
       app:layout_constraintEnd_toEndOf="@+id/capital"
       app:layout_constraintStart_toStartOf="@+id/capital"
       app:layout_constraintTop_toBottomOf="@+id/capital"
       tools:ignore="Autofill,TextFields,VisualLintTextFieldSize" />

   <Button
       android:id="@+id/calcular"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginStart="16dp"
       android:layout_marginTop="24dp"
       android:layout_marginEnd="16dp"
       android:text="@string/btnCuota"
       android:textColor="@color/white"
       app:layout_constraintEnd_toEndOf="@+id/plazo"
       app:layout_constraintStart_toStartOf="@+id/plazo"
       app:layout_constraintTop_toBottomOf="@+id/plazo"
       tools:ignore="VisualLintButtonSize,TextContrastCheck" />

   <TextView
       android:id="@+id/cuota"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginStart="16dp"
       android:layout_marginTop="16dp"
       android:layout_marginEnd="16dp"
       android:gravity="center_horizontal|top"
       android:textColor="#ff4356"
       android:textSize="60sp"
       app:layout_constraintEnd_toEndOf="@+id/calcular"
       app:layout_constraintStart_toStartOf="@+id/calcular"
       app:layout_constraintTop_toBottomOf="@+id/calcular" />
</androidx.constraintlayout.widget.ConstraintLayout>

...