Área segura de Xcode 9

Al explorar Xcode9 Beta se encontró un área segura en constructores de interfaces Ver el visor de jerarquía. Tengo curiosidad y traté de saber sobre la documentation de Área segura en las manzanas, en esencia el documento dice "El área de vista que interactúa directamente con el layout automático" Pero no me satisfizo, quiero saber Uso práctico de esta cosa nueva. ¿Alguien tiene alguna idea?

introduzca la descripción de la imagen aquí

Conclusión párrafo de Apple doc para el área segura.

La class UILayoutGuide está diseñada para realizar todas las tareas realizadas previamente por las vistas ficticias, pero hacerlo de una manera más segura y eficiente. Las guías de layout no definen una nueva vista. No participan en la jerarquía de vistas. En cambio, simplemente definen una región rectangular en el sistema de coorderadas de su vista que puede interactuar con el layout automático.

El área segura es una guía de layout ( Guía de layout de área segura ) .
La guía de layout que representa la parte de su vista que está desdibujada por barras y otro contenido. En iOS 11, Apple desatesting las guías de layout superior e inferior y las reemplaza con una única guía de layout 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 navigation, barras de tabs, barras de herramientas y otros ancestros que oscurecen la vista del controller de vista. (En tvOS, el área segura incorpora el bisel de la pantalla, según lo define la propiedad overscanCompensationInsets de UIScreen). También cubre cualquier espacio adicional definido por la propiedad additionalSafeAreaInsets del controller de vista. Si la vista no está actualmente instalada en una jerarquía de vista, o aún no está visible en la pantalla, la guía de layout siempre coincide con los bordes de la vista.

Para la vista raíz del controller de vista, el área segura de esta propiedad representa la parte entera del contenido del controller de vista que está oscurecida, y las inserciones adicionales que especificó. 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 raíz del controller de vista, las inserciones de borde en esta propiedad son 0.

Según Apple, Xcode 9 – Nota de lanzamiento
Interface Builder utiliza UIView.safeAreaLayoutGuide como reemploop de las guías de layout Top y Bottom en desuso en UIViewController. Para usar la nueva área segura, select Guías de layout de área segura en el inspector de files para el controller de vista y luego agregue restricciones entre su contenido y los nuevos anclajes de área segura. Esto evita que su contenido sea oscurecido por las barras superior e inferior, y por la región sobnetworkingimensionada en tvOS. Las restricciones en el área segura se convierten en Superior e Inferior al desplegarse en versiones anteriores de iOS.

introduzca la descripción de la imagen aquí

Aquí hay una reference simple como una comparación (para hacer un efecto visual similar) entre la Guía de layout existente (Superior e Inferior) y la Guía de layout de área segura.

Diseño de área segura: introduzca la descripción de la imagen aquí

AutoLayout

introduzca la descripción de la imagen aquí

Cómo habilitar y trabajar con el layout de área segura

Siga estos pasos para encontrar la solución:

  • Habilite 'Diseño de área segura', si no está habilitado.
  • Retire 'toda restricción' si muestran connection con Super vista y vuelva a adjuntar todo con un anclaje de layout seguro. O haga doble clic en una restricción y edite la connection de super vista a SafeArea anchor

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

introduzca la descripción de la imagen aquí

Aquí está el resultado de los cambios anteriores.

introduzca la descripción de la imagen aquí

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

introduzca la descripción de la imagen aquí

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

introduzca la descripción de la imagen aquí

Para las aplicaciones con layouts personalizados, el soporte de iPhone X también debería ser relativamente fácil, especialmente si su aplicación utiliza el layout automático y se adhiere a las guías de layout de áreas seguras y márgenes.

introduzca la descripción de la imagen aquí

