Área segura de Xcode 9

Al explorar Xcode9 Beta Found Safe Area en constructores de interfaz Ver el visor de jerarquía. Tengo curiosidad e intenté conocer la documentación de Safe Area on Apples, en esencia el documento dice “El área de visualización que interactúa directamente con el diseño de Auto”. Pero no me satisfizo, quiero saber el uso práctico de esta nueva cosa.

¿Alguien tiene alguna pista?

enter image description here

Párrafo de conclusión del documento de Apple para área segura.

La clase UILayoutGuide está diseñada para realizar todas las tareas que anteriormente realizaban las vistas ficticias, pero para hacerlo de una manera más segura y más eficiente. Las guías de diseño no definen una nueva vista. No participan en la jerarquía de vistas. En su lugar, simplemente definen una región rectangular en el sistema de coordenadas de su vista propietaria que puede interactuar con el Diseño automático.

Safe Area es una guía de diseño ( Safe Area Layout Guide ) .
La guía de diseño que representa la parte de su vista que no está cubierta por barras y otros contenidos. En iOS 11+, Apple está desaprobando las guías de diseño superior e inferior y reemplazándolas con una única guía de diseño de área segura.

Cuando la vista es visible en la pantalla, esta guía refleja la parte de la vista que no está cubierta por otro contenido. El área segura de una vista refleja el área cubierta por barras de navegación, barras de tabs, barras de herramientas y otros antecesores que oscurecen la vista del controlador de vista. (En tvOS, el área segura incorpora el bisel de la pantalla, tal como lo define la propiedad overscanCompensationInsets de UIScreen). También cubre cualquier espacio adicional definido por la propiedad additionalSafeAreaInsets del controlador de vista. Si la vista no está actualmente instalada en una jerarquía de vistas, o aún no está visible en pantalla, la guía de diseño siempre coincide con los bordes de la vista.

Para la vista raíz del controlador de vista, el área segura en esta propiedad representa la porción completa del contenido del controlador de vista que está oscurecida y cualquier inserción adicional que haya especificado. Para otras vistas en la jerarquía de vistas, el área segura refleja solo la parte de esa vista que está oscurecida. Por ejemplo, si una vista está completamente dentro del área segura de la vista de raíz de su controlador de vista, las inserciones de borde en esta propiedad son 0.

Según Apple, Xcode 9 – Nota de lanzamiento
Interface Builder usa UIView.safeAreaLayoutGuide como reemplazo de las guías de diseño Top y Bottom en desuso en UIViewController. Para usar la nueva área segura, seleccione Guías de diseño de área segura en el inspector de archivos para el controlador de vista y luego agregue restricciones entre su contenido y los nuevos anclajes de área segura. Esto evita que su contenido se oscurezca por las barras superior e inferior, y por la región de sobreexploración en tvOS. Las restricciones al área segura se convierten en Superior e Inferior cuando se implementa en versiones anteriores de iOS.

enter image description here


Aquí hay una referencia simple como una comparación (para hacer un efecto visual similar) entre la Guía de diseño existente (Superior e Inferior) y la Guía de Diseño de Área Segura.

Diseño de área segura: enter image description here

Autodiseño

enter image description here


¿Cómo trabajar con el diseño de área segura?

Siga estos pasos para encontrar una solución:

  • Habilite ‘Diseño de área segura’, si no está habilitado.
  • Elimine ‘all constraint’ si muestran conexión con Super view y vuelva a conectarlo todo con un anclaje de diseño seguro. O Haga doble clic en una restricción y edite la conexión desde la supervista al ancla de SafeArea

Aquí hay una instantánea de muestra, cómo habilitar el diseño de área segura y la restricción de edición.

enter image description here

Aquí está el resultado de los cambios anteriores

enter image description here


Diseño de diseño con SafeArea
Al diseñar para iPhone X, debe asegurarse de que los diseños llenen la pantalla y no queden ocultos por las esquinas redondeadas, la carcasa del sensor o el indicador para acceder a la pantalla de inicio del dispositivo.

enter image description here

La mayoría de las aplicaciones que utilizan elementos de IU estándar proporcionados por el sistema, como barras de navegación, tablas y colecciones, se adaptan automáticamente al nuevo factor de forma del dispositivo. Los materiales de fondo se extienden a los bordes de la pantalla y los elementos de la interfaz de usuario se insertan y colocan apropiadamente.

