首页 > 解决方案 > Reverse scrollview height controlled by stack view in storyboard

问题描述

My Goal

To make a reverse scroll view that changes height with the height of the vertical stack (the contents of which will be controlled programatically)

What I have tried

Setting the stack view, Scroll view and content view the same heights. I am not sure how to change the simulated size of the view controller with it

Note: I am using Storyboard not swift UI, I have researched this and all I can find are tutorials for how to do this in SwiftUI

I wanted it to be controlled by the height of the stack view, so it does not scroll when there isn't anything to scroll to, if this is wrong please correct me and give me some guidance

The ViewController now:

enter image description here

Can anyone help?

标签: iosswiftxcodestoryboard

解决方案


如果我正确理解您的问题,我最近遇到了类似的问题。
我的解决方案是:

  1. 完全约束超级视图内的 UIScrollview
  2. 在 UIScrollView 中放置一个 UIView。将 UIView 的前导和尾随约束与 UIScrollView 的内容布局指南和框架布局指南(=0,或您需要的任何边距)对齐。将 UIView 的顶部和底部约束与 UIScrollView 的内容布局指南 ( =0 ) 对齐。将 UIView 的高度限制为等于 UIScrollView 的框架布局指南的高度,优先级为 500(确保乘数为 1,因为 Autolayout 可能会将其设置为其他值)。这些约束应该通过从 UIView 拖动到文档大纲中 UIScrollView 的布局指南来添加(如果我没有以这种方式添加它们,我会遇到问题)。这修复了宽度,但如果 UIView'
  3. 将 UIStackView 放在 UIView 中。将 UIStackView 前导和尾随约束与超级视图(UIView)对齐,或使用水平居中的超级视图约束。将 UIStackView 约束为在超级视图(同样是 UIView)内垂直居中。将 UIStackView 的底部约束相对于超级视图 (UIView) 对齐为 >=0。因此,当 UIStackView 小于 UIView(和 UIScrollView)时,它保持居中并且不滚动。一旦 UIStackView(和 UIView)超过 UIScrollView 的大小,UIStackView 和 UIView 底部之间的 >=0 约束优先于 UIView 和 UIScrollView 框架布局指南之间的等高约束,强制滚动。

在第 3 步中,我认为将 UIStackView 的顶部与 UIView 的顶部对齐可能会更好,而不是让 UIStackView 垂直居中。底部约束仍应 >=0。我自己没有尝试过,但它应该仍然有效。

如果您需要 UIScrollView 本身增加大小,则将其在 superview 中的顶部和底部固定为您想要的最小尺寸,具有低优先级(例如 250),然后添加 >= 约束以修复 where 的外部限制你希望它成为。例如,将 UIScrollView 的底部限制为距离底部安全区域指南 =100,优先级为 250,然后将其限制为距离底部安全区域 >=25,默认优先级为 1000。在这种情况下要打破的第一个约束应该是 UIScrollView 的底部,这将允许 UIScrollView 增长,直到它达到底部 >=25 约束,此时 UIView 到 UIScrollView_frame_layout_guide 的相等高度约束将打破触发滚动。

我希望这是有道理的(而且我没有错过任何东西)!

PS我还遇到了UIStackView内容(在我的案例中以编程方式定义)以奇怪的方式调整大小的问题,这似乎可以通过将内容模式从“缩放到填充”更改为“重绘”来解决。我根据我想要的外观将分布设置为“平等填充”或“按比例填充”(我有两个这样的视图)。


推荐阅读