Con la introducción del nuevo dispositivo de Apple el año pasado, el iPhone X y más recientemente el iPhone XR, XS Y XS MAX, para los programadores se ha vuelto tarea principal el actualizar todas las Apps que ya habíamos subido a la App Store o que aún se encuentran en desarrollo, esto con el fin de que las Apps se vean bien tanto en la nueva generación de iPhone’s que cuentan con el Notch, así como con las generaciones anteriores.
El primer paso es utilizar la instancia “SafeAreaLayoutGuide“. Para ello debemos asegurarnos que nuestro proyecto esta siendo compilado para iOS 11 como mínimo, ya que de lo contrario no se podrá tener acceso a esta instancia.
SafeAreaLayoutGuide es una guía que representa la parte de la vista que no está cubierta por las barras de navegación, barras de herramientas entre otras vistas a considerar.
Para entenderlo mejor veamos la siguiente parte de código.
Anteriormente para agregar una vista a un UIViewController se hacía lo siguiente para considerar los márgenes del NavigationController y el TabBarController:
var viewTop : UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.layer.masksToBounds = true
view.backgroundColor = UIColor.orange
return view
}()
//y en el ViewDidLoad se agrega a la vista y se declaran los Constraints
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(viewTop)
viewTop.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
viewTop.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
viewTop.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
viewTop.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
}
De esta manera se obtiene una vista donde se pueden agregar todos los elementos que se desean ya que esta vista cuenta con los márgenes de los controladores de la App en la generación anterior, pero en la nueva generación hay que cambiar lo siguiente para tomar en cuenta los nuevos márgenes.
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(viewTop)
viewTop.leftAnchor.constraint(equalTo:
view.safeAreaLayoutGuide.leftAnchor).isActive = true
viewTop.rightAnchor.constraint(equalTo:
view.safeAreaLayoutGuide.rightAnchor).isActive = true
viewTop.topAnchor.constraint(equalTo:
view.safeAreaLayoutGuide.topAnchor).isActive = true
viewTop.bottomAnchor.constraint(equalTo:
view.safeAreaLayoutGuide.bottomAnchor).isActive = true
}
Agregando SafeAreaLayoutGuide se soluciona el problema con los Constraints de los bordes.
La diferencia se puede ver en las siguientes imagenes
Sin SafeAreaLayoutGuide
Con SafeAreaLayoutGuide
A partir de iOS 11 todos los programadores de iOS debemos de considerar esto, y actualizar las Apps que tenemos en la tienda con el fin de que sean compatibles con la nueva generación de iPhone´s.
