Crear una vista de desplazamiento con Swift: 9 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:43

Hace unos meses, no sabía la existencia de Swift y Xcode. Hoy, pude desarrollar una pequeña parte de la aplicación que quiero crear. Pude crear algo genial, que me gustaría compartir con ustedes.

En este tutorial, lo guiaré a través del proceso de creación de una escena de vista de desplazamiento, en la que los usuarios serán redirigidos cuando quieran registrar una nueva cuenta. A lo largo del camino, me aseguraré de brindarle algunas explicaciones teóricas de las cosas que hacemos, para que realmente pueda comprender qué es lo que estamos haciendo.

Antes de hacer eso, hablemos sobre qué es Swift y Xcode:

1. Swift es un lenguaje de programación potente e intuitivo para macOS, iOS, watchOS y tvOS. Escribir código Swift es interactivo y divertido, la sintaxis es concisa pero expresiva, y Swift incluye características modernas que encantan a los desarrolladores. El código Swift es seguro por diseño, pero también produce software que se ejecuta a la velocidad del rayo. Está diseñado para funcionar con los marcos Cocoa y Cocoa Touch de Apple y el gran cuerpo de código Objective-C existente escrito para productos Apple. Está construido con el marco del compilador LLVM de código abierto y se ha incluido en Xcode desde la versión 6, lanzada en 2014. En las plataformas Apple, utiliza la biblioteca de tiempo de ejecución Objective-C que permite la ejecución de código C, Objective-C, C ++ y Swift. dentro de un programa.

2. Xcode es un entorno de desarrollo integrado (IDE) para macOS que contiene un conjunto de herramientas de desarrollo de software desarrolladas por Apple para desarrollar software para macOS, iOS, watchOS y tvOS.

Paso 1: Descarga Xcode

Xcode 10 incluye todo lo que necesita para crear aplicaciones increíbles para todas las plataformas de Apple. Ahora Xcode e Instruments se ven geniales en el nuevo Modo oscuro en macOS Mojave. El editor de código fuente le permite transformar o refactorizar el código más fácilmente, ver los cambios en el control de la fuente junto con la línea relacionada y obtener rápidamente detalles sobre las diferencias de código ascendente. Puede construir su propio instrumento con visualización personalizada y análisis de datos. Swift compila software más rápidamente, lo ayuda a entregar aplicaciones más rápidas y genera binarios aún más pequeños. Los conjuntos de pruebas se completan muchas veces más rápido, trabajar con un equipo es más simple y seguro, y mucho más.

Xcode 10 incluye Swift 4.2, que compila su software más rápidamente, lo ayuda a entregar aplicaciones más rápidas y genera binarios aún más pequeños. En comparación con Swift 4.0, el último compilador de Swift puede crear aplicaciones grandes más del doble de rápido. * Combinado con el nuevo sistema de compilación nueva de Xcode, su flujo de trabajo diario de edición, compilación y prueba es mucho más rápido. Optimizados para el último hardware Mac de múltiples núcleos, Xcode y Swift crean una plataforma de desarrollo ultrarrápida.

Paso 2: comencemos

Entonces, lo que haremos es ir a Xcode y crear un nuevo proyecto. Una vez que hagamos clic en un nuevo proyecto, nuestra aplicación será una aplicación de vista única. Para aquellos que no lo sepan, una aplicación de vista única significa que necesitará comenzar todo desde cero y que habrá una vista única que podemos programar.

Nombra tu producto TutorialApp. Si es un desarrollador experimentado que publica aplicaciones en la App Store, probablemente tendrá un equipo, pero si es nuevo y no tiene ninguna aplicación publicada, puede omitir este campo. En el nombre de la organización, puede escribir el nombre de la empresa en caso de que tenga una, en mi caso me quedaré con MacBook Pro. Entonces, el identificador de organización se considera algo así como un identificador único de su proyecto, por lo tanto, puede escribir lo que quiera. El lenguaje definitivamente será rápido.

