灵活的图像视图

Question

我正在处理包含三个UIImageViews的视图。视图和子图像视图在故事板中创建。这些图像视图的图像是从服务器加载的。 当服务器返回所有三个图像的图像时，它应如下所示：

当没有可用于第三个图像视图的图像时，布局应该像这样动态改变（图像缩放到imageview等，我知道那个部分）：

我已经使用Interface Builder工作了很长时间，但不知道如何实现这一点..

任何人都可以帮我解决这个问题，首选使用IB中的自动调整功能吗？

Answer 1

这种可能使用自动布局，但您仍然需要以编程方式修改一个约束，具体取决于您是显示一个还是两个UIImageViews。

以下是使用autolayout进行操作的方法：

创建容器视图

1. 创建一个UIView作为容器。
2. 将容器视图的左边缘移动到左边距。
3. 将容器视图的右边缘移动到右边距。
4. 固定容器视图的高度。
5. 删除底部空间的约束以进行超级视图。

创建UIImageViews

1. 在容器视图中创建三个UIImageView。
2. 根据需要调整UIImage视图的大小并对齐。
3. 固定第一个和第二个图像视图之间的水平间距。
4. 固定第二个和第三个图像视图之间的水平间距。
5. 将第一个图像视图上的前导空格固定到超级视图。
6. 将第三个图像视图上的尾随空格固定到超级视图。
7. 选择所有三个图像视图并平均固定宽度。
8. 删除第二个图像视图上的对齐中心x约束。
9. 在第二个图像视图上选择图像视图约束的尾随空格，并将优先级设置为900（重要）。

创建Magic Extra Constraint

1. 在第二个图像视图上将尾随空格固定到superview。
2. 选择新约束并将优先级设置为850。
3. 将约束的常量值设置为0.

容器UIView只是维护包含视图的边距和高度。

第二个图像视图现在应该有两个尾随约束，两者都显示为虚线。旋转屏幕应该使容器视图伸展以适应，并且三个UIImageViews也可以伸展以适应。

目前，第二和第三图像视图之间的约束优先于第二图像视图和容器视图之间的“魔术”约束，导致第二图像视图的右边缘与第三图像视图的左边隔开边缘。要仅调整两个图像的布局，“魔术”约束必须优先于另一个，使第二个图像视图的右边缘与超视图的右边缘对齐。

只需为“魔术”约束创建一个IBOutlet（在第二个图像视图上尾随空格到superview）并根据需要提高和降低优先级。

if (imageCount == 2) {
  // Second image view should favor right edge of superview
  self.myConstraint.priority = 950;
} else if (imageCount == 3) {
  // Second image view should favor left edge of third image view
  self.myConstraint.priority = 850;
}

您可能还希望在必要时隐藏第三张图片视图。

Answer 2

我的选择是，当第三张图片为空时，将第三张isHidden的{​​{1}}属性设置为imageView。然后相应地指定其他两个图像视图的边界（你说，你知道该怎么做）。

Answer 3

检查imageView_3是否没有图像，然后调整其余两个imageView的大小，例如：

if (imageView_3.image == nil) {
    CGRect frame = imageView_1.frame;
    frame.size.width += imageView_3.frame.size.width / 2;
    imageView_1.frame = frame;

    frame = imageView_2.frame;
    frame.size.width += imageView_3.frame.size.width / 2;
    frame.origin.x   += imageView_1.frame.origin.x + imageView_1.frame.size.width + 10/*the gap*/;
    imageView_2.frame = frame;
}

Answer 4

在我看来，您可以通过计算数组计数来检查来自服务器的图像计数，即是否有三个图像或两个图像。然后，您可以根据数组计数将不同的帧设置为UIImageView。

if([imageArray count] == 3) {

//set the frame of the images so that it can fit the screen.

}
else if([imageArray count] == 2) {

// set the frame of the UIImageView so that it can fit the screen and hide the third UIImageView

[thirdImageView setHidden:YES];

}

像这样你可以设置UIImageView的框架