iOS 11 iPhone x 安全区域布局指南 [英] iOS 11 Layout guidance about safe Area for iPhone x

问题描述

我的应用程序已经在应用商店中了，昨天我将我的 Xcode 版本更新到了 9，并且除了 iPhone x 之外运行良好.UI 崩溃了.

1.在这里，我创建了两个 UIView(均为固定高度)，分别命名为 Header 和 Tab bar，并且我隐藏了我的 NavigationBar 整个应用程序.

2.为UIViewController添加扩展，用于制作Header和Tab bar

func addHeaderTab(currentViewController:UIViewController,content:String, isMenu:Bool){让 noView = TopHeaderView()noView.tag = 12345noView.isMenu = isMenunoView.translatesAutoresizingMaskIntoConstraints = falsecurrentViewController.view .addSubview(noView)如果是菜单{noView.menuBtn .setImage(UIImage(named: "Small"), for: .normal)noView.logoImg.isHidden = false}别的{noView.menuBtn .setImage(UIImage(named: "arrow_small"), for: .normal)noView.logoImg.isHidden = true}noView.titleLbl.text = 内容noView.delegate = (currentViewController as!menuOpen)NSLayoutConstraint(项目:noView，属性:.leading，relatedBy:.equal，toItem:currentViewController.view，属性:.leading，乘数:1.0，常量:0.0).isActive = trueNSLayoutConstraint(item: noView, attribute: .trailing, relatedBy: .equal, toItem: currentViewController.view, attribute: .trailing, multiplier: 1.0, constant: 0.0).isActive = trueNSLayoutConstraint(item: noView, attribute: .top, relatedBy: .equal, toItem: currentViewController.view, attribute: .top, multiplier: 1.0, constant: 0.0).isActive = trueNSLayoutConstraint(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.

查看我的屏幕截图:

我研究过

为避免您遇到的问题，您必须更改 iOS11 的 noView 顶部约束:

if #available(iOS 11, *) {让指南 = view.safeAreaLayoutGuideNSLayoutConstraint.activate([noView.topAnchor.constraint(equalTo: guide.topAnchor)])} 别的 {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(带有红色导航栏)让事情变得更简单:

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

My application already in app store, yesterday i have updated my Xcode version to 9 and works fine except iPhone x. UI got collapsed.

1.Here I have Created Two UIView(both are fixed height) named as Header and Tab bar and I have hidden my NavigationBar entire app.

2.Added extension to UIViewController for making Header and Tab bar

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

    }

and calling this every Viewcontroller like below :

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

Like that Tab bar also i have done but all the device working expect iPhone x.

See My screen shot :

i have studied about https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

but am not clear with their document.

Help would be appreciated, Thanks in advance.

解决方案

With iOS11 (and the appearance of iPhoneX) Apple introduced the Safe Area Layout Guide to adapt your views to the iPhoneX.

The Safe Area is the area of the screen that is not overlapped by the notch or the home indicator.

To avoid the issue you are experiencing you have to change your noView's top constraint for 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)
])

Unfortunately that is not all. Because now your noView moves down on iPhone X, but the status bar does not have a red background anymore. You have add a red background color behind the status bar:

You could make things a lot easier by using a UINavigationController (with a red navigation bar):

With this approach you don't have to set any constraints! The systems does all the adjustments for you automatically.

这篇关于iOS 11 iPhone x 安全区域布局指南的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！