具有自动布局和最大尺寸保持纵横比的 UIImageView

Question

我在源代码中生成了一个UIImageView（以编程方式）。 UIImageView 需要有一个最大尺寸，宽度和高度。在此视图中，我从 URL 加载图像并在下载结束后进行设置。我以前不知道图像的大小是多少，但我需要保持纵横比并使UIImageView 的大小保持该纵横比。

如果图像较小，在一个或两个维度上，我希望UIImageView 具有保持纵横比而不拉伸图像所需的大小。

我将给出两个示例，考虑 UIImageView 和 250 X 350 的最大大小。

示例 1：

图片大小为800 X 800。 UIImageView 的大小需要为250 X 250。

示例 2：

图片大小为200 X 250。 UIImageView 的大小需要为200 X 250。

如何使用自动布局来做到这一点。

Answer 1

这里需要三个约束。一种保持纵横比，一种确保宽度不大于最大值，一种确保高度不大于最大值。截至 2016 年 8 月，Interface Builder 不支持引用其他约束的约束，因此 - 至少 - 纵横比约束必须在代码中完成。

纵横比是唯一需要考虑的因素。让 V_w 和 V_h 分别是图像视图的宽度和高度。让 I_w 和 I_h 分别是图像的宽度和高度。然后，为了保持图像的纵横比，以下等式必须保持正确：

或者，等效地：

好的，看起来不错。让我们写一些代码。在这段代码中，我假设您之前定义了 MAX_HEIGHT 和 MAX_WIDTH。 注意此代码必须针对 iOS 9.0 或更高版本。如果您的目标是早期版本的 iOS，请参阅下面的块。

// Constrain the desired aspect ratio
[imageView.widthAnchor constraintEqualToAnchor:imageView.heightAnchor
                                    multiplier:aspectRatioMult].active = YES;

// Constrain height
[imageView.heightAnchor constraintLessThanOrEqualToConstant:MAX_HEIGHT].active = YES;

// Constrain width
[imageView.widthAnchor constraintLessThanOrEqualToConstant:MAX_WIDTH].active = YES;

---

对于面向 9.0 之前的 iOS 版本的代码，NSLayoutAnchor 不可用。相反，您必须使用NSLayoutConstraint。

CGFloat aspectRatioMult = (imageView.image.size.width / imageView.image.size.height);

// Constrain the desired aspect ratio
[imageView addConstraint:
  [NSLayoutConstraint constraintWithItem:imageView
                               attribute:NSLayoutAttributeWidth
                               relatedBy:NSLayoutRelationEqual
                                  toItem:imageView
                               attribute:NSLayoutAttributeHeight
                              multiplier:aspectRatioMult
                                constant:0]];

// Constrain height
[imageView addConstraints:
  [NSLayoutConstraint constraintsWithVisualFormat:@"V:[imageView(<=max)]"
                                          options:0
                                          metrics:@{@"max" : @(MAX_HEIGHT)}
                                            views:@{@"imageView" : imageView}]];

// Constrain width
[imageView addConstraints:
  [NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageView(<=max)]"
                                          options:0
                                          metrics:@{@"max" : @(MAX_WIDTH)}
                                            views:@{@"imageView" : imageView}]];