ios - 灵活的 ImageView

Question

我正在处理一个包含三个 UIImageView 的 View 。 View 和子 ImageView 是在 Storyboard中创建的。这些 ImageView 的图像是从服务器加载的。当服务器返回所有三个图像的图像时，它应该如下所示:

当第三个 ImageView 没有可用图像时，布局应该像这样动态变化(图像缩放到 ImageView 等，我知道那部分):

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

谁能帮我解决这个问题，最好在 IB 中使用自动调整大小？

Answer 1

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

以下是使用自动布局的方法:

创建容器 View

1. 创建一个 UIView 作为容器。
2. 将容器 View 的左边缘移动到左边距。
3. 将容器 View 的右边缘移动到右边距。
4. 固定容器 View 的高度。
5. 删除底部空间对父 View 的约束。

创建 UIImageViews

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

创建魔法额外约束

1. 将尾随空格固定到第二个 ImageView 的 super View 。
2. 选择新约束并将优先级设置为 850。
3. 将约束的常量值设置为 0。

容器 UIView 只是为了保持包含 View 的边距和高度。

第二个 ImageView 现在应该有两个尾部约束，都显示为虚线。旋转屏幕应该会拉伸(stretch)容器 View 以适合，并且三个 UIImageView 也会拉伸(stretch)以适合。

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

只需为“魔术”约束(第二个 ImageView 上的 super View 的尾随空间)创建一个 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;
}

必要时您可能还希望隐藏第三个 ImageView 。