在滚动视图中使用堆栈视图并遵守安全区域插图

Jor*_*n H 7 uiscrollview ios autolayout uistackview

我有一个UIStackView垂直滚动的内部UIScrollView,所有内容都受“自动版式”限制。滚动视图填充超级视图,堆栈视图填充滚动视图,然后将各种元素添加到堆栈视图中。为了使它与“自动版式”一起很好地发挥作用并定义滚动视图的内容大小,还必须指定堆栈视图的宽度。这是通过在堆栈视图上添加等于滚动视图宽度的宽度约束来完成的。在这一点上,没有什么是模棱两可的,它的行为完全符合预期。

现在,如果要添加边距以使元素不会延伸到屏幕的最左侧和右侧边缘,则可以将堆栈视图上的前导约束和尾随约束常量更改为例如在两侧插入15pt。但是,您必须确保将等宽约束常数更改为-30。效果很好,插入了可滚动内容,仍然允许您在屏幕的远处滑动以滚动。

现在,iPhone X出现了,横向放置15pt的填充物已不再足够,因为内容被放置在外壳传感器的下方。因此,您需要更新此设置以设置边距以遵守安全区域布局边距。您真的只想使用默认边距。您可以更改堆栈视图的前导约束和尾随约束常量以使用视图的布局边距(考虑安全区域插图),但这将不起作用,因为等宽度约束常量不再是边距量的两倍,而且边距是动态的现在。

因此,解决此问题的一种方法是IBOutlet为堆栈视图的前,尾和宽度约束创建,然后在布局边距更改时以编程方式调整所有边界viewLayoutMarginsDidChange。但是我想知道是否有更好的方法,最好是在Interface Builder中运行的解决方案,不需要任何代码。

Jor*_*n H 6

我找到了一种完全在Interface Builder中执行此操作的方法。与其直接在滚动视图中嵌入堆栈视图,不如在滚动视图UIView内部添加内容视图。创建前导,尾随,顶部和底部约束,这些约束均等于父视图,且常量为0,并且对滚动视图具有相等的宽度约束。然后将堆栈视图嵌入到该内容视图中。为堆栈视图创建前导约束和尾随约束,该约束等于超级视图的边距 ¹加上顶部和底部。

因此,您的设置将是:

- view
-- scroll view
--- view
---- stack view
Run Code Online (Sandbox Code Playgroud)

这样可以确保在横向的iPhone X上可以在左右边缘滚动,滚动条位于屏幕的最右边缘,并且堆栈视图位于安全区域内。

¹我发现常数为8时,会增加足够的填充量,使您感觉不错。