support - what is safe area ios

Área segura de Xcode 9

Question

Mientras explora Xcode9 Beta, área segura encontrada en los constructores de interfaces, vea el visor de jerarquía Sentí curiosidad e intenté saber acerca de la documentación del Área segura en las manzanas, en esencia el documento dice "El área de vista que interactúa directamente con el diseño automático" Pero no me satisfizo, quiero saber Uso práctico de esta nueva cosa.

¿Alguien tiene alguna pista?

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

La clase UILayoutGuide está diseñada para realizar todas las tareas previamente realizadas por vistas ficticias, pero para hacerlo de una manera más segura y eficiente. Las guías de diseño 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 coordenadas de su vista propietaria que puede interactuar con el diseño automático.

Answer 1

La Guía de diseño de área segura ayuda a evitar la superposición de elementos de la IU del sistema al colocar contenido y 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 navegación y la barra de herramientas o la barra de pestañas. 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 nuevamente.

En el iPhone X, el Área segura proporciona un recuadro adicional desde los bordes superior e inferior de la pantalla en vertical 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 está tomado del video Diseño de Apple para iPhone X donde también visualizan cómo los diferentes elementos afectan el Área segura.

Answer 2

Área segura es una guía de diseño ( Guía de diseño de área segura ) .
La guía de diseño que representa la parte de su vista que no está oculta por barras y otro contenido. En iOS 11+, Apple está eliminando las guías de diseño superior e inferior y las reemplaza con una sola guía de diseño de área segura.

Cuando la vista es visible en 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 pestañas, barras de herramientas y otros antepasados ​​que oscurecen la vista de un controlador de vista. (En tvOS, el área segura incorpora el bisel de la pantalla, 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á instalada actualmente en una jerarquía de vistas, o aún no está visible en la 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á oculta, 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á oculta. Por ejemplo, si una vista está completamente dentro del área segura de la vista raíz del controlador 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 reemplazo de las guías de diseño superior e inferior 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 sea oscurecido por las barras superior e inferior, y por la región overscan en tvOS. Las restricciones al área segura se convierten en Superior e Inferior cuando se implementa en versiones anteriores de iOS.

Aquí hay una referencia simple como una comparación (para lograr 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:

Diseño automático

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

Siga estos pasos para encontrar la solución:

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

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

Aquí está el resultado de los cambios anteriores

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 estén ocultos por las esquinas redondeadas del dispositivo, la carcasa del sensor o el indicador para acceder a la pantalla de inicio.

La mayoría de las aplicaciones que utilizan elementos de interfaz de usuario 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 hasta los bordes de la pantalla y los elementos de la interfaz de usuario se insertan y colocan adecuadamente.

Para aplicaciones con diseños personalizados, la compatibilidad con iPhone X también debería ser relativamente fácil, especialmente si su aplicación usa Diseño automático y se adhiere a las guías de diseño de márgenes y áreas seguras.

Aquí hay un código de muestra (Ref: 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. Recreemos el ejemplo anterior de Interface Builder en código para ver cómo se ve:

Suponiendo que tenemos la vista verde como una 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 margen inicial y final como siempre utilizando 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 menos que solo se dirija a iOS 11, deberá ajustar las restricciones de la guía de diseño del área segura con #available 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:

Después de la extensión UIView , le UIView más fácil trabajar con SafeAreaLayout mediante programación.

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 mediante programación

Aquí está la documentación oficial del desarrollador de Apple para la guía de diseño de área segura

Se requiere un área segura para manejar el diseño de la interfaz de usuario para iPhone-X. Aquí hay una guía básica sobre cómo diseñar una interfaz de usuario para iPhone-X usando el diseño de área segura

Answer 3

Apple presentó topLayoutGuide y bottomLayoutGuide como propiedades de UIViewController en iOS 7. Le permitieron crear restricciones para evitar que su contenido se ocultara en barras UIKit como el estado, la navegación o la barra de pestañas. Estas guías de diseño están en desuso en iOS 11 y se reemplazan por una única guía de diseño de área segura.

Consulte el enlace para más información.

Answer 4

• Anteriormente en iOS 7.0–11.0 <En desuso> UIKit usa topLayoutGuide & bottomLayoutGuide que es la propiedad UIView

• iOS11 + utiliza safeAreaLayoutGuide, que también es propiedad de UIView

• Active la casilla de verificación Guía de diseño de área segura del inspector de archivos.

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

• En tvOS , el área segura también incluye las inserciones de sobreexploración 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 pestañas, barras de herramientas y otras vistas de antepasados.

• 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 estén ocultos por las esquinas redondeadas del dispositivo, la carcasa del sensor o el indicador para acceder a la pantalla de inicio.

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

• 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 dinámicamente el contenido según el dispositivo del usuario. Tenga en cuenta que la barra de estado en el iPhone X no cambia la 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 habilite la Guía de diseño de área segura , puede ver la propiedad de restricciones de área segura en el generador de interfaces.

Puede establecer restricciones con respectivo 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
        }

Answer 5

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

De la documentación de la propiedad:

La guía de diseño que representa la parte de su vista que no está oculta 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 navegación, las barras de pestañas, las 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 la pantalla, los bordes de la guía de diseño son iguales a los bordes de la vista .

(énfasis mío)

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