中心 4 个带有约束自动布局的图像 [英] Center 4 images with constraints autolayout

问题描述

我是自动布局的新手，我有点纠结于如何将这 4 个图像在所有不同的设备中居中，就像它在图像上的样子一样.我试图应用自动配置的约束，但它会有那个距离并且不适合所有设备.所以我的问题是我需要对所有不同的图像应用什么约束才能使所有图像以相同的距离居中?

I'm new to autolayout and i'm kind of stuck on how to center these 4 images in all different devices like it looks on the images. i've tried to apply the auto configured constraints but then it will have that distance and that does not fit on all devices. So my question is what constraints do i need to apply on all different images in order to make all image centered with same distance?

这是我在storyBoard中的单元格的样子:

Here is how my cell in storyBoard looks like:

图像 1 上的约束选项图像:

image of the constraint options on image 1:

模拟器中的图片:

///我的尝试////

/// MY TRY ////

在这里你可以看到我添加的约束和结果?

Here you can see the constraints that i've added and the result?

结果:

推荐答案

您的方法几乎是正确的，它只是缺少图像的大小限制.

Your approach is almost correct, it simply lacks size constraints for the images.

如果您想动态调整图像大小并保持它们之间的空间不变，请将图像的宽度限制为 >=20(或任何其他值，取决于您的需要) 和保持纵横比的约束.然后 ctrl-drag 从 UIImageView1 到 UIImageView2 并设置 equal widths 的约束.从 UIImageView1 到 UIImageView3 以及从 UIImageView1 到 UIImageView4 重复此操作.

If you want to dynamically resize the images and keep the space between them constant, put constraints on the images for the width to be >=20(or any other value, depends on your needs) and a constraint for keeping the aspect ratio. Then ctrl-drag from UIImageView1 to UIImageView2 and set a constraint for equal widths. Repeat that from UIImageView1 to UIImageView3 and from UIImageView1 to UIImageView4.

如果您希望图像始终保持其固定大小和动态大小的空间，则需要另一种方法:

If you want the images to always keep their fixed size and dynamically sized spaces between them you need another approach:

这里的技巧是在 UIImageViews 之间放置 3 个空的 UIViews，使其看起来像这样:

The trick here is to place 3 empty UIViews between the UIImageViews so that it looks like this:

• 为所有视图设置顶部约束
• 为 UIImageView1 和 4 设置左右约束
• 将所有 UIImageView 的约束设置为相同的宽度
• 将 UIImageView 之间的所有 UIView 的约束设置为相同的宽度
• 将视图之间所有距离的约束设置为 0
• 将 UIView 的宽度限制设置为 >= 0

这种方式使得 UIImageViews 之间的空 UIViews 可以动态调整大小并且宽度都相同.

This way makes the empty UIViews between the UIImageViews to resize dynamically and all the same width.

希望你能明白.

这篇关于中心 4 个带有约束自动布局的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！