在滚动视图中使用堆栈视图并尊重安全区域插入

时间:2017-09-30 18:50:38

标签: ios uiscrollview autolayout uistackview

我在垂直滚动UIStackView内有一个UIScrollView,所有内容都使用自动布局限制。滚动视图填充超级视图,堆栈视图填充滚动视图,各种元素添加到堆栈视图中。为了使其能够与自动布局很好地配合并定义滚动视图的内容大小,您还必须指定堆栈视图的宽度。这是通过在堆栈视图上添加宽度约束来完成的,该约束等于滚动视图的宽度。在这一点上,没有什么是模棱两可的,它的行为完全符合要求。

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

现在,iPhone X出现了,并且在风景中15pt填充不再足够,因为内容被放置在外壳传感器下面。因此,您需要更新此设置以设置边距以尊重安全区域布局边距。你真的只想使用默认的边距。您可以更改堆栈视图的前导和尾随约束常量以使用视图的布局边距(这取决于安全区域插入),但这不起作用,因为等宽约束常量不再是利润率,利润现在是动态的。

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

2 个答案:

答案 0 :(得分:4)

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

所以你的设置将是:

- view
-- scroll view
--- view
---- stack view

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

¹我发现8的常数增加了足够的填充感觉。

答案 1 :(得分:0)

纯界面构建器解决方案(优于公认的解决方案):

  1. UIView之后添加一个虚拟UIScrollView(以下是由于 滚动视图的自动内容插入即可工作)
  2. 将视图的高度设置为0px,前导和尾随为     superview的前导和尾随带有边距! (对利润率很重要)
  3. 从堆栈视图创建等宽约束(即     滚动视图的内容视图)更改为虚拟视图,还更改了堆栈视图的前导和尾随以保留边距
    1. set保留滚动视图上的边距

完成