3

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

3 张图片

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

2 张图片

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

任何人都可以帮助我解决这个问题，更喜欢在 IB 中使用自动调整大小？

4

4 回答 4

1

这种可能使用自动布局，但您仍然必须根据您是显示一个还是两个 UIImageViews 以编程方式修改一个约束。

使用自动布局的方法如下：

创建容器视图

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

创建 UIImageViews

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

创建魔术额外约束

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

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

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

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

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

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;
}

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

于 2013-06-26T14:07:44.860 回答
0

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

于 2013-06-26T12:30:35.793 回答
0

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

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;
}
于 2013-06-26T12:34:23.430 回答
0

在我看来，您可以通过计算数组计数来检查来自服务器的图像计数是三个图像还是两个图像。然后您可以根据数组计数为 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 设置框架

于 2013-06-26T12:40:55.543 回答