iOS 11 Layout guidance about safe Area for iPhone x
Solution 1
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.
Solution 2
In Objective-C for top and bottom margin 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];
}
karthikeyan
Updated on May 09, 2020Comments
-
karthikeyan about 4 years
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.