iOS 11 Guía de layout sobre Área segura para iPhone x

Mi aplicación ya está en la tienda de aplicaciones, ayer he actualizado mi versión Xcode a 9 y funciona bien, excepto iPhone x . La UI se queuepsó.

1. Aquí he creado Two UIView (ambos son de altura fija) con el nombre de encabezado y barra de tabs y he ocultado toda la aplicación NavigationBar .

2. Agregó la extensión a UIViewController para crear la cabecera y la barra de tabs

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 } 

y llamando a todos los Viewcontroller como a continuación:

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

Al igual que la barra de tabs también lo he hecho, pero todo el dispositivo que funciona espera iPhone x .

Mira Mi captura de pantalla:

Imagen

He estudiado sobre https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

pero no estoy claro con su documento.

Se agradecerá la ayuda, gracias de antemano.

Con iOS 11 (y la aparición de iPhoneX), Apple presentó la Guía de layout de área segura para adaptar sus vistas al iPhoneX.

El área segura es el área de la pantalla que no se superpone con la muesca o el indicador de inicio.

introduzca la descripción de la imagen aquí

Para evitar el problema que está experimentando, debe cambiar la restricción principal de noView para iOS 11:

 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.topAnchor) ]) } NSLayoutConstraint.activate([ noView.leadingAnchor.constraint(equalTo: currentViewController.view.leadingAnchor), noView.trailingAnchor.constraint(equalTo: currentViewController.view.trailingAnchor), noView.heightAnchor.constraint(equalToConstant: 65) ]) 

Lamentablemente, eso no es todo. Porque ahora tu noView mueve hacia abajo en el iPhone X, pero la barra de estado ya no tiene un background rojo. Tienes que agregar un color de background rojo detrás de la barra de estado:

introduzca la descripción de la imagen aquí introduzca la descripción de la imagen aquí

Podría hacer las cosas mucho más fáciles al usar un UINavigationController (con una barra de navigation roja):

introduzca la descripción de la imagen aquí introduzca la descripción de la imagen aquí

¡Con este enfoque no tiene que establecer ninguna restricción! Los sistemas realizan todos los ajustes automáticamente.

En Objective-C para el margen superior e inferior cuando está en el 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]; }