如何设置状态栏或安全区域以删除 iPhone X 上的空白?

Posted

技术标签:

【中文标题】如何设置状态栏或安全区域以删除 iPhone X 上的空白?【英文标题】:How do you set the status bar or safe area to remove white space on iPhone X? 【发布时间】:2017-11-06 19:45:44 【问题描述】:

我添加了使用安全区域指南的选项,但是当我查看应用程序时,它似乎尊重安全区域,但有一些我无法摆脱的空白。我不知道是什么原因造成的,也不知道如何从白色改变颜色。

我已将背景颜色设置为您在下面看到的颜色。

view.backgroundColor = UIColor(red:0.227, green:0.251, blue:0.294, alpha:1)

我也设置了白色状态栏样式

UIApplication.shared.statusBarStyle = UIStatusBarStyle.lightContent

我的主要故事板

【问题讨论】:

没有更多细节很难知道,但我猜白色区域是UIView,用于在以前的 ios 设备上为状态栏后面的区域着色。是否有视图被添加到情节提要或代码中的该位置? @nathan 我认为你可能是对的。它是视图的一部分,但不确定该空间是如何添加的。我会发布更多我的主要故事板的图片。 你的网页视图有什么限制? @nathan 原来是 WebView.top 约束。它被设置为基于超级视图的位置。我将其更改为安全指南,然后将其定位为 -24 约束。我将其更改为 0。不知道为什么它是 24,我希望它现在可以在所有手机类型上正常工作! 【参考方案1】:

当视图在屏幕上可见时,本指南会反映 未被导航栏、标签栏、工具栏覆盖的视图, 和其他祖先的观点。 (在 tvOS 中,安全区域反映了该区域 没有覆盖屏幕的边框。)如果视图当前没有 安装在视图层次结构中,或者在屏幕上尚不可见, 布局指南边缘等于视图的边缘。

您需要使用 safeArea 设置约束 使用safeArea 设置webView 的顶部、底部、前导、尾随约束 常量为 0,因此您的对象不会被剪裁。

以编程方式:

 webView.translatesAutoresizingMaskIntoConstraints = false
        if #available(iOS 11.0, *) 
            let guide = self.view.safeAreaLayoutGuide
            webView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            webView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            webView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
            webView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
        

SafeAreaGuide

【讨论】:

我相信这会解决问题。我想我还必须确保顶部的安全区域约束也设置为 0。即使我的 webview 约束都设置为 0,我也必须将顶部对齐约束的 wC wR 字段设置为 0。 是的!与constant =0 或更高版本对齐到安全区域【参考方案2】:
if #available(iOS 11.0, *) 
     webView.scrollView.contentInsetAdjustmentBehavior = .never;

【讨论】:

以上是关于如何设置状态栏或安全区域以删除 iPhone X 上的空白?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 iPhone x 中设置安全区域布局

如何避免 iPhone X 上的视图剪辑

iPhone X - 设置主页指示器周围区域的颜色

iPhone X 的“安全区域”(以像素为单位)是啥?

定位导航栏顶部的安全区域

位置导航栏顶部的安全区域