Imágenes del Centro 4 con restricciones de autoajuste

Soy nuevo en autolayout y estoy un poco atrapado en cómo centrar estas 4 imágenes en todos los dispositivos diferentes como se ve en las imágenes. Intenté aplicar las restricciones configuradas automáticamente, pero tendrá esa distancia y eso no encaja en todos los dispositivos. Entonces, mi pregunta es: ¿qué limitaciones debo aplicar en todas las imágenes diferentes para centrar toda la image con la misma distancia?

Así es como se ve mi celda en storyboard:

introduzca la descripción de la imagen aquí

image de las opciones de restricción en la image 1:

introduzca la descripción de la imagen aquí

image en simulador:

introduzca la descripción de la imagen aquí

/// MI TRATO ////

Aquí puede ver las restricciones que he agregado y el resultado.

introduzca la descripción de la imagen aquí

resultado:

introduzca la descripción de la imagen aquí

Su enfoque es casi correcto, simplemente carece de restricciones de tamaño para las imágenes.

Si desea cambiar el tamaño dinámicamente de las imágenes y mantener el espacio entre ellas constante, ponga restricciones en las imágenes para que el ancho sea >=20 (o cualquier otro valor, depende de sus necesidades) y una restricción para mantener la relación de aspecto. Luego ctrl-arrastre desde UIImageView1 a UIImageView2 y establezca una restricción para anchos iguales . Repita eso desde UIImageView1 a UIImageView3 y desde UIImageView1 a UIImageView4 .

introduzca la descripción de la imagen aquí


Si desea que las imágenes mantengan siempre su tamaño fijo y espacios dinámicamente dimensionados entre ellas, necesita otro enfoque:

El truco aquí es colocar 3 UIViews vacías entre UIImageViews para que se vea así:

introduzca la descripción de la imagen aquí

  • Establecer restricciones en la parte superior para todas las vistas.
  • Establezca restricciones a la izquierda y derecha para UIImageView1 y 4
  • Establecer restricciones para todas UIImageViews con el mismo ancho
  • Establezca las restricciones para todas las UIViews entre UIImageViews al mismo ancho
  • Establece restricciones para todas las distancias entre las vistas a 0
  • Establezca las restricciones de ancho para UIViews a >= 0

De esta forma, las UIViews vacías entre UIImageViews se cambian de tamaño de forma dinámica y con el mismo ancho.

Espero que tengas la idea.

Para la primera image, agregue un espacio principal a la vista de supervisión y, para la última image, agregue un espacio posterior a la vista de supervisión y agregue espacios verticales entre el primero y segundo, segundo y tercero, tercero y cuarto y también establezca horizontalmente el centro dentro del contenedor a cada una de las imágenes

Los objects en su storyboard requieren al less 4 restricciones por object .

Cuando hay líneas naranjas alnetworkingedor del object UIImageView como aparece en su pregunta, esto significa que falta una restricción, o que está en conflicto y que a menudo puede significar que la image no se muestra en el time de ejecución como era de esperar.

En primera instancia, le recomiendo que select todos los objects y 'clear constraints', luego comience de nuevo.

Aunque no es exactamente el mismo, aquí hay un enlace a una respuesta que explica las restricciones de layout automático con un poco más de detalle. Una vez que lo entiendas, el layout automático puede ser muy poderoso.

>> Enlace a similar problema de layout automático – iOS CustomTableViewCell: elementos que no se alinean correctamente <<

espero que esto ayude

Si desea que las imágenes mantengan siempre su tamaño fijo y espacios dinámicamente dimensionados entre ellos, entonces la forma más fácil primero arrastre las cuatro UIView en su set de StoryBoard, construya la esquina superior izquierda derecha y la altura para todas las UIViews y proporcione el ancho igual a todas las UIViews. (arrastre de una vista UIV a otra y establezca su ancho igual repita este trabajo para todas las UIViews).

Imagen sobre layouts

En segundo lugar, debe arrastrar su set de imágenes en estas UIViews y establece su ancho de altura de restricción y el centro horizontal en el contenedor y el centro verticalmente en el contenedor.

En el último set, el color de background de todos los UIViews pnetworkingeterminados (blanco), obtendrá el resultado, funcionará … lo aseguro.

Captura de pantalla de Xcode