Cómo usar UIScrollView en Storyboard

Aquí están los pasos con Auto Layout eso funcionó para mí en XCode 8.2.1.

1. Seleccione Size Inspector de View Controller, y cambie 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 un Scroll View como subvista de RootView y cambie el nombre a ScrollView.
4. Añadir restricciones para ScrollView :
   • ScrollView [Top, Bottom, Leading, Trailing] = rootView [Arriba, Abajo, Al principio, Al final]
5. Arrastra a Vertical Stack View como subview de ScrollView y cámbialo por contentView.
6. Añadir restricciones para contentView :
   • contentView.altura = 1000
   • contentView [Top, Bottom, Leading, Trailing, Width] = ScrollView [Top, Bottom, Leading, Trailing, Width]
7. Seleccione Attributes Inspector de contentView, y cambie Distribution a Fill Equally en lugar de Fill.
8. Arrastre un View como subvista de ContentView y cambie el nombre a RedView.
9. Establece Redcomo el fondo de RedView.
10. Arrastre un View como subvista de ContentView y cambie el nombre a BlueView.
11. Establece Bluecomo el fondo de BlueView.
12. Seleccione rootView y haga clic en el botón Update Frames.
    • Update Frames es un nuevo botón en Xcode8, en lugar del botón Resolve Auto Layout Issues. Parece un botón de actualización, ubicado en la barra de control debajo del guion gráfico:

Jerarquía de vistas:

• rootView
  • ScrollView
    • contentView
      • RedView
      • BlueView

Escena del controlador de vista (Altura: 1000):

Ejecutar en iPhone7 (Altura: 1334 / 2):

Estos son los pasos que funcionaron para mí en iOS 7 y XCode 5.

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

   1.1 Seleccione "View Controller" y seleccione "File Inspector" y desmarque "Auto layout".

2. Arrastre un ScrollView (como hijo de UIView "View"de ViewController)
3. Seleccione ScrollView y abra "Identity Inspector".

4. Introduzca "contentSize" para la ruta del teclado. Seleccione "Tamaño" para el tipo. Y Entrar {320, 1000} para valor.

   Nota: El paso 4 simplemente dice que el scroller contiene algún contenido cuyo tamaño es de 320x1000 unidades. Así que configurar contentSize hará que el desplazador funcione.

5. Seleccione View Controller, Seleccione "Attributes Inspector" y luego seleccione Freeform desde Size.

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

6. Seleccione " Ver "y luego seleccione"Inspector de tamaño".

7. Establezca el ancho en 320 y altura a 1000.

Nota: 5, 6 y 7 es puramente para nosotros ver vista expandida o completa dentro del guion gráfico. Nota: Asegúrese de deseleccionar "Diseño automático" en el Controlador de vista.

Su jerarquía de vistas debería tener el siguiente aspecto:

Después de horas de prueba y error, he encontrado una manera muy fácil de poner contenido en scrollviews que son 'offscreen'. Probado con XCode 5 y iOS 7. Puede hacer esto casi en su totalidad en Storyboard, usando 2 pequeños trucos / soluciones :

1. Arrastre un viewcontroller a su storyboard.
2. Arrastre un ScrollView en este ViewController, para la demo puede dejar su tamaño predeterminado, cubriendo toda la pantalla.
3. Ahora viene truco 1 : antes de añadir cualquier elemento a la ScrollView, arrastre en una 'vista' regular (Esta vista se hará más grande que la pantalla, y contendrá todos los elementos secundarios como botones, etiquetas,...llamémosla la'que encierra la vista').
4. Deje que este encierre el tamaño Y de la vista en el inspector de tamaño a, por ejemplo, 800.
5. Coloque una etiqueta en la vista de cierre, en algún lugar en la posición Y 200, llámela 'etiqueta 1'.
6. Truco 2 : asegúrese de que la que encierra la vista está seleccionada (no la ScrollView !), y establezca su posición Y en, por ejemplo, -250, para que pueda agregar un elemento que esté 'fuera' de la pantalla
7. Coloque una etiqueta, en algún lugar en la parte inferior de la pantalla, llámela 'label 2'. Esta etiqueta es en realidad 'fuera de pantalla'.
8. Restablezca la posición Y de la vista de cierre a 0, ya no verá la etiqueta 2, ya que se colocó fuera de la pantalla.

Hasta ahora para el trabajo de storyboard, ahora necesita agregar una sola línea de código al método 'viewDidLoad' de ViewController para establecer el contenido de ScrollViews para que contenga toda la'vista de cierre'. No encontré una manera de hacer esto en Storyboard:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = CGSizeMake(320, 800);
}

Puede intentar hacer esto agregando un contentSize KeyPath como 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 storyboard, en un TableViewController solo 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.

Hacer que el desplazamiento funcione en iOS7 y el diseño automático en iOS 7 y XCode 5.

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