enter image description here

Para aplicaciones con diseños personalizados, admitir iPhone X también debería ser relativamente fácil, especialmente si su aplicación utiliza Diseño automático y se adhiere a las guías de área segura y de margen de diseño.

enter image description here


Aquí hay un código de muestra (Ref. De: Guía de diseño de área segura ) :
Si crea sus restricciones en el código, use la propiedad safeAreaLayoutGuide de UIView para obtener los anclajes de diseño relevantes. Vamos a recrear el ejemplo anterior de Interface Builder en el código para ver cómo se ve:

Suponiendo que tenemos la vista verde como propiedad en nuestro controlador de vista:

 private let greenView = UIView() 

Podríamos tener una función para configurar las vistas y restricciones llamadas desde viewDidLoad:

 private func setupView() { greenView.translatesAutoresizingMaskIntoConstraints = false greenView.backgroundColor = .green view.addSubview(greenView) } 

Cree las restricciones de márgenes iniciales y finales como siempre utilizando laDiamMagiaGuía de la vista raíz:

  let margins = view.layoutMarginsGuide NSLayoutConstraint.activate([ greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor), greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor) ]) 

Ahora, a menos que tengas como objective solo iOS 11, deberás ajustar las restricciones de la guía de diseño de áreas seguras con #disponible y volver a las guías de diseño superior e inferior para las versiones anteriores de iOS:

 if #available(iOS 11, *) { let guide = view.safeAreaLayoutGuide NSLayoutConstraint.activate([ greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0), guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0) ]) } else { let standardSpacing: CGFloat = 8.0 NSLayoutConstraint.activate([ greenView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing), bottomLayoutGuide.topAnchor.constraint(equalTo: greenView.bottomAnchor, constant: standardSpacing) ]) } 

Resultado:

enter image description here