Entonces, presione siguiente y guardemos el proyecto en el escritorio para que sea fácil de acceder.

El nuevo proyecto consta de tres archivos, AppDelegate.swift, ViewController.swift y la estrella de este tutorial: Main.storyboard. En Información de implementación> Orientación del dispositivo en la configuración general del proyecto, configure Dispositivos como iPhone. Dado que esta es una aplicación de solo retrato, desmarque las opciones Horizontal izquierda y Horizontal derecha. Abra Main.storyboard en el navegador de proyectos para verlo en Interface Buildereditor:

No vamos a realizar ningún cambio en la configuración e iremos directamente al storyboard principal. Como creamos una aplicación de vista única, creamos una vista simple, en blanco. Esto es algo en lo que tenemos que trabajar.

Paso 3: trabajar en la interfaz de usuario

La terminología oficial del guión gráfico para un controlador de vista es "escena", pero puede usar los términos indistintamente. Una escena representa un controlador de vista en el guión gráfico.

Aquí puede ver un controlador de vista único que contiene una vista vacía. La flecha que apunta al controlador de vista desde la izquierda indica que es el controlador de vista inicial que se mostrará para este guión gráfico. El diseño de un diseño en el editor de guiones gráficos se realiza arrastrando los controles de la biblioteca de objetos (ver la esquina superior derecha) a su controlador de vista.

Para tener una idea de cómo funciona el editor de guiones gráficos, arrastre algunos controles de la Biblioteca de objetos al controlador de vista en blanco como se ve en el video.

A medida que arrastra los controles, deberían aparecer en el esquema del documento a la izquierda.

Puede crear la interfaz de usuario que desee. En mi caso, utilicé el que ves en la imagen.

Paso 4: Desarrolle un controlador de segunda vista e inicie segmentos (transiciones)

Entonces, en mi aplicación, cuando el usuario presiona el botón "Registrar nueva cuenta", quiero que sea redirigido a la página de registro de cuenta. Entonces, para ese propósito, cada página es una nueva escena, una nueva pantalla. Por esa razón, tenemos que crear un segundo controlador de vista, que puede encontrar en la biblioteca de objetos.

Escriba controlador de vista y colóquelo junto a su controlador de vista inicial. Esta escena será responsable del controlador de vista de registro. La redirección a esa página se puede realizar de dos formas:

1. podemos hacerlo manualmente cuando hacemos una conexión de acción desde el botón al otro control de vista
2. podemos hacerlo programáticamente

Lo que elegí hacer es hacerlo manualmente. Es tan simple como eso:

1. Haga un clic izquierdo en su botón (en mi caso, Registrar nueva cuenta)
2. Mantenga presionado el comando y haga clic con el botón izquierdo del mouse para arrastrarlo a la escena de control de registro.
3. Suéltelo allí y elija "Presentar modalmente"

Paso 5: crear una clase de programación para el proceso de registro

Entonces, ahora queremos crear una clase de codificación dedicada para la nueva escena.

Para hacerlo, debe seguir los siguientes pasos:

