title: iOS 11 Layout guidance about safe Area for iPhone x
body: <p>My application already in app store, yesterday i have updated my Xcode version to 9 and works fine except <strong>iPhone x</strong>. UI got collapsed.</p>
  
  <p>1.Here I have Created Two <strong>UIView</strong>(both are fixed height) named as Header and Tab bar and I have hidden my <strong>NavigationBar</strong> entire app.</p>
  
  <p>2.Added extension to <strong>UIViewController</strong> for making <strong>Header</strong> and <strong>Tab bar</strong></p>
  
  <pre><code>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
  
      }
  </code></pre>
  
  <p>and calling this every <strong>Viewcontroller</strong> like below :</p>
  
  <pre><code>self.addHeaderTab(currentViewController: self, content:"நிகழ்ச்சி நிரல்" , isMenu: true)
  </code></pre>
  
  <p>Like that Tab bar also i have done but all the device working expect <strong>iPhone x</strong>.</p>
  
  <p>See My screen shot :    </p>
  
  <p><a href="https://i.stack.imgur.com/1us5e.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1us5e.png" alt="Image"></a></p>
  
  <p>i have studied about <a href="https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/" rel="noreferrer">https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/</a></p>
  
  <p>but am not clear with their document.</p>
  
  <p>Help would be appreciated, Thanks in advance.</p>