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

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

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

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

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

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

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

режим

как работать с безопасным расположением области?

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

• включить "макет безопасной зоны", если он не включен.
• удалить "все ограничения", если они показывают соединение с супер вид и re-attach все с безопасным анкером плана. Или дважды щелкните по ограничению и редактировать соединение из super view в safearea anchor

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

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

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

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

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

вот пример кода (Ref from:Руководство По Компоновке Безопасной Зоны):
если вы создаете свои ограничения в коде, используйте свойство 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 с помощью макета безопасной области