Руководство по макету iOS 11 о безопасной области для iPhone x

Question

Мое приложение уже в магазине приложений, вчера я обновил свою версию XCode до 9 и работает нормально, кроме iPhone x. Пользователь рухнул.

1. Здесь я создал два UIView (оба имеют фиксированную высоту), названные заголовком и панелью вкладок, и я спрятал свое приложение NavigationBar целиком.

2. Добавлено расширение UIViewController для создания панели заголовка и вкладок.

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)

Как и та панель вкладок, что я сделал, но все работающие устройства ожидают iPhone x.

Смотрите мой снимок экрана:

я изучал https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

но не ясно с их документом.

Помощь будет оценена, спасибо заранее.

Answer 1

С iOS11 (и появлением iPhoneX) Apple представила Руководство по макету безопасной зоны, чтобы адаптировать ваши взгляды к iPhoneX.

Безопасная зона - это область экрана, которая не перекрывается надписью или индикатором "Домой".

Чтобы избежать проблемы, с которой вы столкнулись, вы должны изменить главное ограничение noView для 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)
])

К сожалению, это еще не все. Потому что теперь ваш noView на iPhone X перемещается вниз, но строка состояния больше не имеет красного фона. Вы добавили красный цвет фона за строкой состояния:

Вы можете сделать все намного проще, используя 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 (of headerView), соответствующие нижней части superview(headerView).

Дополнительное примечание о том, почему мы добавили 24 пикселя для iphoneX:

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