Presentación Modal en desarrollo móvil: qué es, tipos de pantallas

¿Qué es la Presentación Modal?

Presentación Modal es un patrón de navegación en el que una nueva pantalla aparece sobre la actual, bloqueando temporalmente la interacción con el contenido principal. El usuario debe completar explícitamente la tarea modal (cancelar, guardar, cerrar) para volver al estado anterior.

La modalidad resuelve una tarea cognitiva: enfoca la atención del usuario en una sola acción sin distracción del resto de la interfaz. Esto es críticamente importante para formularios de registro, diálogos de confirmación, selección de archivos y autorización a través de servicios de terceros. Las Human Interface Guidelines de Apple recomiendan usar la modalidad solo para tareas que requieren finalización antes de continuar.

A diferencia de las ventanas modales web, la Presentación Modal móvil puede ser de pantalla completa (ocupando toda la pantalla) o parcial (Page Sheet, Bottom Sheet). La elección del tipo depende del contexto de la tarea y las convenciones de la plataforma. iOS tiende a usar Page Sheet para la mayoría de los escenarios, dejando Full Screen para reproductores de video y editores de fotos.

¿En qué se diferencia la presentación modal de Push?

Push Presentation (navegación por pila) agrega una pantalla a la pila de navegación y muestra automáticamente un botón de retroceso. El usuario puede volver a la pantalla anterior en cualquier momento. La Presentación Modal, por el contrario, requiere una finalización explícita: el botón de retroceso está ausente o cierra la ventana modal en lugar de regresar a la pantalla anterior.

Las principales diferencias entre la presentación modal y push: Presentación Modal bloquea la navegación hacia atrás sin pérdida de datos, requiere una acción para cerrar (Save, Cancel, Done) y generalmente representa una tarea separada. Push Presentation conserva la jerarquía de navegación, agrega automáticamente un botón de retroceso y es adecuada para la visualización secuencial de contenido.

En la práctica, la elección entre Modal y Push depende del contexto. Se recomienda usar la modalidad para tareas que el usuario debe completar antes de continuar, y Push para la exploración secuencial de contenido. Mezclar patrones en la misma pantalla causa confusión y degrada la experiencia de usuario.

Presentación Modal en iOS: UIKit y SwiftUI

iOS ofrece varios estilos de presentación modal a través de la enumeración UIModalPresentationStyle. UIKit admite .fullScreen (pantalla completa), .pageSheet (tarjeta con margen superior), .formSheet (ventana centrada en iPad) y .automatic (el sistema elige según el contexto). Desde iOS 13, el estilo predeterminado es .automatic, que selecciona .pageSheet para iPhone.

UIViewController.present

El método básico de UIKit para la presentación modal es present(_:animated:completion:). El controlador que llama al método se convierte en presentingViewController, y el nuevo en presentedViewController. El cierre se realiza mediante dismiss(animated:completion:). SwiftUI proporciona el modificador .sheet para un comportamiento similar.

SwiftUI .sheet

El enfoque declarativo de SwiftUI utiliza los modificadores .sheet y .fullScreenCover. El primero crea un Page Sheet, el segundo una presentación modal de pantalla completa. Ambos aceptan un binding a un Bool o un objeto identificable que controla la visibilidad de la ventana modal. El cierre ocurre cuando el binding se establece en false o al llamar a dismiss desde el entorno.

struct ContentView: View {
    @State private var showModal = false

    var body: some View {
        Button("Abrir formulario") {
            showModal = true
        }
        .sheet(isPresented: $showModal) {
            RegistrationForm()
        }
    }
}

struct RegistrationForm: View {
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        Button("Guardar") { dismiss() }
    }
}

Presentación Modal en Android: Fragment y Compose

Android no tiene una API única para la presentación modal como iOS. En su lugar, la plataforma ofrece varios mecanismos: DialogFragment para ventanas de diálogo, BottomSheetDialogFragment para paneles inferiores y Activity con indicadores NEW_TASK y CLEAR_TOP para pantallas modales. Jetpack Compose introdujo un componente Dialog unificado para todos los tipos de ventanas modales.

DialogFragment

DialogFragment es la clase base para ventanas modales en el SDK de Android. Gestiona el ciclo de vida del diálogo, maneja la rotación de pantalla y guarda el estado. El fragmento se muestra sobre la Activity sin bloquear la pila de navegación. El cierre se realiza mediante dismiss() o tocando fuera del área del diálogo si setCancelable(true).

Modal Bottom Sheet

BottomSheetDialogFragment muestra una ventana modal como un panel que se eleva desde la parte inferior. Este patrón es popular en Material Design para selección de opciones, uso compartido y acciones rápidas. El BottomSheet puede tener altura fija o expandible (altura de vista previa + altura completa). En Compose se utiliza ModalBottomSheet de la biblioteca Material3.

@Composable
fun ModalScreen(onDismiss: () -> Unit) {
    Dialog(onDismissRequest = onDismiss) {
        Card(
            modifier = Modifier.padding(16.dp)
        ) {
            Column {
                Text("Formulario modal", style = MaterialTheme.typography.headlineSmall)
                Button(onClick = onDismiss) {
                    Text("Cerrar")
                }
            }
        }
    }
}

Mejores prácticas de presentación modal

Las ventanas modales son una herramienta potente de UX, pero su uso excesivo degrada la experiencia del usuario. Apple HIG y Google Material Design coinciden en las recomendaciones: la modalidad debe aplicarse para tareas enfocadas y no superar el 20% del total de acciones de navegación.

Cuándo usar la presentación modal

Las ventanas modales son adecuadas para escenarios: ingreso de datos (formularios de registro, perfiles), confirmación (eliminación, envío), selección (selector de fecha, administrador de archivos) y autorización (OAuth, Firebase Auth). Si la tarea toma menos de 30 segundos y requiere bloqueo de contexto, elija la modalidad.

Qué evitar

No use la presentación modal para: visualización secuencial de contenido (use Push), visualización de errores (use Toast o Snackbar), anuncios y ofertas promocionales sin solicitud explícita del usuario. Material Design recomienda evitar ventanas modales anidadas, ya que desorientan al usuario y alteran la jerarquía de navegación.

Para ventanas modales con campos de texto, asegúrese de manejar la pérdida de enfoque del teclado. Cuando aparece el teclado, la ventana modal debe desplazarse hacia arriba para que el usuario vea el texto que está ingresando. UIKeyboardWillShowNotification en iOS y adjustResize en Android resuelven esta tarea.

Ejemplos de código en Swift y Kotlin

Veamos la implementación de la presentación modal en ambas plataformas. El ejemplo en Swift muestra la configuración de UIModalPresentationStyle.pageSheet con un delegado para manejar el cierre. El ejemplo en Kotlin demuestra DialogFragment con un diseño personalizado y conservación del estado.

let modalVC = ModalViewController()
modalVC.modalPresentationStyle = .pageSheet

if let sheet = modalVC.sheetPresentationController {
    sheet.detents = [.medium(), .large()]
    sheet.prefersGrabberVisible = true
}

modalVC.presentationController?.delegate = self
present(modalVC, animated: true)

// MARK: - UIAdaptivePresentationControllerDelegate
extension ViewController: UIAdaptivePresentationControllerDelegate {
    func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
        print("Modal cerrado")
    }
}

class ModalDialogFragment : DialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_modal, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        view.findViewById<Button>(R.id.closeButton).setOnClickListener {
            dismiss()
        }
    }
}