Aparentemente, todo lo que necesitamos hacer es:

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

2. Luego establezca la restricción distance-from-ScrollView en el elemento más inferior de la vista de desplazamiento (que es la súper vista).

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 función de Diseño automático del creador de interfaces. Y, todavía estoy usando (sin ninguna razón en absoluto) la relativamente antigua versión 4.6.1 de Xcode.

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

1: Agregue una Vista de contenedor, desde la Biblioteca de Objetos, a la vista de desplazamiento. Observe que se agrega un nuevo controlador de vista al guion gráfico y está vinculado al controlador de vista con la vista de desplazamiento.

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

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

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

5: Seleccione la vista del nuevo controlador 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 prueba posterior, mientras todavía esté en la vista del nuevo controlador de vista, agregue una etiqueta en la parte superior e inferior de la vista.

7: Seleccione la vista de desplazamiento desde el controlador de vista original. En el inspector de identidad, agregue un atributo con la ruta de acceso establecida en contentSize, el tipo establecido en Size y el valor establecido en {320, 1000} (o el tamaño de la vista del contenedor).

8: Ejecutar en el simulador de iPhone de 4 pulgadas. Usted debe ser capaz de desplazarse desde la etiqueta superior hasta la etiqueta inferior.

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

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

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

Para un UIScrollView, me gusta la sugerencia de Alex, pero recomendaría temporalmente cambiar el controlador de vista a freeform, aumentar la altura de la vista raíz, construir su IU (pasos 1-5), y luego cambiarla al tamaño inferido estándar cuando haya terminado para que no tenga que codificar los tamaños de contenido en tiempo de ejecución atributo. Si lo hace, se está abriendo a muchos problemas de mantenimiento al intentar admitir dispositivos de 3.5" y 4", así como la posibilidad de aumentar las resoluciones de pantalla en el futuro.

Solo debe establecer 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 diseño automático, y funciona bien en iOS7.

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

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

2. Establezca las restricciones de diseño automático en la vista de desplazamiento según corresponda. Para mí usé 0 para Arriba Guía de maquetación y 0 a la Guía de maquetación inferior

3. Dentro la vista de desplazamiento, coloque una vista de contenedor. Establezca su altura a lo que desee (p. ej. 1000)

4. Agregue una restricción de altura (1000) al contenedor para que no cambie de tamaño. La parte inferior estará más allá del final del formulario.

5. Añadir la línea [self.ScrollView setContentSize: CGSizeMake (320, 1000)]; al ViewController que contiene el ScrollView (que has conectado como un IBOutlet)

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

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

Sube al ítem 4 en respuesta aceptada y olvídate de agregar atributos de marcos y tamaños de contenido y así sucesivamente

Para hacer que todo sea automático, simplemente use la solución de este enlace

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

Descargo de responsabilidad :- Solo para ios 9 y superiores (Vista de pila).

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

1. Añadir una vista de desplazamiento con restricciones-pin a izquierda, derecha, inferior, superior (sin márgenes) a superview (view)
2. Agregue una vista de pila con las mismas restricciones a la vista de desplazamiento.
3. Vista de pila Otras restricciones :- StackView.abajo = vista.bottom y StackView.width = ScrollView.anchura
4. Comience a agregar su vista. La vista de desplazamiento decidirá desplazarse en función del tamaño de la vista de pila (que es esencialmente su vista de contenido)

Aquí hay una solución simple.

1. Establezca el atributo size de su controlador de vista en el guion gráfico en "Freeform" y establezca el tamaño que desee. Asegúrate de que sea lo suficientemente grande como para ajustarse al contenido completo de tu 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 final a la vista superior como normalmente gustar.

3. Ahora solo asegúrese de que hay restricciones en las subviews 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.

Aquí hay una respuesta un poco sucia que obtiene la misma solución para las vistas de desplazamiento vertical, pero (contra el ethos de stackoverflow) no responde a la pregunta. En lugar de usar un ScrollView, solo use un UITableView, arrastre un UIView normal al encabezado y hágalo tan grande como desee, ahora puede desplazarse por el contenido en storyboard.

Al parecer, no es necesario especificar la altura en absoluto! Lo cual es genial si cambia por alguna razón (redimensiona componentes o cambia el tamaño de las fuentes).

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

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

Espero que eso ayude!

La clave es el contentSize.

Esto a menudo falta y no se indica cuando se agrega un UIScrollView.

Seleccione UIScrollView y seleccione el Inspector de identidad.

Añade una contentSize Ruta de acceso como size al ScrollView en el Inspector de Identidad y ponlo en (320, 1000).

Desplácese.

Si está utilizando auto-layout, el mejor enfoque es usar UITableViewController con celdas estáticas en storyboard.

También me he enfrentado una vez al problema con una vista que requiere mucho más desplazamiento, así que cambie la UIScrollView con la técnica mencionada anteriormente.