iOS 11 关于 iPhone x 安全区域的布局指南

Question

我的应用程序已经在应用程序商店中，昨天我已将我的 Xcode 版本更新为 9 并且工作正常，除了 iPhone x。 UI 崩溃了。

1.Here 我创建了两个 UIView（都是固定高度）命名为 Header 和 Tab bar 我隐藏了我的 NavigationBar整个应用程序。

2.Added UIViewController 的扩展，用于制作 Header 和 标签栏

func addHeaderTab(currentViewController:UIViewController,content:String, isMenu:Bool){
        let noView = TopHeaderView()
        noView.tag = 12345
        noView.isMenu = isMenu
        noView.translatesAutoresizingMaskIntoConstraints = false
        currentViewController.view .addSubview(noView)
        if isMenu{
            noView.menuBtn .setImage(UIImage(named: "Small"), for: .normal)
            noView.logoImg.isHidden = false

        }else{
            noView.menuBtn .setImage(UIImage(named: "arrow_small"), for: .normal)
            noView.logoImg.isHidden = true
        }
        noView.titleLbl.text = content
        noView.delegate = (currentViewController as! menuOpen)

        NSLayoutConstraint(item: noView, attribute: .leading, relatedBy: .equal, toItem: currentViewController.view, attribute: .leading, multiplier: 1.0, constant: 0.0).isActive = true

        NSLayoutConstraint(item: noView, attribute: .trailing, relatedBy: .equal, toItem: currentViewController.view, attribute: .trailing, multiplier: 1.0, constant: 0.0).isActive = true

        NSLayoutConstraint(item: noView, attribute: .top, relatedBy: .equal, toItem: currentViewController.view, attribute: .top, multiplier: 1.0, constant: 0.0).isActive = true

        NSLayoutConstraint(item: noView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: 64).isActive = true

    }

并每隔 Viewcontroller 调用一次，如下所示：

self.addHeaderTab(currentViewController: self, content:"நிகழ்ச்சி நிரல்" , isMenu: true)

就像那个标签栏一样，我也做过，但所有设备都能正常工作 iPhone x.

查看我的屏幕截图：

我学习了https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

但我不清楚他们的文档。

不胜感激，提前致谢。

Answer 1

随着 iOS11（以及 iPhoneX 的出现）Apple 推出了 安全区域布局指南 以使您的视图适应 iPhoneX.

安全区域是屏幕上未被槽口或主页指示器重叠的区域。

为避免您遇到的问题，您必须更改 iOS11:

的 noView 的最高约束

if #available(iOS 11, *) {
   let guide = view.safeAreaLayoutGuide
   NSLayoutConstraint.activate([
      noView.topAnchor.constraint(equalTo: guide.topAnchor)
   ])
} else {
   NSLayoutConstraint.activate([
      noView.topAnchor.constraint(equalTo: currentViewController.topLayoutGuide.bottomAnchor)
   ])
}
NSLayoutConstraint.activate([
   noView.leadingAnchor.constraint(equalTo: currentViewController.view.leadingAnchor),
   noView.trailingAnchor.constraint(equalTo: currentViewController.view.trailingAnchor),
   noView.heightAnchor.constraint(equalToConstant: 65)
])

不幸的是，这还不是全部。因为现在你的 noView 在 iPhone X 上向下移动，但是状态栏不再有红色背景了。您在状态栏后面添加了红色背景颜色：

您可以使用 UINavigationController（带有红色导航栏）使事情变得容易得多：

使用这种方法，您无需设置任何限制！系统自动为您完成所有调整。

Answer 2

In Objective-C 在 iPhone-X

时的顶部和底部边距

if (@available(iOS 11, *)) {

    NSLayoutConstraint *bottomConstraint   = [NSLayoutConstraint constraintWithItem:self.childView
                                                                          attribute:NSLayoutAttributeBottom
                                                                          relatedBy:NSLayoutRelationEqual
                                                                             toItem:self.parentView.safeAreaLayoutGuide
                                                                          attribute:NSLayoutAttributeBottom
                                                                         multiplier:1.0
                                                                           constant:0];


    NSLayoutConstraint *topConstraint   = [NSLayoutConstraint constraintWithItem:self.childView
                                                                   attribute:NSLayoutAttributeTop
                                                                   relatedBy:NSLayoutRelationEqual
                                                                      toItem:self.parentView.safeAreaLayoutGuide
                                                                   attribute:NSLayoutAttributeTop
                                                                  multiplier:1.0
                                                                    constant:0];


} else {

    NSLayoutConstraint *bottomConstraint   = [NSLayoutConstraint constraintWithItem:self.childView
                                                                      attribute:NSLayoutAttributeBottom
                                                                      relatedBy:NSLayoutRelationEqual
                                                                         toItem:self.parentView
                                                                      attribute:NSLayoutAttributeBottom
                                                                     multiplier:1.0
                                                                       constant:0];


    NSLayoutConstraint *topConstraint   = [NSLayoutConstraint constraintWithItem:self.childView
                                                                   attribute:NSLayoutAttributeTop
                                                                   relatedBy:NSLayoutRelationEqual
                                                                      toItem:self.parentView
                                                                   attribute:NSLayoutAttributeTop
                                                                  multiplier:1.0
                                                                    constant:0];

}

Answer 3

如果你不想使用 UINavigationController 但你想要一个导航栏，你可以这样做（使用 UIImageView）：

https://medium.com/@kahseng.lee123/creating-custom-navigation-bar-tab-bar-for-iphone-x-f03b1e1827d3

或者您可以创建一个视图并将其顶部约束设置为父视图的顶部，并将其底部约束设置为导航栏的顶部。别忘了把它变成红色。 :-)

Answer 4

根据设备设置headerView的高度限制

if iPhoneX {
NSLayoutConstraint(item: noView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: 64+24).isActive = true
} else {
NSLayoutConstraint(item: noView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: 64).isActive = true
}

并设置所有子视图（headerView 的）分别约束到父视图（headerView）的底部。

关于为什么我们为 iphoneX 添加 24 像素的补充说明：

    // portrait orientation - status bar is shown
    additionalSafeAreaInsets.top = 24.0

iOS 11 关于 iPhone x 安全区域的布局指南

iOS 11 Layout guidance about safe Area for iPhone x

ios

autolayout

swift4

xcode9

iphone-x