使用自动布局将图像宽度调整为 100%，同时保持纵横比

Posted 2023-03-15

【中文标题】使用自动布局将图像宽度调整为 100%，同时保持纵横比

【英文标题】：Using auto layout to resize image width to 100% while keeping the aspect ratio

【发布时间】：2014-10-24 21:07:41

【问题描述】：

我无法理解自动布局的工作原理。我的控制器场景中有以下结构：

View
   ScrollView
      View
         Image View

      Constraints
         SuperView.Bottom = View.Buttom
         SuperView.Trailing = View.Trailing
         View.Leading = SuperView.Leading
         View.Top = SuperView.Top
    Constraints
       ScrollView.Top = SuperView.TopMargin
       SuperView.TrailingMargin = ScrollView.Trailing (-16)
       ScrollView.Leading = SuperView.Leading (-16)
       BottomLayoutGuide.Top = ScrollView.Bottom (-40)

这会处理我需要的滚动视图。视图中还有其他内容，但我现在“卸载”它们以使图像视图首先工作。我想让 ImageView 具有基于屏幕尺寸的宽度（iPhone 5 将有 320 像素，iPhone 6+ 将有 1080 像素）。因此，我尝试向 ImageView 添加约束（View.Trailing = SuperView.Trailing; View.Leading = SuperView.Leading; AspectRatio - 2:1），但它只是让图像尺寸变得越来越大，它并没有甚至适合屏幕。如果我设置高度限制，它会起作用，但我不想设置高度限制，因为我希望大小不依赖于恒定的宽度/高度。

我做错了什么？我不太了解 AutoLayout；我了解 AutoLayout 的基本概念，但是在实施时，我不知道该怎么做...：/

【参考方案1】：

图像的大小/纵横比与图像视图的contentMode 有关。适当地设置contentMode（听起来你可能想要UIViewContentModeScaleAspectFit）并将clipsToBounds设置为true，这样图像就不会比图像视图大。然后限制图像视图的大小，否则它将调整大小以适合图像。更好的是，使用尺寸更合适的图像；你显然在使用一个巨大的图像（否则它不会被绘制得很大），这很浪费。

【讨论】：

我将 contentMode 更改为 Aspect Fit 并且我已经有了 imageView.clipsToBounds = true。如何限制图像视图的大小？它的实际尺寸目前是 320x160... 具有前导和尾随约束会使图像变得巨大。如果我添加高度限制，它会将图像水平移动到屏幕之外的某个位置......我将使图像尺寸更小，但这不是我现在主要关心的问题。我不想依靠图像来获得正确的布局。

您使用约束来限制图像视图的大小。你对你实际在做什么非常模糊，所以我无法猜测，但很明显它并没有让你满意。为什么不停下来了解自动布局，让您确实理解它，然后再继续下一步？

导致这种情况的问题是滚动视图。我已经了解了自动布局。我知道这是如何工作的，但总是存在学习不够的情况，我需要寻求经验才能找到答案。所以，让我们来一个基本的 uitextview；没有滚动，什么都没有。我如何使它的大小为 100%。添加约束 (Width = SuperView.Width) 不起作用。如果我遗漏了什么，你能给我一个教程，我会看到这个约束在起作用吗？理论上上面应该可以工作，但没有。当然它不会工作。

自动布局中的滚动视图工作方式不同。内部测量值不与滚动视图的大小相关；它们与其contentSize 有关。在这里查看我的解释：***.com/a/13548039/341994

谢谢！我终于能够理解 AutoLayout 是如何工作的，现在是时候学习它如何与 ScrollView 一起工作了。

【参考方案2】：

检查/尝试两件事：

在 imageView 加载图像后调用 sizeToFit。这会导致它适当地更新其 contentSize。 然后，在你的scrollView中设置zoomScale——它可能只是显示放大的imageView。zoomScale应该是superview.bounds.size.width/imageView.bounds.size.width，其中superview是主viewController视图（self .view)

【讨论】：

我做了一个类似的演示项目：github.com/annabd351/SquareCropViewController