Cómo usar UIScrollView en Storyboard

Tengo una vista de desplazamiento con un contenido de 1000 píxeles de alto y me gustaría poder trazar un layout fácil en el guión gráfico.
Sé que se puede hacer de forma programática, pero realmente quiero poder verlo visualmente. Cada vez que pongo una vista de desplazamiento en un controller de vista, no se desplazará. ¿Es posible hacer que funcione como quiero o tengo que hacerlo en el código?

Estoy respondiendo mi propia pregunta porque acabo de pasar 2 horas para encontrar la solución y StackOverflow permite este estilo de QA.

Empezar a terminar aquí es cómo hacer que funcione en storyboard.

1: ve a ver el controller y haz clic en Attribute Inspector .

2: cambiar tamaño a Freeform lugar de Infernetworking.

3: Vaya a la vista principal en ese storyboard, no a su vista de desplazamiento, sino a la vista de nivel superior.

4: click Size Inspector y configure esta vista en el tamaño deseado. Cambié mi altura a 1000.

Ahora verá que su storyboard tiene la configuration de su vista para que pueda ver la altura completa de su desplazamiento para un layout fácil.

5: suelte una vista de desplazamiento y estírela para que ocupe toda la vista. Ahora debería tener una vista de desplazamiento con un tamaño de 320,1000 en una vista en su controller de vista.

Ahora necesitamos hacer que se desplace y es necesario que lo muestre correctamente.

6: click su vista de desplazamiento y click Identity Inspector .

7: Agregue un User Defined runtime attribute con KeyPath de contentSize, luego escriba el TAMAÑO y coloque su tamaño de contenido. Para mí es (320, 1000).

Dado que queremos ver toda nuestra vista de desplazamiento en el guión gráfico, lo estiramos y tiene un marco de 320,1000, pero para que esto funcione en nuestra aplicación, debemos cambiar el marco a lo que será el scrollview visible.

8: Agregue un runtime attribute con la frame KeyPath con Tipo RECT y 0,0,320,416.

Ahora cuando ejecutamos nuestra aplicación tendremos una vista de desplazamiento visible que tiene un marco de 0,0,320, 416 y puede desplazarse hacia abajo hasta 1000. Podemos diseñar nuestras subvistas e imágenes y lo que está en Storyboard tal como queremos que aparezcan. Luego, nuestros attributes de time de ejecución se aseguran de mostrarlo correctamente. Todo esto sin una línea de código.

Aquí están los pasos que funcionaron para mí en iOS 7 y XCode 5.

  1. Arrastre un ViewController (viene con UIView "View").

    1.1 Seleccione "Ver controller" y select "File Inspector" y desactive "Diseño automático".

  2. Arrastre un ScrollView (como hijo de la Vista de UIView de ViewController).
  3. Seleccione ScrollView y abra "Identity Inspector".
  4. Ingrese "contentSize" para keyPath. Seleccione "Tamaño" para Tipo. Y ingrese {320, 1000} por valor.

    Nota: Paso 4 es simplemente decir que el desplazamiento contiene un contenido cuyo tamaño es de 320×1000 unidades. Entonces, configurar contentSize hará que scroller funcione.

  5. Seleccione View Controller, select "Attributes Inspector" y luego select Freeform from Size.

    Nota: el paso 5 nos permitirá cambiar el tamaño de "Ver" que viene con el controller de vista.

  6. Seleccione "Ver" y luego select "Tamaño del inspector".

  7. Establezca Ancho en 320 y alto en 1000.

Nota: 5, 6 y 7 son puramente para nosotros ver la vista expandida o completa expandida dentro de StoryBoard. Nota: Asegúrese de deseleccionar "Diseño automático" en Ver controller.

Su jerarquía de Vista debería ser similar a: jerarquía

