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

问题描述

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

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

2.增加 UIViewController 的扩展程序，以便标题和标签栏

  func addHeaderTab（currentViewController：UIViewController，content：String，isMenu：Bool）{ 
让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，属性：.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，属性：.height，relatedBy：.equal，toItem：nil，attribute：.height，multiplier：1.0，constant：64）.isActive = true 
 
} 
  

并将每个 Viewcontroller 调用如下：

  self.addHeaderTab（currentViewController：self，content：நிகழ்ச்சிசி ரல்，isMenu：true）
  

就像那个Tab栏我也做过但所有设备都在工作 iPhone x 。

请参阅我的屏幕截图：

我研究过

为了避免您遇到的问题，您需要更改你的noView对iOS11的顶级约束：

 如果#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 （带红色导航栏）可以让事情变得更轻松：

使用这种方法你没有设置任何约束！系统会自动为您完成所有调整。

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屋！