• haga clic derecho en la carpeta de su proyecto
• haga clic en el nuevo archivo llamado clase cocoa touch
• en clase escribir: RegisterVC
• ¡MUY IMPORTANTE! Asegúrese de que la subclase debe ser de tipo UIViewController
• el lenguaje debe ser rápido.
• haga clic en siguiente y guarde su clase de cacao en la raíz principal de su proyecto.
• Haga clic en el guión gráfico principal y vaya al nuevo controlador de vista
• haga clic en el botón amarillo que se encuentra encima de él
• a la derecha, vaya al inspector de la clase y haga una referencia al registro VC (clase Costum, clase = RegisterVC

Paso 6: crea el deslizamiento horizontal de la página

En iOS, las vistas de desplazamiento se utilizan para ver contenido que no cabe por completo en la pantalla. Las vistas de desplazamiento tienen dos propósitos principales:

Para permitir que los usuarios arrastren el área del contenido que desean mostrar, para permitir que los usuarios acerquen o alejen el contenido mostrado usando los gestos de pellizco. Un control común utilizado en las aplicaciones de iOS, UITableView, es una subclase de UIScrollView y proporciona una excelente manera de ver contenido que es más grande que la pantalla.

¿Para qué sirven las subpáginas en un deslizamiento horizontal?

Bueno, si tuviera que crear 6 páginas diferentes, significaría que tengo que crear una clase dedicada para cada una de ellas y no es tan conveniente pasar información de una clase a otra. Cuando, por ejemplo, escribo mi correo electrónico y luego hago clic en siguiente, si tengo un controlador de vista diferente, dejaré la primera página del controlador de vista y luego se presentará la segunda. En este caso, la información del primer controlador de vista debe pasarse al siguiente y luego nuevamente al tercer controlador de vista, etc. Cuando tenga todos los controladores de vista que necesito, tendré que recopilar todos los datos de todos las páginas y enviarlas al servidor. Entonces, esto sería realmente complejo.

Entonces, pasando a la creación de este controlador de vista, en mi caso, tenía 5 páginas que quería crear:

1. Correo electrónico
2. Nombre completo
3. Contraseña
4. Fecha de cumpleaños
5. Género

Esto significa que el controlador de vista que crearemos debe ser 5 veces más grande que el que hicimos antes.

Seleccione su controlador de vista y vaya a la esquina superior derecha y haga clic en el icono de la regla y edite el Tamaño simulado. Elegirás Forma libre para ajustar el ancho y el alto. El ancho predeterminado de la pantalla que es adecuado para el iphone 8 es 375, así que si multiplico 375 * 5 = 1875. Y aquí tienes, tienes un controlador de vista extendido.

Del mismo modo, sigue el mismo proceso para todos los diferentes teléfonos y tamaños de pantalla.

Para que la vista de desplazamiento funcione, necesitamos un objeto de vista de desplazamiento. Scroll View proporciona un mecanismo para mostrar contenido que es más grande que el tamaño de la ventana de la aplicación. Haga clic en este objeto, arrástrelo y colóquelo en la esquina superior izquierda del controlador de vista y asegúrese de que X e Y estén en posiciones cero y que el estiramiento corresponda a su controlador de vista.

Scroll View solo nos permite desplazarnos, nada más. Luego, necesitamos agregar una vista de contenido, que almacenará otras vistas. Puede encontrar UIView, que representa una región rectangular en la que dibuja y recibe eventos, en la biblioteca de objetos. Simplemente, haga clic y arrástrelo a la vista de desplazamiento y, una vez más, estírelo en consecuencia.

Seleccione la vista de desplazamiento del panel izquierdo y llamaremos alineación 0, 0, 0, 0 y agregaremos restricciones. Haga lo mismo con la vista de contenido.

Paso 7: Desarrolle la interfaz de usuario para las subpáginas del deslizamiento horizontal

En este paso, debe crear la interfaz de usuario de sus subpáginas. Lo que elegí hacer fue hacer un prototipo en Sketch y luego construirlo en Xcode.

Paso 8: implementar el diseño en Xcode

El siguiente paso es implementar este diseño en Xcode. Para hacerlo, debe crear conexiones de salida para todas las subpáginas y crear otra para la "vista madre", es decir, una conexión de salida para todo el controlador de vista.

Los elementos de un guión gráfico están vinculados al código fuente. Es importante comprender la relación que tiene un guión gráfico con el código que escribe.

En un guión gráfico, una escena representa una pantalla de contenido y, por lo general, un controlador de vista. Los controladores de vista implementan el comportamiento de su aplicación y administran una vista de contenido única con su jerarquía de subvistas. Coordinan el flujo de información entre el modelo de datos de la aplicación, que encapsula los datos de la aplicación, y las vistas que muestran esos datos, administran el ciclo de vida de sus vistas de contenido, manejan los cambios de orientación cuando se gira el dispositivo, definen la navegación dentro de su aplicación e implementar el comportamiento para responder a la entrada del usuario. Todos los objetos de controlador de vista en iOS son del tipo UIViewController o una de sus subclases.

Usted define el comportamiento de sus controladores de vista en código creando e implementando subclases de controlador de vista personalizadas. Luego, puede crear una conexión entre esas clases y escenas en su guión gráfico para obtener el comportamiento que definió en el código y la interfaz de usuario que definió en su guión gráfico.

Xcode ya creó una de esas clases que miraste anteriormente, ViewController.swift, y la conectó a la escena en la que estás trabajando en tu guión gráfico. A medida que agregue más escenas, hará esta conexión usted mismo en el inspector de identidad. El inspector de identidad le permite editar las propiedades de un objeto en su guión gráfico relacionadas con la identidad de ese objeto, como a qué clase pertenece el objeto.

Crear salidas para elementos de la interfaz de usuario Las salidas proporcionan una forma de hacer referencia a los objetos de la interfaz, los objetos que agregó a su guión gráfico, a partir de archivos de código fuente. Para crear una salida, mantenga presionada la tecla Control y arrastre desde un objeto en particular en su guión gráfico hasta un archivo de controlador de vista. Esta operación crea una propiedad para el objeto en su archivo de controlador de vista, que le permite acceder y manipular ese objeto desde el código en tiempo de ejecución.

1. Abra su guión gráfico, Main.storyboard.
2. Haga clic en el botón Asistente en la barra de herramientas de Xcode cerca de la esquina superior derecha de Xcode para abrir el editor asistente. Si desea más espacio para trabajar, contraiga el navegador del proyecto y el área de utilidades haciendo clic en los botones Navegador y Utilidades en la barra de herramientas de Xcode.
3. También puede contraer la vista de esquema.

En la barra de selección del editor, que aparece en la parte superior del editor asistente, cambie el editor asistente de Vista previa a Automático> ViewController.swift.

Haga clic en la subpágina y arrastre a la clase apropiada en el código.

Paso 9: Integra gestos personalizados

GESTO DE DESLIZAR

Un gesto de deslizamiento ocurre cuando el usuario mueve uno o más dedos por la pantalla en una dirección horizontal o vertical específica. Utilice la clase UISwipeGestureRecognizer para detectar gestos de deslizamiento.

Implementación del gesto de deslizar

Paso 1: Agregue gestos de deslizamiento en el método viewDidLoad ()

anular la función viewDidLoad () {super.viewDidLoad ()

let swipeLeft = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer (swipeLeft)

let swipeRight = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer (swipeRight)

let swipeUp = UISwipeGestureRecognizer (objetivo: self, action: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

let swipeDown = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeDown.direction =.down self.view.addGestureRecognizer (swipeDown)}

Paso 2: Verifique la detección de gestos en el método handleGesture () func handleGesture (gesto: UISwipeGestureRecognizer) -> Void {if Gesto.dirección == UISwipeGestureRecognizerDirection.right {print ("Deslizar hacia la derecha")} else if Gesto.dirección == UISwipeGestureRecognizerDirection. izquierda {print ("Deslizar hacia la izquierda")} else if gesto.direction == UISwipeGestureRecognizerDirection.up {print ("Deslizar hacia arriba")} else if gesto.direction == UISwipeGestureRecognizerDirection.down {print ("Deslizar hacia abajo")}}

En mi aplicación, quería usar swipeRight, pero me sentí libre de usar el que sea más apropiado para su aplicación.

Ahora, implementemos esto en nuestro código.

Vamos al registerVC.swift que creamos antes y escribimos el código como puedes ver en las imágenes.

EXPLICACIÓN DEL CÓDIGO

deje que current_x obtenga la posición actual de ScrollView (posición horizontal) deje que screen_width obtenga el ancho de la pantalla, deduciendo este tamaño deje que new_x de la posición actual de la vista de desplazamiento, regrese por el ancho de la pantalla si current_x> 0 hasta que sea más de 0 - 0 es la primera página.

¡Y hemos terminado!

¡Buen trabajo muchachos!