ScrollView內的iOS Stackview具有保留圖像縱橫比

Question

我在滾動內容方面遇到問題。 基本上，我想在屏幕上放置一個ImageView和一個Label ，並且ImageView寬度等於screen寬度。 height依賴於intrinsic content aspect ratio （寬度而始終等於屏幕寬度）。

label是20間距的波紋管ImageView 。 這意味着整個內容高度可能小於或等於根view 。 我嘗試過的是將Label和ImageView放在StackView （ ImageView具有Aspectfit設置），然后將StackView放在ScrollView 。 設置constraints如下。

問題是ImageView和頂部Superview之間以及ImageView和Label之間的距離太大（理想情況下應為20）。 有什么辦法可以達到預期的結果？

PS：我試圖設置stackView分布，但沒有幫助

Answer 1

tl; dr刪除縱橫比約束，並為UIImageView添加高度約束。

重要的是要了解UIImageView基本上是一個保存圖像的容器，並且其尺寸不一定反映圖像的尺寸（除非您手動使它們相等）。 當選擇Aspect Fit作為UIImageView “內容模式”時，容器的大小不會更改為與圖像的大小相對應。 此設置僅更改了將圖像放置在容器內的方式。

如您在屏幕快照中所見， UIImageView的高度大於其寬度； 此外，長寬比由您添加的約束固定。 當您在該容器中放置橫向圖像時，后者在圖像的頂部和底部都留有白色條（就像在舊顯示器上觀看寬屏視頻時看到的黑條一樣）。 將“內容模式”更改為“長寬比填充”或將“縮放比例填充”更改為查看UIImageView的實際大小。

要解決此問題，請刪除長寬比約束並為UIImageView或UIStackView設置固定的高度。 如果您是我，我可能UIStackView的高度設置為等於“ Safe Area以便無論堆棧視圖有多高，它都不會超出屏幕邊界。