Ios 使用约束自动布局将4个图像居中

Ios 使用约束自动布局将4个图像居中,ios,objective-c,iphone,swift,autolayout,Ios,Objective C,Iphone,Swift,Autolayout,我是autolayout的新手,我有点执着于如何在所有不同的设备上居中放置这4幅图像,就像图像上显示的那样。我已经尝试应用自动配置的约束,但它将有这样的距离,这并不适合所有设备。所以我的问题是,为了使所有图像以相同的距离居中,我需要对所有不同的图像应用什么约束 下面是我在故事板中的单元格的外观: 图像1上约束选项的图像: 模拟器中的图像: ///我的尝试//// 在这里您可以看到我添加的约束和结果 结果: 对于第一张图像,在superview中添加前导空格,对于最后一张图像,在super

我是autolayout的新手,我有点执着于如何在所有不同的设备上居中放置这4幅图像,就像图像上显示的那样。我已经尝试应用自动配置的约束,但它将有这样的距离,这并不适合所有设备。所以我的问题是,为了使所有图像以相同的距离居中,我需要对所有不同的图像应用什么约束

下面是我在故事板中的单元格的外观:

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

模拟器中的图像:

///我的尝试////

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

结果:


对于第一张图像,在superview中添加前导空格,对于最后一张图像,在superview中添加尾随空格,在第一张和第二张、第二张和第三张、第三张和第四张图像之间添加垂直间距,并且在容器内为每个图像设置水平中心,它只是缺少图像的大小限制

如果要动态调整图像大小并保持图像之间的间距不变,请在图像上设置宽度为
=20
(或任何其他值,具体取决于您的需要)的约束,以及保持纵横比的约束。然后按ctrl键从
UIImageView1
拖动到
UIImageView2
并设置相等宽度的约束。从
UIImageView1
UIImageView3
和从
UIImageView1
UIImageView4
重复上述步骤



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

这里的技巧是在UIImageView之间放置3个空UIView,使其看起来像这样:

  • 将所有视图的约束设置为顶部
  • 为UIImageView1和UIImageView4设置左右约束
  • 将所有UIImageView的约束设置为相同的宽度
  • 将UIImageView之间的所有UIView的约束设置为相同的宽度
  • 将视图之间的所有距离的约束设置为0
  • 将UIView的宽度约束设置为
    =0
这种方式使UIImageView之间的空UIView动态调整大小,且宽度相同


我希望您能理解。

故事板上的对象要求每个对象至少有4个约束

当UIImageView对象周围出现橙色线条时,如您的问题中所示,这意味着缺少约束或约束冲突,通常意味着图像在运行时不会像您预期的那样显示

在第一个实例中,我建议您选择所有对象和“清除约束”,然后重新开始

虽然不完全相同,但这里有一个链接,指向更详细地解释自动布局约束的答案。一旦你理解了它,自动布局可以是非常强大的


>>链接到类似的自动布局问题-iOS CustomTableViewCell:元素未正确对齐如果您希望图像始终保持其固定大小和动态大小的间距,那么最简单的方法是首先在情节提要中拖动四个UIView 为所有UIView设置“约束左上角-右上角”和“高度”,并为所有UIView指定相等的宽度(从一个UIView拖动到另一个UIView并设置其相等的宽度对所有UIView重复此操作)

其次,您必须拖动在这些UIView中设置的图像,并在容器中设置其约束高度、宽度和水平中心以及垂直中心

在最后设置的背景颜色的所有UIView默认(白色)你得到的结果,它将工作…我保证


一个建议是为图像视图创建一个容器视图。然后将容器视图放在视图控制器视图的中心。我已经试着完全按照你说的做了。看看下面我的问题。嘿,谢谢你抽出时间。我可以看到你已经做了一个演示项目。为了展示的目的。我一直在努力,但似乎仍然没有结果。你能和我分享这个项目吗。我已经编辑了我的答案,请检查这是否解决了你的问题。谢谢,我现在就看一看!如果我选择第一种方法,我想我需要使细胞高度动态。这怎么可能?这个把戏真的解决了我的问题。令人难以置信的是,对于基本问题来说,自动布局有时是相当困难的(或者至少不是微不足道的)。