Безпечна зона - це посібник із компонування (Посібник із макетування безпечної області ) .
Посібник із компонування, що представляє частину вашого перегляду, яка не затьмарена барами та іншим вмістом. В iOS 11+ Apple Apple знецінює верхні та нижні напрямні макета та замінює їх одним єдиним посібником щодо макета безпечної області.
Коли вигляд видно на екрані, цей посібник відображає частину перегляду, яка не охоплена іншим вмістом. Безпечна область перегляду відображає зону, охоплену панелями навігації, панелями вкладок, панелями інструментів та іншими предками, які затемнюють подання контролера подання. (У tvOS безпечна область містить рамку екрана, як визначено overscanCompensationInsetsвластивістю UIScreen.) Він також охоплює будь-який додатковий простір, визначений additionalSafeAreaInsetsвластивістю контролера перегляду . Якщо представлення наразі не встановлено в ієрархії подання, або його ще не видно на екрані, керівництво по компонуванню завжди відповідає краям подання.
Для кореневого виду контролера подання, безпечна область у цій властивості являє собою всю частину вмісту контролера подання, що затушовується, та будь-які додаткові вставки, які ви вказали. Для інших представлень в ієрархії представлень безпечна область відображає лише ту частину цього виду, яка затушована. Наприклад, якщо представлення знаходиться повністю в безпечній області кореневого виду контролера його подання, крайові вставки у цій властивості дорівнюють 0.
Відповідно до Apple, Xcode 9 - Примітка до випуску
Interface Builder використовує UIView.safeAreaLayoutGuide як заміну для застарілих посібників із верхнім і нижнім розміщенням у UIViewController. Щоб використовувати нову безпечну зону, виберіть Посібники з безпечної розмітки області в інспекторі файлів для контролера перегляду, а потім додайте обмеження між вмістом та новими якорями безпечної області. Це запобігає затьмаренню вашого вмісту верхньою та нижньою смугами та областю надмірного масштабу на tvOS. Обмеження в безпечній зоні перетворюються на верхню та нижню при розміщенні на більш ранніх версіях iOS.
Ось проста довідка як порівняння (щоб зробити подібний візуальний ефект) між існуючими (Поверхня та нижня) інструкцією щодо макета та керівництвом щодо безпечної компонування області.
Макет безпечної зони:
Автоматична розкладка
Як працювати з безпечним макетом зони?
Виконайте наступні дії, щоб знайти рішення:
- Увімкніть "Безпечний макет області", якщо його не ввімкнено.
- Видаліть "всі обмеження", якщо вони показують зв'язок із 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 для керівництва по безпечній макеті області
Безпечна зона необхідна для обробки дизайну інтерфейсу користувача для iPhone-X. Ось основні вказівки щодо того, як створити користувальницький інтерфейс для iPhone-X за допомогою Safe Area Layout
