iOS 11關於iPhone x安全區域的布局指南

Question

我的應用程序已經在應用程序商店中，昨天我將我的Xcode版本更新為9並且除了iPhone x以外工作正常。 用戶界面崩潰了。

1.我已經創建了兩個UIView （兩者都是固定高度），名為Header和Tab bar，我已經隱藏了我的NavigationBar整個應用程序。

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

    }

並調用每個Viewcontroller，如下所示：

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

就像那個Tab欄我也做過，但所有設備都在使用iPhone x 。

請參閱我的屏幕截圖：

我研究過https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

但他們的文件並不清楚。

將不勝感激，謝謝。

Answer 1

借助iOS11（以及iPhoneX的外觀），Apple推出了“ 安全區域布局指南”，以使您的視圖適應iPhoneX。

安全區域是屏幕的區域，不與凹口或歸位指示器重疊。

為了避免您遇到的問題，您必須更改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)
])

不幸的是，並非全部。 因為現在你的noView在iPhone X上noView移動，但狀態欄不再有紅色背景。 您在狀態欄后面添加了紅色背景顏色：

使用UINavigationController （帶紅色導航欄）可以使事情變得更容易：

使用這種方法，您不必設置任何約束！ 系統會自動為您完成所有調整。

Answer 2

在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];

}

Answer 3

如果您不想使用UINavigationController但想要有導航欄，可以這樣做（使用UIImageView ）：

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

或者，您可以創建視圖並將其頂部約束設置為超級視圖的頂部，並將其底部約束設置為導航欄的頂部。 別忘了讓它變紅。 :-)

Answer 4

根據設備設置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
}

並將所有subView的（headerView）約束設置為superview（headerView）的底部。

關於為什么我們為iphoneX添加了24像素的補充說明：

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