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

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

1.我有创build两个UIView （都是固定的高度）命名为标题和选项卡栏，我已经隐藏了我的NavigationBar整个应用程序。

2.添加扩展到UIViewController的标题和标签栏

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的出现），苹果公司推出了“ 安全区域布局指南”，以便将您的观点调整到iPhoneX。

安全区域是屏幕上不与凹槽或原位指示符重叠的区域。

为了避免你遇到的问题，你必须改变你的noView对iOS11的最高限制：

 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上noView移动，但状态栏不再有红色背景。 状态栏后面添加红色背景色：

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

使用这种方法，您不必设置任何约束！ 系统会自动为您做所有的调整。

Answer 2

在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

或者，您可以创build一个视图，并将其顶部约束设置到超级视图的顶部，并将其底部约束设置到导航栏的顶部。 不要忘记把它弄红。 🙂