Question

我正在尝试使用Swift中的自动布局实现下面显示的图像（http://i.stack.imgur.com/jKmGO.png），但每次我都会遇到一些问题。谁能告诉我在水平网格中为3,4,5或更多图像视图实现这种排列的自动布局的最佳方法。

Answer 1

请尝试以下步骤 1）首先选择所有这些并向图像添加约束EQUAL WIDTH 2）设置左边距和第一个图像视图之间的前导空格（让它为d） 3）类似地设置右边距和最后一个imageview之间的尾随空格（让它为d） 4）现在在所有图像视图之间添加约束HORIZONTAL DISTANCE（d），例如

LEFT MARGIN-d-IMAGE1-d-IMAGE2-d-IMAGE3-d-IMAGE4-d-RIGHT MARGIN

Checkout Stanford Cs193p讲座no 8.考虑类似的东西，这是一个基本的计算器，具有相同的宽度和高度的键。

Answer 2

尝试以下代码（水平排列）

var arrayOfImages = [image1,image2,image3,image4]
var previousImage:UIView? = nil
let horizontalSpaceBetweenImages = 20.0
let viewToUse = self.view //change this view to the one in which you are adding images as subviews

for image in arrayOfImages {
    viewToUse.addSubview(image)
    if previousItem == nil {
        // this is the first item
        viewToUse.addConstraint(NSLayoutConstraint(item: viewToUse, attribute: .Leading, relatedBy: .Equal, toItem: image, attribute: .Leading, multiplier: 1.0, constant: 0.0))
    }
    else {
        viewToUse.addConstraint(NSLayoutConstraint(item: image, attribute: .Leading, relatedBy: .Equal, toItem: previousImage, attribute: .Trailing, multiplier: 1.0, constant: horizontalSpaceBetweenImages))
        viewToUse.addConstraint(NSLayoutConstraint(item: image, attribute: .Width, relatedBy: .Equal, toItem: previousImage, attribute: .Width, multiplier: 1.0, constant: 0.0))
    }
    previousImage = image
}

// now add trailing constraint for last image
viewToUse.addConstraint(NSLayoutConstraint(item: arrayOfImages.last, attribute: .Trailing, relatedBy: .Equal, toItem: viewToUse, attribute: .Trailing, multiplier: 1.0, constant: 0.0))

此代码对水平对齐进行排序。然后添加垂直对齐约束（它们应该更容易实现）应该是微不足道的。

Answer 3

如果您要在视图中切换3,4和5个图像，那么collectionView将是您的最佳选择。但是，如果您正在尝试显示一定数量的图像（UIImages的数量保持不变）您可以尝试使用此方法：

此处的所有内容都将基于设备大小可用的水平距离。首先，您需要确定图像所需的高度。高度是否需要相对于宽度？或者每幅图像的高度是否保持不变？

如果高度需要保持相对于宽度，请设置一个＆＃34;纵横比＆＃34;对每个图像的约束。如果高度可以保持静止，则放置一个＆＃34;高度约束＆＃34;在每张图片上。

接下来，您需要为图像之间的距离设置约束。

此时您仍然会出错，因为每张图片的宽度都不明确。要解决此问题，请同时选择所有图像，然后添加约束＆＃34; Equal Widths。＆＃34;只要您确保图像固定在顶部，此时就不应再出现自动布局问题。

如果我能够更清楚地了解这些步骤，请告诉我。

如何为UIImageView的水平对齐设置布局约束

3 个答案: