ios - doesn - uiscrollview autolayout

Cómo usar UIScrollView en Storyboard

Question

Tengo una vista de desplazamiento con contenido de 1000 px de alto y me gustaría poder diseñarlo para un diseño fácil en el guión gráfico.
Sé que se puede hacer mediante programación, pero realmente quiero poder verlo visualmente. Cada vez que pongo una vista de desplazamiento en un controlador de vista, no se desplaza. ¿Es posible hacer que funcione como yo quiero o tengo que hacerlo en el código?

Answer 1

¡Al parecer no necesitas especificar altura! Lo cual es genial si cambia por alguna razón (cambia el tamaño de los 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 ayude!

Answer 2

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

1. Seleccione Size Inspector of View Controller , y cambie Simulated Size to 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 subvista de RootView y renómbrela como ScrollView .
4. Agregar restricciones para ScrollView :
   • ScrollView [Arriba, Abajo, Adelante , Atrás ] = RootView [Arriba, Abajo, Liderando, Atrás]
5. Arrastre una Vertical Stack View como subvista de ScrollView y renómbrela como ContentView .
6. Agregue restricciones para ContentView :
   • ContentView .height = 1000
   • ContentView [Arriba, Abajo, Adelante, Atrás, Ancho] = ScrollView [Arriba, Abajo, Liderando, Atrás, Ancho]
7. Seleccione Attributes Inspector de ContentView y cambie Distribution para que se Fill Equally lugar de Fill .
8. Arrastre una View como subvista de ContentView y renómbrela como RedView .
9. Establezca Red como fondo de RedView .
10. Arrastre una View como subvista de ContentView y renómbrela como BlueView .
11. Establezca Blue como 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 Guión gráfico:

Ver jerarquía:

• RootView
  • ScrollView
    • ContentView
      • RedView
      • BlueView

Ver escena del controlador (Altura: 1000):

Ejecutar en iPhone7 (Altura: 1334/2):

Answer 3

Aquí hay un poco de una respuesta sucia que llega a la misma solución para las vistas de desplazamiento vertical, pero (contra el ethos de ) no responde la pregunta. En lugar de utilizar un scrollView, simplemente use una UITableView, arrastre una UIView normal en el encabezado y hágalo tan grande como desee, ahora puede desplazar el contenido en el guión gráfico.

Answer 4

Aquí hay una solución simple.

1. Establezca el atributo de tamaño de su controlador 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 todo el contenido de su 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 los márgenes superior, inferior, anterior y posterior a la supervista 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.

Answer 5

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. Agregue una vista de desplazamiento con restricciones - pin a la izquierda, derecha, abajo, arriba (sin márgenes) a superview (ver)
2. Agregue una vista de pila con las mismas restricciones para desplazarse por la vista.
3. Stack View Other Constraints: - stackView.bottom = view.bottom y stackView.width = scrollView.width
4. Comience a agregar sus puntos de vista. La vista de desplazamiento decidirá desplazarse en función del tamaño de la vista de la pila (que es esencialmente su vista de contenido)

Answer 6

Después de horas de prueba y error, encontré una manera muy fácil de poner contenidos en scrollviews que son ''fuera de pantalla''. Probado con XCode 5 e iOS 7. Puedes hacerlo casi por completo en Storyboard, usando 2 pequeños trucos / soluciones:

1. Arrastre un controlador de visualización en su guión gráfico.
2. Arrastre un scrollView en este viewController, para la demostración puede dejar su tamaño predeterminado, cubriendo toda la pantalla.
3. Ahora viene el truco 1 : antes de agregar cualquier elemento al scrollView, arrastre en una ''vista'' normal (Esta vista se hará más grande que la pantalla, y contendrá todos los sub elementos como botones, etiquetas, ... llamémoslo el '' vista adjunta '').
4. Deje este tamaño Y de la vista adjunta en el inspector de tamaño a, por ejemplo, 800.
5. Coloque una etiqueta en la vista adjunta, en algún lugar en la posición Y 200, asígnele el nombre ''etiqueta 1''.
6. Truco 2 : asegúrate de que la vista envolvente esté seleccionada (¡ no scrollView! ), Y establece su posición Y en, por ejemplo, -250, para que puedas agregar un elemento que esté "fuera" de la pantalla
7. Coloque una etiqueta, en algún lugar en la parte inferior de la pantalla, asígnele el nombre ''etiqueta 2''. Esta etiqueta es en realidad ''fuera de pantalla''.
8. Restablezca la posición Y de la vista adjunta a 0, ya no verá la etiqueta 2, ya que se colocó fuera de la pantalla.

Hasta ahora, para el trabajo del guión gráfico, ahora necesita agregar una sola línea de código al método ''viewDidLoad'' de viewController para establecer los contenidos de scrollViews de modo que contenga toda la ''vista adjunta''. No encontré la manera de hacerlo en Storyboard:

- (void)viewDidLoad
{
    [super viewDidLoad];

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

Puede intentar hacer esto agregando un contentSize keyPath 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 TableViewController puedes desplazarte fuera de pantalla en Storyboard (solo agrega 20 celdas, y verás que puedes desplazarte), esto también debería ser posible con ScrollViewController.

Answer 7

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

1. Inserta un UIScrollView dentro de la Vista principal de un ViewController

2. Establezca las restricciones de Autolayout en ScrollView según corresponda. Para mí utilicé 0 a la guía de diseño superior y 0 a la guía de diseño 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 de tamaño. La parte inferior habrá pasado el final del formulario.

5. Agregue la línea [self.scrollView setContentSize: CGSizeMake (320, 1000)]; al ViewController que contiene el scrollView (que ha conectado como 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 controlador de vista original. Ahora puede usar ViewController del contenedor para diseñar sus controles.

Answer 8

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

Empezar a terminar aquí es cómo hacer que funcione en el guión gráfico.

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

2: cambie el Tamaño a Freeform lugar de Inferido.

3: Ve a la vista principal de ese guión gráfico, no a la vista de desplazamiento, sino a la vista de nivel superior.

4: haga clic en Size Inspector y configure esta vista según su tamaño deseado. Cambié mi altura a 1000.

Ahora verá que su guión gráfico tiene configurada su vista para que pueda ver toda la altura de su pergamino para un diseño fácil.

5: Colóquelo en una vista de desplazamiento y estírelo para que ocupe toda la vista. Ahora debería tener una vista de desplazamiento con un tamaño de 320,1000 sentado en una vista en su controlador de vista.

Ahora tenemos que hacer que se desplace y necesitamos que muestre el contenido correctamente.

6: Haga clic en la vista de desplazamiento y haga clic en el Identity Inspector .

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

Como 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, necesitamos cambiar el marco a lo que será la vista de desplazamiento visible.

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

Ahora cuando ejecutemos nuestra aplicación, tendremos una vista de desplazamiento visible con un marco de 0,0,320, 416 y se puede desplazar hacia abajo hasta 1000. Podemos diseñar nuestras subvistas e imágenes y todo lo demás en Storyboard tal como queremos que aparezcan. Luego, nuestros atributos de tiempo de ejecución se aseguran de mostrarlo correctamente. Todo esto sin 1 línea de código.

Answer 9

La clave es contentSize.

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

Seleccione UIScrollView y seleccione el Inspector de identidad.

Agregue un contentSize keyPath como un size al scrollView en el Inspector de identidad y configurándolo en (320, 1000).

Desplácese.

Answer 10

Para este ejemplo, he desmarcado la función Autolayout del constructor Interfaz. Y, todavía estoy usando (sin ninguna razón) la relativamente vieja versión 4.6.1 de Xcode.

Comience con un controlador de vista que tenga 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 guión gráfico y está vinculado al controlador de vista con la vista de desplazamiento.

2: Seleccione la vista de contenedor y, en el Inspector de tamaño, ancle en la parte superior e izquierda sin cambio de tamaño automático.

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

4: Seleccione el nuevo controlador de vista y, desde el Inspector de atributos, cambie Tamaño a Forma libre.

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 aún está en la vista del nuevo controlador de vista, agregue una etiqueta en la parte superior y en la parte 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 keyPath establecido en contentSize, escriba set en Size y valor establecido en {320, 1000} (o el tamaño de su vista de contenedor).

8: ejecutar en el simulador de iPhone de 4 pulgadas. Debería poder 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 puede compilar para iOS6 y versiones posteriores. Usando este enfoque y construcción para iOS6, aún puedo lograr los mismos resultados cuando la aplicación se ejecuta en iOS7.

Answer 11

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 utilizaré siempre a partir de ahora

ir al punto 4 en la respuesta aceptada y olvidarse de agregar atributos de marcos y volúmenes, 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 muy contento con todo lo que lol

Answer 12

Si está utilizando el diseño automático que mejor enfoque es usar UITableViewController con celdas estáticas en el guión gráfico.

Una vez, también he enfrentado el problema con una vista que requiere mucho más desplazamiento, así que cambie UIScrollView con la técnica mencionada.

Answer 13

Solo debe establecer la propiedad contentSize en viewDidAppear, como esta muestra:

- (void)viewDidAppear:(BOOL)animated{

     [super viewDidAppear:animated];
     self.scrollView.contentSize=CGSizeMake(306,400.0);

}

Resuelve los problemas de autolayout y funciona bien en iOS7.

Answer 14

Tenga en cuenta que dentro de UITableView , puede desplazarse por la vista de tabla seleccionando una celda o un elemento y desplazarse hacia arriba o hacia abajo con su panel táctil.

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

Answer 15

Estos son los pasos que me funcionaron en iOS 7 y XCode 5.

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

   1.1 Seleccione "Ver controlador" y seleccione "Inspector de archivos" y desmarque "Diseño automático".

2. Arrastre un ScrollView (como elemento secundario 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 escriba {320, 1000} para el valor.

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

5. Seleccione Ver controlador, seleccione "Atributo inspector" y luego seleccione Forma libre desde tamaño.

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

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

7. Establezca Ancho a 320 y alto a 1000.

Nota: 5, 6 y 7 es puramente para nosotros para ver estirada o toda la vista expandida dentro de StoryBoard. Nota: asegúrese de deseleccionar "Diseño automático" en View Controller.

Su jerarquía de Vista debería verse así:

Answer 16

Hacer que Scrolling funcione en iOS7 y Auto-layout en iOS 7 y XCode 5.

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

Aparentemente, todo lo que tenemos que hacer es:

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

2. Luego, establezca la restricción distance-from-scrollView en el elemento inferior para la vista de desplazamiento (que es la vista superior).

Nota: El paso 2 le indicará al guión gráfico dónde se encuentra el último fragmento de contenido dentro de la vista de desplazamiento.