屏幕底部的按钮:iPhone X与常规屏幕 [英] Button on bottom of screen: iPhone X vs regular screen

问题描述

我正在尝试为iPhone X屏幕优化应用程序.当前，它在大多数屏幕上显示黑色或白色条形.例如，我将使用PaymentMethodsView.

I'm trying to optimize an app for the iPhone X screen. Currently it shows black or white bars on most screens. As example I will use the PaymentMethodsView.

PaymentMethodsView是自定义的UIView，在水平StackView中包含1个或2个按钮，superView具有灰色背景.该StackView当前被限制为16px到超级视图(所有4面).目前在iPhone X上看起来像这样(在普通iPhone上，视图仅在屏幕底部:

The PaymentMethodsView is a custom UIView containing 1 or 2 buttons in a horizontal StackView, the superView has a gray background. This StackView is currently constrained with 16px to the superview (all 4 sides). Currently it looks like this on the iPhone X (and on regular iPhones the view is just on the bottom of the screen:

我要在这里实现的是，灰色区域延伸到屏幕底部，而黄色位于整个视图底部的位置. (因此降低了16像素)

What I want to achieve here is that the gray area extends to the bottom of the screen, while the yellow sits where now the bottom of the entire view is. (So 16px lower)

我可以通过为ViewController启用Use Safe Area Layout Guide，将viewController中的PaymentMethodsView限制为侧面的0 to safe area，并在底部的0 to superview来使其工作.然后在PaymentMethodsView本身中，将所有StackView的约束更改为safe area而不是superview，并将底部约束更改为0而不是16. 效果很好，除了在普通iPhone上，底部16px(在StackView下)消失了，并且将黄色按钮置于屏幕底部.

I can get this to work by enabling Use Safe Area Layout Guide for this ViewController, constraining the PaymentMethodsView in the viewController to 0 to safe area on the sides, and 0 to superview on bottom. Then in the PaymentMethodsView itself, I change all the StackView's constraints to safe area instead of superview, and change the bottom constraint to 0 instead of 16. This works fine, except on regular iPhones the bottom 16px (under the StackView) disappears and it puts the yellow button to the bottom of the screen.

我将如何解决这个问题?

How would I go about fixing this?

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

• On iPhone X: The gray area to the bottom of the screen, the button 0px to the bottom safe area
• On regular iPhones: The gray area to the bottom of the screen, 16px between the yellow button and the bottom of the screen.

谢谢！

推荐答案

您可以通过向堆栈视图添加两个底部约束来实现此目的...

You can do this by adding TWO bottom constraints to your stack view...

首先，将灰色视图底部的零约束在视图底部(其父视图)，将 不是 约束到安全区域.然后

First, constrain the grayView Bottom at Zero to the bottom of the view (its superview), not to the safe-area. Then

• 在>= 16处从stackView底部向grayView底部(其超级视图)添加一个约束
• 和第二个约束，从stackView底部到0的 安全区域底部 ，使用Priority: 999

• add one constraint from the stackView Bottom to the bottom of the grayView (its superview) at >= 16
• and a second constraint from the stackView Bottom to the bottom of the safe-area at 0 with Priority: 999

这是说:将stackView的底部至少保持其父视图(灰色视图) 的16点

This says: keep the bottom of the stackView at least 16-pts from the bottom of its superview (the gray view)

和

999说，如果可能的话，将其放置在安全区域底部的零点处

The 999 says put it at Zero-pts from the bottom of the safe-area if possible

在iPhone 7上的结果:

The result on an iPhone 7:

以及在iPhone XS上

and on an iPhone XS

这篇关于屏幕底部的按钮:iPhone X与常规屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！