Articles

UIScrollView autolayout en un storyboard. Una guía paso a paso.

  1. Empezamos añadiendo un UIScrollView a la vista principal (que puede ser la vista completa o alguna otra, pequeña, que tengas. En cualquier caso, a partir de ahora me referiré a ella como «vista principal») y añadimos las restricciones superior, inferior, izquierda y derecha.

Restricciones superior, inferior, izquierda y derecha (respecto a la vista principal)

2. Después, añadimos una UIView dentro de la UIScrollView (esta vista es un paso esencial para que el autolayout funcione correctamente). La llamé ‘Content View’ y añadí las restricciones superior, inferior, izquierda y derecha con respecto a la vista de desplazamiento. Además de eso, también añadí alturas y anchuras iguales con respecto a la vista principal.

Top, Bottom, Izquierda y derecha (con respecto a la vista de desplazamiento)

Anchos y Alturas iguales (con respecto a la vista principal)

3. El siguiente paso depende de si quieres tener un scroll vertical u horizontal. Si necesita un desplazamiento vertical, tendrá que establecer la prioridad de «Restricción de alturas iguales» en 250. Por otro lado, si lo que buscas es un scroll horizontal tendrás que establecer la prioridad ‘Equal Widths Constraint’ a 250.

Permite un scroll vertical.

Permite un desplazamiento horizontal.

4. ¡La vista de desplazamiento ya está configurada y lista para funcionar! Ahora puede empezar a añadir su contenido, pero debe tener en cuenta que la altura de la ‘Vista de Contenido’ no puede ser ambigua. Esto significa que cada vista que tenga debe tener una restricción de altura definida (altura igual a X o menor o igual a X) y que todos los componentes (o al menos debería tener una línea continua de componentes de arriba a abajo) deben tener un espacio vertical definido entre ellos.

Además, los componentes más altos y más bajos deben tener un espacio superior y un espacio inferior, respectivamente, a la ‘Vista de Contenido’.

5a) Vista de Desplazamiento Vertical – Ejemplo de configuración de componentes