ScrollView 内的 iOS Stackview 保留图像纵横比答案

【问题标题】：iOS Stackview inside ScrollView with preserve image aspect ratioScrollView 内的 iOS Stackview 保留图像纵横比
【发布时间】：2018-10-15 13:32:44
【问题描述】：

我遇到了可滚动内容的问题。基本上，我想在屏幕上放置一个ImageView 和一个Label，ImageView 宽度等于screen 宽度。 height 取决于 intrinsic content aspect ratio（而宽度始终等于屏幕宽度）。

label 在ImageView 下方有 20 个间距。这意味着整个内容的高度可能小于或等于甚至大于根 view。我尝试将Label 和ImageView 放入StackView 中（ImageView 具有Aspectfit 设置），然后将StackView 放入ScrollView 中。如下设置constraints。

问题是 ImageView 和顶部 Superview 之间以及 ImageView 和 Label 之间的距离太大（理想情况下应该是 20）。有什么方法可以达到预期的效果吗？

PS：我试过设置stackView分布但没有帮助

【问题讨论】：

无法理解故事板屏幕截图中的问题。你能显示这个的输出吗？？
嗨，我已经添加了输出。正确的行为应该是屏幕左上角和右上角的 imageview pin。标签如下 imageview 20
我认为这是因为图像纵横比。试一次，设置 ImageView 内容模式 = Scale to Fill
嗨，但设置的目的是保持原始图像的纵横比（根据宽度缩放高度）
在您的图像视图上设置背景颜色，您会看到发生了什么。 Aspect-Fit 改变了图像在图像视图中的显示方式......它不会改变图像视图的帧。为此，您需要添加一些代码来获取图像大小并计算 Aspect-Fit 矩形，然后更改图像视图的框架。

标签： ios autolayout scrollview stackview

【解决方案1】：

tl;dr 移除纵横比限制并为UIImageView 添加高度限制。

重要的是要了解UIImageView 基本上是一个包含图像的容器，其尺寸不一定反映图像的尺寸（除非您手动使它们相等）。当您选择 Aspect Fit 作为UIImageView 的内容模式时，容器的大小没有改变以对应图像的大小；此设置仅更改了图像在容器内的放置方式。

正如我在您的屏幕截图中看到的，UIImageView 的高度大于其宽度；此外，纵横比由您添加的约束固定。当您在此容器中放置横向图像时，后者会在图像的顶部和底部留下白条（就像您在旧显示器上观看宽屏视频时看到的黑条一样）。将 Content Mode 更改为 Aspect Fill 或 Scale to Fill 以查看 UIImageView 的实际大小。

要解决此问题，请移除纵横比限制并为UIImageView 或UIStackView 设置固定高度。如果我是你，我可能会将UIStackView 的高度设置为等于Safe Area，这样无论堆栈视图有多高，它都不会超出屏幕边界。

【讨论】：