Aquí hay un código de muestra (Ref desde: [Guía de layout de área segura] ( https://useyourloaf.com/blog/safe-area-layout-guide/ )):
Si crea sus restricciones en el código, use la propiedad safeAreaLayoutGuide de UIView para get los anclajes de layout relevantes. Recreamemos el ejemplo anterior de Interface Builder en el código para ver cómo se ve:

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

 private let greenView = UIView() 

Es posible que tengamos una function para configurar las vistas y las restricciones llamadas desde viewDidLoad:

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

Cree las restricciones de margen inicial y posterior siempre usando el layoutMarginsGuide 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 less que esté orientado a iOS 11, solo tendrá que ajustar las restricciones de la guía de layout de área segura con #available y volver a las guías de layout superior e inferior para 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) ]) } 

Aquí está la documentation oficial de Apple Developer para una guía de layout de área segura

Se requiere área segura para manejar el layout 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 usando el layout de área segura

Apple introdujo el topLayoutGuide y el bottomLayoutGuide como properties de UIViewController en iOS 7. Le permitieron crear restricciones para evitar que su contenido sea oculto por barras UIKit como el estado, la navigation o la barra de tabs. Estas guías de layout están en desuso en iOS 11 y se reemplazan por una única guía de layout de área segura.

Consulte el enlace para get más información.

Quiero mencionar algo que me atrapó primero cuando intentaba adaptar una aplicación basada en SpriteKit para evitar los bordes networkingondeados y el "notch" del nuevo iPhone X, como nos lo han sugerido las últimas Directrices 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, on- -viewDidAppear: para informar un marco de layout significativo (de lo contrario, simplemente devuelve el tamaño de pantalla completa).

De la documentation de la propiedad:

La guía de layout que representa la parte de su vista que está desdibujada por barras y otro contenido. Cuando la vista es visible en la pantalla , esta guía refleja la parte de la vista que no está cubierta por las barras de navigation, las barras de tabs, las barras de herramientas y otras vistas de antecesores. (En tvOS, el área segura refleja el área que no está cubierta en el marco de la pantalla). Si la vista no está actualmente instalada en una jerarquía de vista, o aún no está visible en la pantalla, los bordes de la guía de layout son iguales a los bordes de la vista .

(el énfasis es mío)

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

La Guía de layout de área segura ayuda a evitar la superposition de elementos de la interfaz de usuario del sistema al colocar el contenido y los controles.

El área segura es el área entre los elementos de la interfaz de usuario del sistema, que son la barra de estado, la barra de navigation 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 contrae. Cuando agrega una barra de navigation a su aplicación, el área segura se contrae nuevamente.

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

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

  • Habilite la checkbox Guía de layout de área segura desde el inspector de files.

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

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

  • El área segura no cubre las barras de navigation, barras de tabs, barras de herramientas y otras vistas de antepasados.
  • Use áreas seguras como ayuda para distribuir su contenido como UIButton etc.

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

  • Asegúrese de que los backgrounds se extiendan a los bordes de la pantalla, y que los layouts desplazables verticalmente, como tablas y collections, continúen hasta el background.

  • 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 de forma dinámica el contenido según el dispositivo del usuario. Tenga en count que la barra de estado en el iPhone X no cambia la altura cuando las tareas de background, como la grabación de voz y el seguimiento de la location, están activas print(UIApplication.shanetworking.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

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

  • Safe Area Layout Guide es propiedad de UIView .

  • Una vez que habilite la Guía de layout de área segura , puede ver la propiedad de las restricciones de área segura listda en el generador de interfaces.

introduzca la descripción de la imagen aquí

introduzca la descripción de la imagen aquí

https://developer.apple.com/documentation/uikit/uiview/2891102-safearealayoutguide

introduzca la descripción de la imagen aquí

introduzca la descripción de la imagen aquí

introduzca la descripción de la imagen aquí

Encuentro estas publicaciones https://useyourloaf.com/blog/safe-area-layout-guide/ , https://useyourloaf.com/blog/supporting-iphone-x/ útil. Aquí están los visuales en acción

iPhone 8 retrato

iPhone 8 paisaje

iPhone X retrato

paisaje del iPhone X