Si deseas llevar tu proyecto en Swift al siguiente nivel, es importante prestar atención a la forma en que se ajusta la vista según la orientación del dispositivo. Dominar esta técnica no solo mejorará la apariencia visual de tu proyecto, sino que también brindará una experiencia de usuario excepcional. En este tutorial, aprenderás cómo ajustar la vista según la orientación (portrait o landscape) en Swift y aprovechar al máximo el proyecto realizado en el Curso de Swift con Storyboards.
La orientación del dispositivo tiene un impacto directo en cómo se muestra el contenido de tu proyecto en Swift. Aquí tienes algunas pautas para ajustar la vista correctamente:
Cuando el dispositivo está en modo portrait, es esencial optimizar la vista para garantizar una experiencia fluida. Sigue estos consejos clave:
Auto Layout: Utiliza Auto Layout para establecer restricciones (constraints) adecuadas en los elementos de tu interfaz de usuario. Esto permitirá que se ajusten y se posicionen correctamente en cualquier tamaño de pantalla.
Manejo de la Orientación: Aprovecha los métodos y notificaciones proporcionados por UIKit para manejar cambios en la orientación. Asegúrate de ajustar las dimensiones y las posiciones de los elementos de la interfaz de usuario en función de la orientación actual.
Personalización del Diseño: Considera realizar cambios específicos en la apariencia y distribución de tu interfaz de usuario en modo portrait. Puedes mostrar menos elementos o reorganizarlos para garantizar una visualización óptima.
Cuando el dispositivo está en modo landscape, tienes más espacio horizontal para trabajar. Sigue estas recomendaciones para aprovecharlo:
Aprovecha el Espacio: Utiliza el espacio adicional para mostrar más contenido o elementos en tu interfaz de usuario. Asegúrate de que los elementos se vean proporcionales y bien distribuidos.
Adaptación de la Interfaz: Considera ajustar la posición, el tamaño y la apariencia de los elementos en modo landscape. Puedes reorganizarlos para optimizar la experiencia del usuario y garantizar una visualización atractiva.
Pruebas y Ajustes: Realiza pruebas exhaustivas en diferentes dispositivos y orientaciones para asegurarte de que tu proyecto se vea y funcione correctamente. Realiza ajustes según sea necesario para lograr la mejor experiencia de usuario en ambas orientaciones.
Ahora, para ilustrar esto, tomaremos el proyecto de “¿Quién es ese Pokémon?”, y mejoraremos la presentación de la vista en los modos vertical (portrait) y horizontal (landscape). En este proyecto, implementaremos cambios para optimizar la experiencia del usuario y aprovechar al máximo el espacio disponible en el modo vertical (portrait).
Sin embargo, al girar el dispositivo y cambiar a modo landscape, nos encontramos con problemas en el diseño y una utilización ineficiente del espacio disponible.
Es crucial abordar esta situación y realizar ajustes necesarios para mejorar la calidad y coherencia del proyecto en todas las orientaciones. Esto no solo mejorará la experiencia del usuario, sino que también permitirá que nuestro proyecto se destaque entre la competencia.
¡Es hora de solucionar este problema y llevar nuestro proyecto al siguiente nivel!
Nota: Tambien podemos establecer una unica orientacion de nuestro proyecto, no es el objetivo de este tutorial, pero te lo muestro de todas formas. Tienes que acceder a el target de tu proyecto y desabilitar las orientaciones que no utilizaremos en nuestro proyecto.
Reajustamos la vista principal en portrait para hacerlo el diseño más responsivo y preparar la vista para cuando esta sea presentada en landscape.
Aquí hemos agregado un Stack horizontal como contenedor general de nuestras vistas, que utilizaremos más adelante para acoplar la vista en modo horizontal y reducir la cantidad de constraints necesarios.s
Realicemos pruebas en diferentes tamaños de dispositivos para asegurarnos de que nuestro diseño siga siendo lo más parecido al original y de que no tengamos ningún problema visual. En caso de tener problemas, realizaremos ajustes y repetiremos el proceso.
Reajustemos la vista para que se vea correctamente en modo landscape. En este caso, realizamos un ajuste en la orientación del Stack Container y en la prioridad de la relación de aspecto del Stack que contiene el encabezado y el Pokémon. Esto nos permitirá identificar los constraints que necesitaremos modificar para hacer que la vista se vea de manera responsiva en este modo de orientación.
Ahora realizamos pruebas en diferentes tamaños de dispositivos para asegurarnos que nuestro diseño siga siendo lo más parecido al original y que no tengamos ningún problema visual. En caso de tener problemas realizamos ajustes y repetimos el proceso.
Preparemos todas las relaciones de los constrains a modificar y las vistas a manipular, para preparar todo antes de empezar a codificar. Esto lo hacemos seleccionando el componente o el constrain y lo jalamos hacia nuestro documento de ViewController.
Ya teniendo todo listo pasamos a la etapa de codificaciones, para poder detectar el cambio de orientación del dispositivo utilizaremos sobreescribir el método:
overridefuncviewWillTransition(to size: CGSize, withcoordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
//Este metodo se ejecutara justo antes de empezar la configuraicon para rotar el dispositivo.
}
Ya que este método se ejecutara justo antes de un cambio de orientación, en este utilizaremos la clase UIAplication para obtener la orientación nueva que adoptara el dispositivo.
iflet windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene {
let interfaceOrientation = windowScene.interfaceOrientation
switchinterfaceOrientation {
case .portrait:
// La orientación es vertical (retrato)breakcase .landscapeLeft, .landscapeRight:
// La orientación es horizontal (paisaje)breakdefault:
// Nueva orientación agregada en futuras versiones de iOSbreak
}
}
Ahora, teniendo las anteriores bases, agregaremos nuestro código, el cual nos permita ajustar la vista en forma horizontal y en forma vertical. En mi caso quedo de la siguiente forma.
¡Listo, ya tenemos nuestro diseño responsivo a pesar de la orientación del dispositivo móvil!, pero no se te olvide que el usuario puede ingresar a tu app en una orientación diferente a la que tienes planeada, por lo cual es muy importante agregar esta validación a tu código, en mi caso lo hice de la siguiente manera:
En mi caso lo agregué a al método setupUI() el cual se encarga de ejecutar las configuraciones de mis componentes gráficos y este método solo se ejecuta una vez en el ciclo de vida de mi ViewController, este método está en el método viewDidLoad.
¡Listo, ya estás listo para darle un diferenciador enorme a tu app!
Para finalizar te dejo la dirección de mi repositorio donde encontraras este código por si te perdiste en algo. La versión que contiene este cambio es v1.0.1
Ajustar la vista según la orientación del dispositivo es una parte esencial del desarrollo de aplicaciones móviles. Al aplicar las mejores prácticas y técnicas adecuadas, podrás mejorar la apariencia visual de tu proyecto en Swift y brindar una experiencia de usuario excepcional. Recuerda utilizar Auto Layout, manejar adecuadamente los cambios de orientación y personalizar el diseño para aprovechar al máximo el espacio disponible. Realiza pruebas exhaustivas en diferentes dispositivos y orientaciones para asegurarte de que tu proyecto se vea y funcione correctamente. ¡Sigue estos consejos y lleva tu proyecto en Swift al siguiente nivel!
