iPhone X将对象底部对准安全区域会破坏其他设备上的外观 [英] iPhone X Aligning object bottom to Safe Area ruins look on other devices

问题描述

关于iPhone X自动版式怪异的问题.

Question on iPhone X Autolayout quirks.

我有两个按钮，以前这些按钮将以20的偏移量对齐到超级视图的底部，以使它们不触摸屏幕的底部(此后，我将链接更改为安全区域而不是超级视图".)

I have two buttons, previously these would be aligned bottom to the superview with an offset of 20 to not have them touching the bottom of the screen (I've since changed the link to Safe Area not Superview).

这是原始设置:

在旧版iPhone上看起来不错.

Looks good as expected on older iPhones.

现在，底部约束上的20常数现在使按钮看起来很时髦，并且离iPhone X的主栏太远了.

Now the 20 constant on the bottom constraint now makes the buttons look funky and too far up from the home bar on iPhone X.

从逻辑上讲，我需要从iPhone X的约束中删除20常量，并使按钮直接与安全区域的底部对齐.

Logically, I need to remove the 20 constant from the constraint on iPhone X and have the buttons aligned directly with the bottom of the safe area.

现在在iPhone X上看起来不错.

Looks good on iPhone X now.

但是现在在非家用条形电话上，它们将按钮放置在离屏幕底部太近的位置.

But now it's placing the buttons too close to the bottom of the screen on non home bar phones.

我在Apple文档中错过的任何即时解决方案都可以解决?无法使用尺寸类别，因为在这种情况下，iPhone X尺寸类别与其他iPhone重叠.

Any immediate solutions to this problem that I missed in the Apple docs? Can't use size classes since the iPhone X size class overlaps with the other iPhones in this case.

我可以轻松地编写代码以检测iPhone X，并将约束常量设置为0，但我希望有一个更优雅的解决方案.

I could easily code to detect for iPhone X and set the constant on the constraint to 0 but I was hoping for a more elegant solution.

谢谢

推荐答案

Apple Docs声明iOS 11中有一个新的声明，可以解决此问题.当前，iPhone X和iPhone 8具有相同的尺寸级别，因此我们必须提出另一种解决方案.

The Apple Docs states there is a new declaration in iOS 11 which can be a solution to this problem. Currently iPhone X and iPhone 8 share the same size class so we must come up with another solution.

var AdditionalSafeAreaInsets:UIEdgeInsets {获取设置}

var additionalSafeAreaInsets: UIEdgeInsets { get set }

在您的AppDelegate中添加以下代码，rootViewController的所有子代将继承附加的安全区域.下面的示例屏幕截图描述了此行为.

Add the following code below in your AppDelegate and all children of the rootViewController will inherit the additional safe area. Example screenshots below describe this behavior.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.

    if !self.isIphoneX() {
        self.window?.rootViewController?.additionalSafeAreaInsets = UIEdgeInsets(top: 0, left: 0, bottom: 20, right: 0)
    }

    return true
}

func isIphoneX() -> Bool {
    if #available(iOS 11.0, *) {
        if ((self.window?.safeAreaInsets.top)! > CGFloat(0.0)) {
            return true;
        }
    }
    return false
}

iPhone X Interface Builder对准安全区域

iPhone X Interface Builder Aligned to Safe Area

iPhone 8 Interface Builder对准安全区域

iPhone 8 Interface Builder Aligned to Safe Area

iPhone X模拟器-主屏幕

iPhone X Simulator - Master Screen

iPhone X Simulator-详细信息屏幕

iPhone X Simulator - Details Screen

iPhone 8 Simulator-主屏幕

iPhone 8 Simulator - Master Screen

iPhone 8 Simulator-详细信息屏幕

iPhone 8 Simulator - Details Screen

这篇关于iPhone X将对象底部对准安全区域会破坏其他设备上的外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！