使用 AutoLayout 缩放 UIImageView 以适应宽度

Posted 2023-02-27

【中文标题】使用 AutoLayout 缩放 UIImageView 以适应宽度

【英文标题】：Scaling UIImageView to fit width with AutoLayout

【发布时间】：2015-02-26 01:49:06

【问题描述】：

我在 UIScrollView 顶部有一个 UIImageView，我希望它适合设备宽度，然后自动设置它的高度，以便保留图像比例。

我正在使用自动布局，所以我使用约束将 UIImageView 绑定到屏幕的顶部、左侧和右侧边缘。 我的问题是， UIImageView 会自动调整其框架大小以适应 UIImage 高度。之后我不能真正改变这个框架，因为它让 UIImageView 和其他 UI 元素之间存在间隙，这些元素应该就在它下面。

我找到了一种解决方法，即在将图像放入 UIImageView 之前手动将其调整为合适的大小，但效率不高，并且在调整视图大小时会产生问题，例如设备旋转时。

有没有人找到一种方法来强制 UIImageView 更改其框架并保留它而不是使用图像的大小？

皮埃尔

编辑：我添加了屏幕截图，以便您查看问题。

这是预期的结果：

【问题讨论】：

你玩过图像视图的内容拥抱优先级吗？尝试降低它们。

它们已经是 250，并且没有任何约束低于它们。我试图将它们设置为 249，但它并没有改变任何东西。同样，我认为这不是问题，因为当将图像放入 imageView 时，帧高度设置为图像高度。由于所有内容都放在一个 scrollView 上，因此 imageView 采用了它想要的所有高度。

【参考方案1】：

好的，我找到了适合我的问题的解决方案。

我这样计算我想要的图片的正确高度：

correctedHeight = screenWidth / width * height

之后，我以编程方式在 updateViewConstraints 方法中添加高度约束。

我使用这个代码：

[imageView addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant: correctImageViewHeight]];

之后要考虑的两件事：

每次调用此方法时都删除约束（否则最终会遇到约束冲突）。为此，我使用[imageView removeConstraint: imageView.constraints.lastObject] ; 将[super updateViewConstraints] ; 放入方法中。如果您忘记了，它会崩溃。

我还没有这样做，但我可以很容易地看到如何在设备旋转时更新我的​​ correctHeight 变量。

【讨论】：

你可以去掉addConstraint和removeConstraint，方法是在Interface Buider中添加约束并将其链接到代码中的出口，然后你只需要更新约束的常量属性

这也解决了我的问题，我确实像 Jorge 所说的那样，只需为高度约束添加一个 IBOutlet，而不是删除并添加约束。我试图只使用 AutoLayout 但有时代码是必要的

10x，我在 swift 中做了类似的事情： if let imageSize = imageView.image?.size, imageSize.height != 0 let ratio = imageSize.width / imageSize.height imageView.aspectRatio(ratio ) else imageView.aspectRatio(1)

【参考方案2】：

使用以下代码

imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.autoresizingMask =   
    ( UIViewAutoresizingFlexibleBottomMargin
    | UIViewAutoresizingFlexibleHeight
    | UIViewAutoresizingFlexibleLeftMargin
    | UIViewAutoresizingFlexibleRightMargin
    | UIViewAutoresizingFlexibleTopMargin
    | UIViewAutoresizingFlexibleWidth );

你能提供代码吗？

【讨论】：

UIViewContentModeScaleAspectFill 使图像填满整个 imageView。但是，后者的高度仍然与原始图像相同。