UIStackView: distribuya las vistas de manera uniforme desde el centro

Tengo un UIStackView , dentro de un UIScrollView para mostrar subidas dinámicamente agregadas organizadas horizontalmente. La solución actual comenzará a mostrar elementos de la izquierda, me gustaría comenzar a distribuir 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.

Curioso

( Actual )

Esperado

( 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 deberíamos:

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

Aquí es cómo hacerlo:

Paso 1: Centrar el marco de la UIScrollView

introduzca la descripción de la imagen aquí

CenterY restricciones CenterY y CenterX utilizadas para centrar el marco de UIScrollView

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

Utilicé el tamaño intrínseco de marcador de position para no mostrar errores relacionados con el contenido Tamaño de UIScrollView (porque aún no tenemos las vistas secundarias, por lo que contentSize).

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

Paso 2: agregue el UIStackView horizontal

introduzca la descripción de la imagen aquí

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

PD. Cualquier cambio en el marco de UIStackView, cambie el contenido Size de UIScrollView

Paso 3: agregar subvenciones

Debido a que usamos Fill Distribution en el UIStackView todas las subviews deben tener un tamaño de contenido intrínseco (o restricciones de altura y anchura (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 preferida)) será suficiente, el tamaño de otro subvista será igual a este.

Por ejemplo: agregaré 3 tags (elimine el tamaño intrínseco del marcador de position de UIScrollView )

introduzca la descripción de la imagen aquí

Funciona !! no, no, no intentes agregar cuarto y cinco tags 🙂

Por qué ?

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

El tamaño de vista principal: 200, 200 El tamaño de contenido intrínseco de la primera label: 120, 50 El tamaño de contenido intrínseco de la segunda label: 150, 50

Primer ejemplo (solo la primera label en UIStackView )

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

Todos los frameworks están bien.

Segundo ejemplo (con las dos tags)

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

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

Para corregir eso, 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 🙂

introduzca la descripción de la imagen aquí

Espero que ayude.

Fuente del código