Aquí están los pasos con Auto Layout que funcionaron para mí en XCode 8.2.1.

  1. Seleccione el Size Inspector de Size Inspector del View Controller de View Controller y cambie el Simulated Size a Freeform con altura 1000 en lugar de Fixed .
  2. Cambie el nombre de la vista de View Controller como RootView .
  3. Arrastre una Scroll View como subview de RootView y cambie su nombre como ScrollView .
  4. Agregar restricciones para ScrollView :
    • ScrollView [Arriba, Abajo, Líder, Arrastre ] = RootView [Arriba, Abajo, Líder, Arrastre]
  5. Arrastre una Vertical Stack View como subvista de ScrollView y cámbiele el nombre como ContentView .
  6. Agregar restricciones para ContentView :
    • ContentView .height = 1000
    • ContentView [Arriba, Abajo, Líder, Arrastre, Ancho] = ScrollView [Arriba, Abajo, Líder, Arrastre, Ancho]
  7. Seleccione Attributes Inspector de ContentView y cambie la Distribution para que se Fill Equally lugar de Fill .
  8. Arrastre una View como subview de ContentView y cambie su nombre como RedView .
  9. Establezca el Red como background de RedView .
  10. Arrastre una View como subview de ContentView y cambie su nombre como BlueView .
  11. Establezca Blue como background de BlueView .
  12. Seleccione RootView y click el button Update Frames .
    • Update Frames es un button nuevo en Xcode8, en lugar del button Resolve Auto Layout Issues . Parece un button de actualización, ubicado en la barra de control debajo del Storyboard: Botón Actualizar cuadros

Ver jerarquía:

  • RootView
    • ScrollView
      • ContentView
        • RedView
        • BlueView

Ver la escena del controller (Altura: 1000):

escena

Ejecutar en iPhone7 (Altura: 1334/2):

manifestación

Después de varias horas de testing y error, he encontrado una manera muy fácil de poner contenido en vistas de desplazamiento que están 'fuera de la pantalla'. Probado con XCode 5 y iOS 7. Puedes hacer esto casi por completo en Storyboard, usando 2 pequeños trucos / soluciones:

  1. Arrastra un viewcontroller a tu storyboard.
  2. Arrastre un scrollView en este viewController, para la demostración puede dejar su tamaño pnetworkingeterminado, que cubre toda la pantalla.
  3. Ahora viene el truco 1 : antes de agregar cualquier elemento al scrollView, arrastra una 'vista' regular (esta vista será más grande que la pantalla y contendrá todos los elementos secundarios como botones, tags, … llamémosle ' vista adjunta ').
  4. Deje este tamaño de Y de la vista de encierro en el inspector de tamaño para, por ejemplo, 800.
  5. Coloque una label en la vista que lo rodea, en algún lugar en la position Y 200, nómbrela como 'label 1'.
  6. Truco 2 : asegúrese de que esté seleccionada la vista adjuntano la vista de desplazamiento! ), Y establezca su position Y en, por ejemplo, -250, para que pueda agregar un elemento que esté "fuera" de la pantalla
  7. Coloca una label, en algún lugar en la parte inferior de la pantalla, denomina 'label 2'. Esta label es en realidad 'fuera de la pantalla'.
  8. Restablezca la position Y de la vista envolvente a 0, ya no verá la label 2, ya que se colocó fuera de la pantalla.

Hasta ahora para el trabajo del guión gráfico, ahora debe agregar una sola línea de código al método 'viewDidLoad' de viewController para configurar el contenido de scrollViews para que contenga toda la 'vista adjunta'. No encontré una manera de hacer esto en Storyboard:

 - (void)viewDidLoad { [super viewDidLoad]; self.scrollView.contentSize = CGSizeMake(320, 800); } 

Puede intentar hacerlo añadiendo un keyPath contentSize como un size al scrollView en el Inspector de identidad y configurándolo en (320, 1000).

Creo que Apple debería hacer esto más fácil en el guión gráfico, en un TableViewController puede desplazarse fuera de la pantalla en Storyboard (solo agregue 20 celdas, y verá que simplemente puede desplazarse), esto debería ser posible con un ScrollViewController también.

Cómo desplazarse para funcionar en iOS7 y layout automático en iOS 7 y XCode 5.

Además de esto: https://stackoverflow.com/a/22489795/1553014

