屏幕底部的按钮：iPhone X 与普通屏幕

Posted 2023-03-08

【中文标题】屏幕底部的按钮：iPhone X 与普通屏幕

【英文标题】：Button on bottom of screen: iPhone X vs regular screen

【发布时间】：2019-05-15 13:03:47

【问题描述】：

我正在尝试针对 iPhone X 屏幕优化应用程序。目前，它在大多数屏幕上显示黑条或白条。例如，我将使用PaymentMethodsView。

PaymentMethodsView 是自定义UIView，在水平StackView 中包含1 或2 个按钮，superView 具有灰色背景。这个StackView 目前被限制在 16px 到超级视图（所有 4 个边）。目前它在 iPhone X 上看起来像这样（在普通 iPhone 上，视图就在屏幕底部：

我想在这里实现的是灰色区域延伸到屏幕底部，而黄色位于现在整个视图底部的位置。 （所以低 16 像素）

我可以通过为此ViewController 启用Use Safe Area Layout Guide，将viewController 中的PaymentMethodsView 限制在侧面的0 to safe area 和底部的0 to superview 来使其工作。然后在PaymentMethodsView 本身中，我将所有StackView 的约束更改为safe area 而不是superview，并将底部约束更改为0 而不是16。 这很好用，除了在普通 iPhone 上，底部 16 像素（在 StackView 下）消失了，并将黄色按钮放在屏幕底部。

我将如何解决这个问题？

在iPhone X上：屏幕底部的灰色区域，按钮0px到bottom safe area 在普通 iPhone 上：屏幕底部的灰色区域，黄色按钮和屏幕底部之间的 16 像素。

谢谢！

【问题讨论】：

如果可能的话，没有代码，只有约束。 :-)

在 viewDidLayoutSubviews 方法中检查安全区域布局指南底部长度并更改约束

为什么将包含UIButton 的UIStackView 的底部约束设置为0 而不是16？这就是为什么在以前的 iPhone 上按钮会粘在屏幕底部的原因，因为那里的“安全区域”正好对应于屏幕边缘。您是否有理由不希望按钮距离 iPhone X 上的安全区域 16 像素？

iPhone 安全区域上方 16px 的按钮似乎很多，那么按钮下方灰色空间的总大小与按钮本身的大小大致相同。我有点同意你的观点，它应该在安全区域上方 16px，但同时它可能看起来太大了。

【参考方案1】：

您可以通过在堆栈视图中添加两个底部约束来做到这一点...

首先，将 grayView Bottom at Zero 约束到视图的底部（其父视图），不 到安全区域。那么

在>= 16处从stackView底部添加一个约束到grayView（它的superview）底部 以及从 stackView 底部到

安全区底部

的第二个约束，位于 0 和 Priority: 999

这说：保持 stackView 的底部至少距离其父视图（灰色视图）底部 16-pts

和

999 说把它放在安全区底部的零点如果可能的话

iPhone 7 上的结果：

在 iPhone XS 上

【讨论】：

真聪明！谢谢。

【参考方案2】：

下面的代码对我有用，试试看，

点击查看控制器

从右侧面板中选择Identify and Type

在Interface Builder Document下启用Use Safe Area Layout

现在，无论您想将任何视图置于底部，只需给出与视图不安全区域相对应的约束