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


во время изучения Xcode9 Beta нашел Безопасная Площадью на построителях интерфейса просмотр иерархии просмотра. Стало любопытно и попытался узнать о безопасной области на яблоках документации, в сущности док говорит "область просмотра, которая непосредственно взаимодействует с автоматической компоновкой" но это не удовлетворило меня, я хочу знать практическое использование этой новой вещи.

есть ли у кого-нибудь ключ к разгадке?

вывод абзац из Apple doc для безопасной зоны.

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

5 108

5 ответов:

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

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

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

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

enter image description here


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

Безопасный Район Макет: enter image description here

AutoLayout

enter image description here


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

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

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

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

enter image description here

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

enter image description here


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

enter image description here

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

enter image description here

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

enter image description here


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


результат:

enter image description here


после 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 с помощью макета безопасной зоны

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

из документации объекта:

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

(выделено мной)

если Вы читаете это уже -viewDidLoad: на layoutFrame будет {{0, 0}, {375, 812}} вместо ожидаемого {{0, 44}, {375, 734}}

enter image description here

  • ранее в iOS 7.0–11.0 устаревший>UIKit использует topLayoutGuide & bottomLayoutGuide что это UIView свойства
  • iOS11+ использует safeAreaLayoutGuide, который также UIView свойства

  • включить Руководство По Компоновке Безопасной Зоны флажок из инспектора файлов.

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

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

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

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

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

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

  • высота контейнера домашнего индикатора 34 пункта.

  • после того, как вы включить Руководство По Компоновке Безопасной Зоны вы можете увидеть свойство ограничения безопасной области, указанное в построителе интерфейса.

enter image description here

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

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
        }

enter image description here

enter image description here

enter image description here

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

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

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

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

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

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