Al parecer, todo lo que tenemos que hacer es:

  1. Establezca todas las restricciones en la vista de desplazamiento (es decir, arregle la vista de desplazamiento primero)

  2. Luego, establezca la distancia desde la restricción de desplazamiento hacia la parte inferior de la mayoría de los elementos para desplazarse por la vista (que es la super visión).

Nota: El paso 2 dirá storyboard donde la última pieza de contenido se encuentra dentro de la vista de desplazamiento.

Para este ejemplo, he desmarcado la function Autolayout del generador de interfaces. Y, todavía estoy usando (sin ninguna razón) la relativamente antigua versión 4.6.1 de Xcode.

Comience con un controller de vista que tenga una vista de desplazamiento sobre él (la vista principal).

1: Agregar una vista de contenedor, desde la biblioteca de objects, a la vista de desplazamiento. Observe que se agrega un controller de vista nuevo al guión gráfico y está vinculado al controller de vista con la vista de desplazamiento.

2: Seleccione la vista de contenedor y, en el Inspector de tamaño, haga que se ancle a la parte superior y a la izquierda sin cambiar de tamaño automáticamente.

introduzca la descripción de la imagen aquí

3: Cambie su altura a 1000. (Se usa 1000 para este ejemplo. Debe aplicar el valor que necesita).

4: Seleccione el nuevo controller de vista y, desde el Inspector de attributes, cambie el tamaño a Freeform.

introduzca la descripción de la imagen aquí

5: Seleccione la vista del nuevo controller de vista y, en el Inspector de tamaño, cambie la altura a 1000 (que es igual a la altura de la vista del contenedor).

6: Para su testing más adelante, mientras todavía está en la vista del nuevo controller de vista, agregue una label en la parte superior y en la parte inferior de la vista.

7: Seleccione la vista de desplazamiento desde el controller de vista original. En el inspector de identidad, agregue un atributo con el set de routes key a contentSize, escriba establecer en Tamaño y ajuste el valor a {320, 1000} (o el tamaño de la vista de contenedor).

introduzca la descripción de la imagen aquí

8: Ejecutar en el iPhone Simulator de 4 pulgadas. Debería poder desplazarse desde la label superior hasta la label inferior.

9: Ejecutar en el iPhone Simulador de 3,5 pulgadas. Debería poder desplazarse desde la label superior hasta la label inferior.

Recuerde que Xcode 4.6.1 solo puede comstackrse para iOS6 y siguientes. Usando este enfoque y desarrollando para iOS6, todavía puedo lograr los mismos resultados cuando la aplicación se ejecuta en iOS7.

Tenga en count que dentro de un UITableView , puede desplazarse por la vista de tabla seleccionando una celda o un elemento y desplazándose hacia arriba o hacia abajo con su trackpad.

Para un UIScrollView , me gusta la sugerencia de Alex, pero recomendaría cambiar temporalmente el controller de vista para freeform, boost la altura de la vista raíz, crear su interfaz de usuario (pasos 1-5) y luego cambiarlo al tamaño estándar inferido cuando esté hecho para que no tenga que codificar en duro los tamaños de contenido como attributes de time de ejecución. Si lo haces, te estás abriendo a muchos problemas de mantenimiento tratando de soportar dispositivos de 3,5 "y 4", así como la posibilidad de resoluciones de pantalla aumentadas en el futuro.

En iOS7, descubrí que si tenía una Vista dentro de un UIScrollView en un ViewController de tamaño libre, no se desplazaría en la aplicación, sin importar lo que hiciera. Jugué y encontré lo siguiente parecía funcionar, que no usa FreeForms:

  1. Inserte un UIScrollView dentro de la vista principal de un ViewController

  2. Establezca las restricciones de Autolayout en el ScrollView según corresponda. Para mí, utilicé 0 a la guía de layout superior y 0 a la guía de layout inferior

  3. Dentro de ScrollView, coloque una vista de contenedor. Establezca su altura a lo que desee (por ejemplo, 1000)

  4. Agregue una restricción de altura (1000) al contenedor para que no cambie el tamaño. La parte inferior pasará al final de la forma.

  5. Agregue la línea [self.scrollView setContentSize: CGSizeMake (320, 1000)]; al ViewController que contiene scrollView (que se ha conectado como un IBOutlet)

