[英]iOS 11 Layout guidance about safe Area for iPhone x
My application already in app store, yesterday i have updated my Xcode version to 9 and works fine except iPhone x . 我的应用程序已经在应用程序商店中,昨天我将我的Xcode版本更新为9并且除了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. 1.我已经创建了两个UIView (两者都是固定高度),名为Header和Tab bar,我已经隐藏了我的NavigationBar整个应用程序。
2.Added extension to UIViewController for making Header and Tab bar 2.为UIViewController添加了扩展,用于创建Header和Tab栏
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 : 并调用每个Viewcontroller,如下所示:
self.addHeaderTab(currentViewController: self, content:"நிகழ்ச்சி நிரல்" , isMenu: true)
Like that Tab bar also i have done but all the device working expect iPhone x . 就像那个Tab栏我也做过,但所有设备都在使用iPhone x 。
See My screen shot : 请参阅我的屏幕截图:
i have studied about https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/ 我研究过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. 借助iOS11(以及iPhoneX的外观),Apple推出了“ 安全区域布局指南”,以使您的视图适应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: 为了避免您遇到的问题,您必须更改iOS11的noView顶级约束:
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. 因为现在你的noView
在iPhone X上noView
移动,但状态栏不再有红色背景。 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): 使用UINavigationController (带红色导航栏)可以使事情变得更容易:
With this approach you don't have to set any constraints! 使用这种方法,您不必设置任何约束! The systems does all the adjustments for you automatically. 系统会自动为您完成所有调整。
In Objective-C for top and bottom margin when on iPhone-X 在Objective-C中,在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];
}
If you don't want to use a UINavigationController
but you want to have a navigation bar, you can do this way (using a UIImageView
): 如果您不想使用UINavigationController
但想要有导航栏,可以这样做(使用UIImageView
):
https://medium.com/@kahseng.lee123/creating-custom-navigation-bar-tab-bar-for-iphone-x-f03b1e1827d3 https://medium.com/@kahseng.lee123/creating-custom-navigation-bar-tab-bar-for-iphone-x-f03b1e1827d3
Or you can create a view and set its top constraint to the top of the superview and its bottom contraint to the top of the navigation bar. 或者,您可以创建视图并将其顶部约束设置为超级视图的顶部,并将其底部约束设置为导航栏的顶部。 Don't forget to make it red. 别忘了让它变红。 :-) :-)
Set height constrain of headerView according to the device. 根据设备设置headerView的高度约束。
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's(of headerView) constrain respective to bottom of superview(headerView). 并将所有subView的(headerView)约束设置为superview(headerView)的底部。
Additional note on why we have added 24 pixel for iphoneX: 关于为什么我们为iphoneX添加了24像素的补充说明:
// portrait orientation - status bar is shown
additionalSafeAreaInsets.top = 24.0
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.