Después de la extensión UIView , facilite su trabajo con SafeAreaLayout programáticamente.

 extension UIView { // Top Anchor var safeAreaTopAnchor: NSLayoutYAxisAnchor { if #available(iOS 11.0, *) { return self.safeAreaLayoutGuide.topAnchor } else { return self.topAnchor } } // Bottom Anchor var safeAreaBottomAnchor: NSLayoutYAxisAnchor { if #available(iOS 11.0, *) { return self.safeAreaLayoutGuide.bottomAnchor } else { return self.bottomAnchor } } // Left Anchor var safeAreaLeftAnchor: NSLayoutXAxisAnchor { if #available(iOS 11.0, *) { return self.safeAreaLayoutGuide.leftAnchor } else { return self.leftAnchor } } // Right Anchor var safeAreaRightAnchor: NSLayoutXAxisAnchor { if #available(iOS 11.0, *) { return self.safeAreaLayoutGuide.rightAnchor } else { return self.rightAnchor } } } 

Aquí hay un código de muestra en Objective-C :

  • Cómo agregar un área segura programáticamente

Aquí está la Documentación Oficial del Desarrollador de Apple para la Guía de Diseño de Área Segura

Se requiere Safe Area para manejar el diseño de la interfaz de usuario para iPhone-X. Aquí hay una guía básica para Cómo diseñar la interfaz de usuario para iPhone-X utilizando Safe Area Layout

Quiero mencionar algo que me atrapó primero cuando intentaba adaptar una aplicación basada en SpriteKit para evitar los bordes redondeados y la “muesca” del nuevo iPhone X, como lo sugieren las últimas pautas de interfaz humana : la nueva propiedad safeAreLayoutGuide de UIView debe consultarse después de que la vista se haya agregado a la jerarquía (por ejemplo, en -viewDidAppear: para informar un cuadro de diseño significativo (de lo contrario, devuelve el tamaño de pantalla completo).

De la documentación de la propiedad:

La guía de diseño que representa la parte de su vista que no está cubierta por barras y otros contenidos. Cuando la vista es visible en la pantalla , esta guía refleja la porción de la vista que no está cubierta por barras de navegación, barras de tabs, barras de herramientas y otras vistas de antepasados. (En tvOS, el área segura refleja el área que no cubre el bisel de la pantalla). Si la vista no está instalada actualmente en una jerarquía de vistas, o aún no está visible en pantalla, los bordes de la guía de disposición son iguales a los bordes de la vista .

(énfasis mío)

Si lo lees desde -viewDidLoad: el layoutFrame de la guía será {{0, 0}, {375, 812}} lugar de {{0, 44}, {375, 734}} esperado

enter image description here

  • Anteriormente en iOS 7.0-11.0 UIKit utiliza el topLayoutGuide & bottomLayoutGuide que es propiedad de UIView
  • iOS11 + usa safeAreaLayoutGuide, que también es propiedad de UIView

  • Habilite la checkbox Guía de diseño de áreas seguras desde el inspector de archivos.

  • Las áreas seguras lo ayudan a ubicar sus puntos de vista dentro de la parte visible de la interfaz general.

  • En tvOS , el área segura también incluye las inserciones de overscan de la pantalla, que representan el área cubierta por el bisel de la pantalla.

  • SafeAreaLayoutGuide refleja la parte de la vista que no está cubierta por barras de navegación, barras de tabs, barras de herramientas y otras vistas de ancestros.
  • Use áreas seguras como ayuda para diseñar su contenido como UIButton etc.

  • Al diseñar para iPhone X, debe asegurarse de que los diseños llenen la pantalla y no queden ocultos por las esquinas redondeadas, la carcasa del sensor o el indicador para acceder a la pantalla de inicio del dispositivo.

  • Asegúrese de que los fondos se extiendan a los bordes de la pantalla, y que los diseños desplazables verticalmente, como las tablas y las colecciones, continúen hasta el fondo.

  • La barra de estado es más alta en el iPhone X que en otros iPhones. Si su aplicación asume una altura de barra de estado fija para posicionar el contenido debajo de la barra de estado, debe actualizar su aplicación para posicionar el contenido dinámicamente según el dispositivo del usuario. Tenga en cuenta que la barra de estado en el iPhone X no cambia de altura cuando las tareas en segundo plano, como la grabación de voz y el seguimiento de ubicación, están activas print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

  • La altura del contenedor del indicador de inicio es de 34 puntos.

  • Una vez que habilita la Guía de diseño de áreas seguras, puede ver las propiedades de restricciones de áreas seguras enumeradas en el constructor de interfaces.

enter image description here

Puede establecer restricciones con respectivo de self.view.safeAreaLayoutGuide como-

ObjC:

  self.demoView.translatesAutoresizingMaskIntoConstraints = NO; UILayoutGuide * guide = self.view.safeAreaLayoutGuide; [self.demoView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES; [self.demoView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES; [self.demoView.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES; [self.demoView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES; 

Rápido:

  demoView.translatesAutoresizingMaskIntoConstraints = false if #available(iOS 11.0, *) { let guide = self.view.safeAreaLayoutGuide demoView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true demoView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true demoView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true demoView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true } else { NSLayoutConstraint(item: demoView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true NSLayoutConstraint(item: demoView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true NSLayoutConstraint(item: demoView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true NSLayoutConstraint(item: demoView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true } 

enter image description here

enter image description here

enter image description here

Apple introdujo topLayoutGuide y bottomLayoutGuide como propiedades de UIViewController en iOS 7. Le permitieron crear restricciones para evitar que su contenido sea ocultado por barras de UIKit como el estado, la navegación o la barra de tabs. Estas guías de diseño están en desuso en iOS 11 y se han reemplazado por una única guía de diseño de áreas seguras.

Consulte el enlace para más información.

La Guía de diseño de áreas seguras ayuda a evitar que los elementos de la IU del sistema se superpongan al colocar el contenido y los controles.

El Área segura es el área entre los elementos de la IU del sistema que son la Barra de estado, la Barra de navegación y la Barra de herramientas o la Barra de tabs. Entonces, cuando agrega una barra de estado a su aplicación, el área segura se reduce. Cuando agrega una barra de navegación a su aplicación, el área segura se reduce de nuevo.

En el iPhone X, el área segura proporciona un recuadro adicional desde los bordes de la pantalla superior e inferior en el retrato incluso cuando no se muestra ninguna barra. En el paisaje, el Área segura se inserta desde los lados de las pantallas y el indicador de inicio.

Esto se toma del diseño de video de Apple para iPhone X donde también visualizan cómo los diferentes elementos afectan el Área segura.