IOS 11 Safe Zone Setup Guide for iPhone x

Question

My application is already in the application store, yesterday I updated the version of Xcode to 9 and works fine, except for iPhone x . The user interface has crashed.

1. Here, I created two UIViews (both fixed heights), named as the title and tab bar, and I hid my NavigationBar application.

2.Added UIViewController extension for creating title 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 each Viewcontroller , as shown below:

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

Like this tab bar I made, but all working devices expect iPhone x .

See my screenshot:

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

but I do not understand their document.

Help will be appreciated, thanks in advance.

Answer 1

With iOS11 (and the advent of iPhoneX), Apple has implemented Safe Zone Planning Guide to adapt your views to iPhoneX.

A safe area is an area of ​​the screen that does not overlap with a notch or home indicator.

To avoid the problems you are facing, you need to change the upper limit of noView 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 to iPhone X, but the status bar no longer has a red background. You have added a red background color to the status bar:

You can simplify the work with the UINavigationController (with a red navigation bar):

With this approach, you do not need to set any restrictions! The system automatically performs all the settings for you.

Answer 2

In Objective-C for top and bottom margins, when on 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

If you do not want to use the UINavigationController but want to have a navigation bar, you can do this (using UIImageView ):

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

Or you can create a view and set its upper limit to the top of the supervisor and its lower limit to the top of the navigation bar. Remember to turn it red. :-)

Answer 4

Set a header height limit according to the device.

 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 } 

And set all the subView (headerView) constraints corresponding to the bottom of the supervisor (headerView).

Additional note on why we added 24 pixels for iphoneX:

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