具有自动布局和最大尺寸保持纵横比的 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}]];

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

UIImageView with auto-layout and max size keeping aspect ratio

objective-c

uiimageview

ios

autolayout