tutorial objective how example ios uiscrollview autolayout ios9 uistackview

ios - objective - uiscrollview programmatically swift



UIStackView-Distribuye las vistas uniformemente desde el centro (1)

Tengo un UIStackView , dentro de un UIScrollView para mostrar subvistas agregadas dinámicamente organizadas horizontalmente. La solución actual comenzará a mostrar los elementos desde la izquierda, me gustaría comenzar a distribuir los elementos desde el centro sin cambiar el ancho y la altura de las subvistas. ¿Cómo puedo hacer eso? También estoy abierto a soluciones que no usan UIStackView también. De esa manera podría soportar dispositivos <iOS9.

( Actual )

( Esperado )


Respuesta corta :

Restricciones ScrollView

Leading >= 0, Trailing >= 0, Top >= 0, Bottom >= 0 Center X and Center Y

Restricciones de StackView

Leading = 0, Trailing = 0, Top = 0, Bottom = 0 StackView width = ScrollView width (priority low :250) StackView height = ScrollView height

Respuesta larga

En primer lugar, su estructura es buena, tenemos:

UIScrollView UIStackView (horizontal) Subviews

Entonces, para alcanzar la meta debemos:

  • UIScrollView el UIScrollView
  • Establezca contentSize del UIScrollView igual al tamaño del contenido intrínseco del UIStackView

Aquí está cómo hacerlo:

Paso 1: Centrar el marco del UIScrollView

CenterY restricciones de CenterY y CenterX utilizan para centrar el marco del UIScrollView

Leading Space Trailling Space > = 0, Trailling Space > = 0, Top Space > = 0, Top Space Bottom Spac e> = 0 se utilizan para evitar que el marco del UIScrollView exceda el marco de la vista principal

Usé el tamaño intrínseco del marcador de posición para no mostrar los errores relacionados con el tamaño del contenido de UIScrollView (porque todavía no tenemos las subvistas, por lo que el tamaño del contenido).

Ahora, el marco de nuestro UIScrollView está bien, vaya al siguiente paso :)

Paso 2: agregar el UIStackView horizontal

  • Las restricciones Top, Bottom, Leading, Trailing se utilizan para arreglar el marco UIStackView
  • Altura igual y ancho igual utilizado para calcular el contenido Tamaño del UIScrollView

PD. Cualquier cambio en el marco del UIStackView, cambie el contenido Tamaño del UIScrollView

Paso 3: añadir subvistas

Debido a que usamos Fill Distribution en el UIStackView todas las subviews deben tener un tamaño de contenido intrínseco (o restricciones de alto y ancho (no preferidas)). Por ejemplo, si usamos Fill Equally , solo una subview con tamaño de contenido intrínseco (o restricciones de altura y anchura (no preferidas)) suficiente, el tamaño de las demás subvistas será igual a este.

Por ejemplo: agregaré 3 etiquetas (elimine el tamaño intrínseco del marcador de posición de UIScrollView )

Funciona !! No, no, todavía no intente agregar la cuarta y cinco etiquetas :)

Por qué ?

Para entenderlo, calcularemos el marco de cada elemento de la vista con dos ejemplos:

Tamaño de la vista principal: 200, 200 Tamaño de contenido intrínseco de la primera etiqueta: 120, 50 Tamaño de contenido intrínseco de la segunda etiqueta: 150, 50

Primer ejemplo (solo la primera etiqueta en el UIStackView )

  • UIStackView contenido intrínseco de UIStackView = 120, 50
  • UIScrollView contentSize = 120, 50
  • Cuadro UIScrollView = 40, 75, 120, 50

Todos los cuadros estan bien

Segundo ejemplo (con las dos etiquetas)

  • Marco UIScrollView = 0, 0, 200, 50
  • UIScrollView contentSize = 200, 50
  • UIStackView contenido intrínseco de UIStackView = 200, 50

Por lo tanto, el UIStackView no puede mostrar correctamente las dos etiquetas (porque el ancho de UIStackView inferior al ancho de las dos etiquetas), y no tenemos el desplazamiento porque, el ancho de la restricción UIStackView es igual al ancho de UIScrollView. Funciona cuando el tamaño del contenido intrínseco de UIStackView es inferior al marco máximo de UIScrollView .

Para corregirlo, cambiamos la prioridad de la restricción de ancho a un valor inferior al valor de prioridad de tamaño de contenido intrínseco de UIStackView , y todo funciona bien :)

Espero que ayude.

Fuente de código