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

【问题标题】：Using a Stack View in a Scroll View and respecting Safe Area insets在滚动视图中使用堆栈视图并尊重安全区域插图
【发布时间】：2018-03-12 08:56:43
【问题描述】：

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

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

现在，iPhone X 出现了，15pt 的填充在横向时不再足够，因为内容被放置在外壳传感器下方。因此，您需要更新它以设置边距以尊重安全区域布局边距。您真的只想使用默认边距。您可以更改堆栈视图的前导和尾随约束常量以使用视图的布局边距（尊重安全区域插图），但这不起作用，因为您的等宽约束常量不再是边距数量的两倍，边距是动态的现在。

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

【问题讨论】：

我还没有找到一种好方法来为我的 iPhone X 情节提要“使用此约束，但还要添加另一个约束或更改此常量”。我认为您的想法是正确的：添加一个插座，并相应地调整您的常量。不过，这有点吹牛。

标签： ios uiscrollview autolayout uistackview

【解决方案1】：

我找到了一种完全在 Interface Builder 中执行此操作的方法。与其直接在滚动视图中嵌入堆栈视图，不如在滚动视图中添加UIView 作为内容视图。创建前导、尾随、顶部和底部约束，它们都等于具有常量 0 的超级视图，加上滚动视图的等宽约束。然后将堆栈视图嵌入此内容视图中。为堆栈视图创建前导和尾随约束，等于父视图的margin¹，加上顶部和底部。

所以你的设置将是：

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

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

¹我发现一个 8 的常数可以增加足够的填充感。

【讨论】：

【解决方案2】：

纯界面构建器解决方案（优于公认的）：

在UIScrollView下面添加一个虚拟UIView（下面，因为滚动视图的自动内容插入工作）
设置视图的高度为0px，前导和尾随为 superview 的领先和尾随有边距！（对边距很重要）
从堆栈视图创建一个等宽约束（这是滚动视图的内容视图）到虚拟视图，并更改堆栈视图的前导和尾随以尊重边距
1. 设置保留滚动视图的边距

完成

【讨论】：