Á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, según lo define la overscanCompensationInsetspropiedad de UIScreen.) También cubre cualquier espacio adicional definido por la additionalSafeAreaInsetspropiedad 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á oculto, 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 - Release Note
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 la restricción de edició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. 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. 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 tenga como objetivo 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 UIViewextensión, le facilitará 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 :
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
