Безопасная зона - это руководство по макету (Руководство по макету безопасной зоны ) .
Руководство по макету, представляющее ту часть вашего представления, которая не скрыта столбцами и другим содержимым. В iOS 11+ Apple не поддерживает верхний и нижний руководства по макету и заменяет их одним руководством по компоновке безопасной области.
Когда вид отображается на экране, это руководство отражает часть вида, которая не покрыта другим содержимым. Безопасная область представления отражает область, покрытую панелями навигации, панелями вкладок, панелями инструментов и другими предками, которые скрывают вид контроллера представления. (В tvOS безопасная область включает лицевую панель экрана, как определено overscanCompensationInsetsсвойством UIScreen.) Она также покрывает любое дополнительное пространство, определяемое additionalSafeAreaInsetsсвойством контроллера представления . Если вид в настоящее время не установлен в иерархии видов или еще не виден на экране, руководство по компоновке всегда соответствует краям вида.
Для корневого представления контроллера представления безопасная область в этом свойстве представляет всю скрытую часть содержимого контроллера представления и любые дополнительные вставки, которые вы указали. Для других представлений в иерархии представлений безопасная область отражает только ту часть этого представления, которая скрыта. Например, если представление полностью находится в безопасной области корневого представления его контроллера представления, вставки ребер в этом свойстве равны 0.
Согласно Apple, Xcode 9 - примечание к выпуску
Interface Builder использует UIView.safeAreaLayoutGuide в качестве замены устаревших направляющих макетов Top и Bottom в UIViewController. Чтобы использовать новую безопасную область, выберите «Руководства по макету безопасной области» в Инспекторе файлов для контроллера представления, а затем добавьте ограничения между содержимым и новыми привязками безопасной области. Это предотвращает скрытие вашего контента верхней и нижней полосами, а также областью пересканирования в tvOS. При развертывании на более ранних версиях iOS ограничения в безопасной области преобразуются в верхнюю и нижнюю.
Вот простая ссылка в качестве сравнения (для создания аналогичного визуального эффекта) между существующим (сверху и снизу) руководством по макету и руководством по макету безопасной зоны.
Схема безопасной зоны:
AutoLayout
Как работать с Safe Area Layout?
Выполните следующие действия, чтобы найти решение:
- Включите «Схему безопасной зоны», если она не включена.
- Удалите «все ограничения», если они показывают связь с Super View, и повторно присоедините все с помощью безопасной привязки макета. ИЛИ Дважды щелкните мышью на ограничении и измените соединение из суперпредставления в привязку SafeArea.
Вот пример снимка, как включить макет безопасной области и редактировать ограничение.
Вот результат вышеуказанных изменений
Дизайн макетов с SafeArea
При разработке дизайна для iPhone X вы должны убедиться, что макеты занимают весь экран и не закрыты закругленными углами устройства, корпусом датчика или индикатором доступа к главному экрану.
Большинство приложений, использующих стандартные предоставляемые системой элементы пользовательского интерфейса, такие как панели навигации, таблицы и коллекции, автоматически адаптируются к новому форм-фактору устройства. Фоновые материалы простираются до краев дисплея, а элементы пользовательского интерфейса соответственно вставляются и располагаются.
Для приложений с пользовательскими макетами поддержка iPhone X также должна быть относительно простой, особенно если ваше приложение использует автоматическую компоновку и придерживается руководств по компоновке безопасной области и полей.
Вот пример кода (см. Руководство по макету безопасной области ) :
если вы создаете свои ограничения в коде, используйте свойство safeAreaLayoutGuide в UIView, чтобы получить соответствующие привязки макета. Давайте воссоздаем приведенный выше пример Interface Builder в коде, чтобы увидеть, как он выглядит:
Предполагая, что у нас есть зеленый вид как свойство в нашем контроллере вида:
private let greenView = UIView()
У нас может быть функция для настройки представлений и ограничений, вызываемых из viewDidLoad:
private func setupView() {
greenView.translatesAutoresizingMaskIntoConstraints = false
greenView.backgroundColor = .green
view.addSubview(greenView)
}
Создайте ограничения начального и конечного полей, как всегда, используя layoutMarginsGuide корневого представления:
let margins = view.layoutMarginsGuide
NSLayoutConstraint.activate([
greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
])
Теперь, если вы не нацелены только на iOS 11, вам нужно будет обернуть ограничения по макету безопасной области с помощью #available и вернуться к верхним и нижним руководствам по макету для более ранних версий 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)
])
}
Результат:
После UIViewрасширения упростите работу с SafeAreaLayout программно.
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
}
}
}
Вот пример кода в Objective-C :
Вот официальная документация Apple Developer для руководства по безопасной зоне
Безопасная зона необходима для обработки дизайна пользовательского интерфейса для iPhone-X. Вот базовое руководство по разработке пользовательского интерфейса для iPhone-X с использованием макета безопасной области
