Безопасная зона Xcode 9

Ответ 1

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

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

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

По словам Apple, Xcode 9 - примечание к выпуску
Интерфейсный Разработчик использует UIView.safeAreaLayoutGuide в качестве замены устаревших верхних и нижних направляющих макетов в 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 с использованием макета безопасной области

Ответ 2

Я хочу упомянуть кое-что, что привлекло меня первым, когда я пытался адаптировать приложение на основе SpriteKit, чтобы избежать закругления краев и "зарубки" нового iPhone X, как это было предложено в последних Рекомендациях по интерфейсу пользователя: новое свойство safeAreaLayoutGuide из UIView необходимо запросить после того, как представление было добавлено в иерархию (например, в -viewDidAppear:, чтобы сообщить о значимом фрейме макета (в противном случае он просто возвращает полный размер экрана).

Из документации по недвижимости:

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

(акцент мой)

Если вы прочитаете его еще в -viewDidLoad: layoutFrame руководства будет {{0, 0}, {375, 812}} вместо ожидаемого {{0, 44}, {375, 734}}

Ответ 3

• Ранее в iOS 7.0–11.0 < устаревший > UIKit использовал topLayoutGuide & bottomLayoutGuide, который является свойством UIView

• iOS11+ использует safeAreaLayoutGuide, который также UIView свойством UIView

• Установите флажок Включить Руководство по макету безопасной области из инспектора файлов.

• Безопасные области помогут вам разместить ваши взгляды в видимой части общего интерфейса.

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

• safeAreaLayoutGuide отражает часть представления, которая не покрыта панелями навигации, панелями вкладок, панелями инструментов и другими представлениями предков.

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

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

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

• Строка состояния на iPhone X выше, чем на других iPhone. Если ваше приложение предполагает фиксированную высоту строки состояния для позиционирования контента ниже строки состояния, вы должны обновить свое приложение, чтобы динамически позиционировать контент на основе пользовательского устройства. Обратите внимание, что строка состояния на iPhone X не меняет высоту, когда фоновые задачи, такие как запись голоса и отслеживание местоположения, активны при print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

• Высота домашнего индикаторного контейнера составляет 34 балла.

• Как только вы активируете Safe Layout Guide, вы можете увидеть свойство ограничений безопасной области, указанное в конструкторе интерфейса.

Вы можете установить ограничения с соответствующими self.view.safeAreaLayoutGuide as-

ObjC:

  self.demoView.translatesAutoresizingMaskIntoConstraints = NO;
    UILayoutGuide * guide = self.view.safeAreaLayoutGuide;
    [self.demoView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES;
    [self.demoView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES;
    [self.demoView.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES;
    [self.demoView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES;

Swift:

   demoView.translatesAutoresizingMaskIntoConstraints = false
        if #available(iOS 11.0, *) {
            let guide = self.view.safeAreaLayoutGuide
            demoView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            demoView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            demoView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
            demoView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
        } else {
            NSLayoutConstraint(item: demoView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        }

Ответ 4

Apple представила topLayoutGuide и bottomLayoutGuide в качестве свойств UIViewController обратно в iOS 7. Они позволили вам создать ограничения, чтобы ваш контент не скрывался барами UIKit, такими как статус, навигация или панель вкладок. Эти руководства по компоновке устарели в iOS 11 и заменены одним руководством по планированию безопасной области.

Для получения дополнительной информации см. ссылку .

Ответ 5

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

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

На iPhone X Safe Area предоставляет дополнительную вставку с верхнего и нижнего краев экрана в портрете, даже если ни одна полоса не отображается. В ландшафте Безопасная зона вставляется с боковых сторон экранов и домашнего индикатора.

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