Безопасная область Xcode 9

Безопасная область-это руководство по компоновке (Руководство По Компоновке Безопасной Зоны).
Руководство по компоновке, представляющее часть представления, которая не закрыта полосами и другим содержимым. В iOS 11+ Apple не поддерживает верхние и нижние направляющие макета и заменяет их одним руководством по макету безопасной области.

когда представление отображается на экране, это руководство отражает часть представления, которая не покрыта другим контентом. Этот Безопасная область представления отражает область, покрытую навигационными панелями, вкладками, панелями инструментов и другими предками, которые скрывают представление контроллера представления. (В tvOS Безопасная область включает рамку экрана, как определено overscanCompensationInsets свойство UIScreen.) Он также охватывает любое дополнительное пространство, определенное контроллером вида additionalSafeAreaInsets собственность. Если представление в данный момент не установлено в иерархии представлений или еще не отображается на экране, руководство по компоновке всегда соответствует краям вид.

для корневого представления контроллера вида Безопасная область в этом свойстве представляет всю часть содержимого контроллера вида, которая скрыта, и любые дополнительные вставки, которые вы указали. Для других представлений в иерархии представлений Безопасная область отражает только ту часть этого представления, которая скрыта. Например, если представление полностью находится в безопасной области корневого представления контроллера вида, то вставки ребер в этом свойстве равны 0.

согласно Apple,Xcode 9-релиз Примечание
Interface Builder использует UIView.safeAreaLayoutGuide в качестве замены устаревших верхних и нижних направляющих макета в UIViewController. Чтобы использовать новую безопасную область, выберите направляющие макета безопасной области в инспекторе файлов для контроллера вида, а затем добавьте ограничения между содержимым и новыми якорями безопасной области. Это предотвращает скрытие содержимого верхней и нижней полосами, а также областью overscan на экране tvOS. Ограничения для безопасной области преобразуются в верхнюю и нижнюю части при развертывании в более ранних версиях iOS.

---

вот простая ссылка в качестве сравнения (для создания аналогичного визуального эффекта) между существующим (верхним и Нижним) руководством по компоновке и руководством по компоновке безопасной области.

Безопасный Район Макет:

AutoLayout

---

как работать с макетом безопасной зоны?

выполните следующие действия, чтобы найти решение:

• включить "макет безопасной зоны", если он не включен.
• удалить "все ограничения", если они показывают связь с с супер вид и заново прикрепите все с безопасным анкером плана. Или дважды щелкните по ограничению и редактировать соединение из супер просмотра в SafeArea якорь

вот пример снимка, как включить макет безопасной области и редактировать ограничение.

вот результат вышеуказанных изменений

---

дизайн макета с SafeArea
при проектировании для iPhone X вы должны убедиться, что макеты заполняют экран и не скрываются закругленными углами устройства, корпусом датчика или индикатор доступа к главному экрану.

большинство приложений, которые используют стандартные, системные элементы пользовательского интерфейса, такие как панели навигации, таблицы и коллекции, автоматически адаптируются к новому форм-фактору устройства. Фоновые материалы простираются до краев дисплея, а элементы пользовательского интерфейса соответствующим образом вставлены и расположены.

для приложений с пользовательскими макетами поддержка iPhone X также должна быть относительно простой, особенно если ваше приложение использует автоматическую компоновку и придерживается направляющих макета безопасной области и полей.

---

вот пример кода (ссылка из: Руководство По Компоновке Безопасной Зоны):
если вы создаете свои ограничения в коде, используйте свойство safeAreaLayoutGuide UIView, чтобы получить соответствующие якоря макета. Давайте воссоздадим приведенный выше пример построителя интерфейса в коде, чтобы увидеть, как он выглядит:

Предположим, у нас есть зеленый вид как свойство в нашем представлении контроллера:

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
    }
  }

}

---

вот пример кода С:

• как добавить безопасную область программно

---

вот официальная документация разработчика Apple для Безопасный Район Руководство По Компоновке

Безопасная область требуется для обработки дизайна пользовательского интерфейса для iPhone-X. Вот основные рекомендации для как создать пользовательский интерфейс для iPhone-X с помощью макета безопасной зоны