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

Question

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

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

我将给出两个示例，考虑 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 分别是 ImageView 的宽度和高度。设 I_w 和 I_h 分别是图像的宽度和高度。然后，为了保持图像的宽高比，以下等式必须保持为真:

或者，等价地:

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

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