Cómo utilizar el diseño automático con UIScrollView para iOS

Me encanta crear herramientas con software, y es por eso que actualmente soy el desarrollador líder de Green 13 Solutions.

Recientemente, me he divertido mucho usando Swift y el Interface Builder en Xcode para crear aplicaciones iOS.

Me encontré con algunos desafíos cuando intentaba crear una escena donde los usuarios pueden desplazarse para ver el contenido que se desborda en la vista de contenido actual . El contenido no se desplazaba correctamente y el texto no se mostraba automáticamente correctamente para diferentes tamaños de pantalla.

Aquí hay algunas notas para que pueda consultar mi yo futuro. ¡Espero que también los encuentres útiles!

Aquí hay un repositorio para el proyecto si desea ver el ejemplo completo.

Que construiremos

Nuestra aplicación tendrá una sola página. La página contendrá algo de texto y los usuarios pueden desplazarse hacia abajo para ver el texto que se desborda de su vista de contenido actual.

Usaremos Interface Builder en Xcode para agregar un objeto UIScrollView, un objeto UIView anidado y luego otro objeto UITextView anidado. Usaremos Interface Builder para agregar restricciones a estos elementos. Las restricciones significarán que el diseño automático puede permitir que el desplazamiento se realice correctamente y la vista de texto aparecerá automáticamente en diferentes tamaños de pantalla.

Un poco de información de fondo rápida (juego de palabras)

El objeto UIScrollView se puede utilizar como objeto principal para otros elementos UIKit como UIView y UITextView.

Hacer esto significa que todos los objetos secundarios pueden tener colectivamente su origen desplazado en relación con la vista de contenido que se muestra al usuario. Esto significa que el comportamiento de 'desplazamiento' funciona como esperan los usuarios. Otro beneficio es que Auto Layout dimensionará correctamente nuestros elementos en diferentes pantallas como se esperaba.

Usamos los términos 'UIScrollView' y 'Scroll View' indistintamente a continuación, y de manera similar para Vista y Vista de texto.

A continuación se muestran los pasos a seguir.

Agregar vista

Cree un nuevo proyecto y seleccione 'Aplicación de vista única'. Si hace clic en Main.storyboard y verá que tenemos una escena con un elemento de Vista en blanco.

Agregar vista de desplazamiento

Arrastre un elemento de la interfaz de usuario de la vista de desplazamiento desde la biblioteca de objetos a la escena. Luego agregue las restricciones que se muestran en la imagen a continuación para anclar el elemento Vista de desplazamiento a los bordes de su Área segura principal.

Agregar un elemento de vista

Utilice la biblioteca de objetos para arrastrar un elemento de vista a la escena. La Vista será el contenedor principal de nuestro elemento Vista de texto.

Cambie manualmente el tamaño del elemento Ver con el cursor para que ocupe todo el ancho de la pantalla.

Vista de anclaje a vista de desplazamiento

Haga clic en el elemento Ver en la jerarquía de objetos y arrastre + suelte el cursor sobre el elemento Vista de desplazamiento que se encuentra arriba en la jerarquía. Haga clic en las 4 opciones superiores para aplicar estas restricciones. Haga clic en 'Equal Widths' para aplicar esta restricción también.

¿Por qué? Restringir la vista de esta manera significa que un elemento secundario de la vista de texto que agregamos funciona correctamente con el diseño automático. Esto sucede porque restringimos la Vista de texto a la parte inferior de la Vista (¡que anclamos correctamente en la parte inferior de la Vista de desplazamiento!) En lugar de directamente a la parte inferior de la Vista de desplazamiento.

Verá que las guías de diseño en Interface Builder son rojas porque hay algún otro error. Arreglaremos esto en breve.

Agregar vista de texto como niño para ver

Agregue un elemento Vista de texto dentro del elemento Vista en la escena.

Agregar restricciones a la vista de texto

Agregue las restricciones en la imagen de abajo a la Vista de texto.

¿Por qué? Esto limitará la Vista de texto en relación con el objeto Vista que la rodea.

Deshabilitar el comportamiento de desplazamiento en la vista de texto

Debería tener una pantalla similar a la siguiente. Puede ver que todavía hay mucho rojo en el Interface Builder.

Puede eliminar estas advertencias seleccionando el elemento Vista de texto y anulando la selección de 'Desplazamiento habilitado' en el panel del editor en el lado derecho.

Tenga en cuenta que todavía tendremos un comportamiento de desplazamiento con este enfoque, pero será la Vista de desplazamiento principal la que realmente se esté moviendo, no el elemento individual de Vista de texto . ¡Es lo mismo que una hoja solo se mueve en un río porque el río que la rodea se mueve!

Esto es un poco sutil pero bastante importante de entender, ya que sustenta toda la solución.

Finalmente

Agrega más contenido a la Vista de texto. Debería ver que el desplazamiento funciona como se esperaba y que la Vista de texto aparece correctamente en diferentes tamaños de pantalla.

¡Ésta es la belleza del diseño automático!

Aquí hay un repositorio para el proyecto si desea ver el ejemplo completo.

Toda la información sobre los petirrojos para el contenido de la Vista de texto proviene directamente de Wikipedia. Gracias a la comunidad por esto.

¿Por qué petirrojos? ¡Porque me encantan los pájaros y los petirrojos son criaturas particularmente asombrosas!

Gracias por leer, espero que te haya resultado útil. ¡Por favor, avíseme si tiene algún comentario o pregunta!