El ViewController (agregado automáticamente) que está asociado con el contenedor tendrá la altura deseada (1000) en Interface Builder y también se desplazará correctamente en el controller de vista original. Ahora puede usar ViewController del contenedor para diseñar sus controles.

Quiero poner mi 5 centavos a la respuesta aceptada: he estado investigando el tema durante 2 días y finalmente encontré una solución que voy a utilizar siempre a partir de ahora

sube al elemento 4 en respuesta aceptada y olvídate de agregar attributes de frameworks y contenidos, etc.

para hacer que todo sea automático solo use la solución de este enlace

todo es claro, fácil, elegante y funciona como un encanto en ios 7. Estoy bastante contento con todo lo que lol

Solo debe configurar la propiedad contentSize en viewDidAppear, como este ejemplo:

 - (void)viewDidAppear:(BOOL)animated{ [super viewDidAppear:animated]; self.scrollView.contentSize=CGSizeMake(306,400.0); } 

Resuelve los problemas de reproducción automática y funciona bien en iOS7.

Descargo de responsabilidad: – Solo para iOS 9 y superior (Vista de stack).

Si está implementando su aplicación en dispositivos ios 9, use una vista de stack . Estos son los pasos:

  1. Agregue una vista de desplazamiento con restricciones: pinche a la izquierda, derecha, inferior, superior (sin márgenes) para supervisar (ver)
  2. Agregue una vista de stack con las mismas restricciones para desplazarse por la vista.
  3. Vista de stack Otras restricciones: – stackView.bottom = view.bottom y stackView.width = scrollView.width
  4. Comienza a agregar tus vistas. La vista de desplazamiento decidirá desplazarse según el tamaño de la vista de stack (que es esencialmente su vista de contenido)

Aquí hay una respuesta desagradable que se aplica a la misma solución para las vistas verticales de desplazamiento, pero (en contra del ethos de stackoverflow) no responde a la pregunta. En lugar de usar un scrollView, simplemente use una UITableView, arrastre una UIView normal al encabezado y hágalo tan grande como desee, ahora puede desplazarse por el contenido en el guión gráfico.

Aquí hay una solución simple.

  1. Establezca el atributo de tamaño de su controller de vista en el guión gráfico en "Forma libre" y configure el tamaño que desee. Asegúrese de que sea lo suficientemente grande como para caber el contenido completo de la vista de desplazamiento.

  2. Agregue su vista de desplazamiento y establezca las restricciones como lo haría normalmente. es decir, si desea que la vista de desplazamiento sea del tamaño de su vista, adjunte sus márgenes superior, inferior, inicial y posterior a la vista de supervisión como lo haría normalmente.

  3. Ahora solo asegúrese de que haya restricciones en las subvistas de la vista de desplazamiento que conectan la parte superior e inferior de la vista de desplazamiento. Lo mismo para izquierda y derecha si tiene desplazamiento horizontal.

introduzca la descripción de la imagen aquí

Al parecer, no es necesario especificar la altura en absoluto. Lo cual es genial si cambia por algún motivo (cambia el tamaño de los componentes o cambia los tamaños de fuente).

Acabo de seguir este tutorial y todo funcionó: http://natashatherobot.com/ios-autolayout-scrollview/

(Nota al margen: No es necesario implementar viewDidLayoutSubviews a less que desee centrar la vista, por lo que la list de pasos es aún más corta).

¡Espero que ayude!

La key es contentSize.

Esto a menudo falta y no se indica al agregar un UIScrollView.

Seleccione UIScrollView y select el Inspector de identidad.

Agregue un contentSize size keyPath como un size a scrollView en el Inspector de identidad y configúrelo en (320, 1000).

Desplácese lejos.

Si usa el layout automático, el mejor enfoque es utilizar UITableViewController con celdas estáticas en el guión gráfico.

También tuve una vez el problema con una vista que requiere mucho más desplazamiento, así que cambia el UIScrollView con la técnica mencionada anteriormente.