Bezpieczny obszar Xcode 9

Safe Area is a layout guide (Safe Area Layout Guide).
Przewodnik po Układzie reprezentujący część widoku, która nie jest niewidoczna przez paski i inną zawartość. W systemie iOS 11+ firma Apple wycofuje górne i dolne linie pomocnicze układu i zastępuje je pojedynczym przewodnikiem po Układzie obszaru bezpiecznego.

Gdy widok jest widoczny na ekranie, ten przewodnik odzwierciedla część widoku, która nie jest objęta inną zawartością. Bezpieczny obszar widzenia odzwierciedla obszar objęty paskami nawigacji, paskami kart, paskami narzędzi i innymi przodkami, które zaciemniają widok kontrolera widoku. (W tvOS obszar bezpieczny zawiera ramkę ekranu, zdefiniowaną przez właściwość overscanCompensationInsets UIScreen.) Obejmuje również dowolną dodatkową przestrzeń zdefiniowaną przez właściwość additionalSafeAreaInsets kontrolera widoku. Jeśli widok nie jest aktualnie zainstalowany w hierarchii widoku lub nie jest jeszcze widoczny na ekranie, Przewodnik po Układzie zawsze odpowiada krawędziom widoku.

Dla głównego widoku kontrolera widoku, obszar bezpieczny w tej właściwości reprezentuje całą zasłoniętą część zawartości kontrolera widoku oraz wszelkie dodatkowe określone wstawki. W przypadku innych widoków w hierarchii widoków obszar bezpieczny odzwierciedla tylko zasłoniętą część tego widoku. Na przykład, jeśli Widok znajduje się całkowicie w bezpiecznym obszarze głównego widoku kontrolera widoku, wstawki krawędzi w tej właściwości wynoszą 0.

Według Apple, Xcode 9-Release note
interfejs Builder używa UIView.safeAreaLayoutGuide jako zamiennik przestarzałych górnych i dolnych prowadnic układu w UIViewController. Aby użyć nowego obszaru bezpiecznego, wybierz linie pomocnicze układu obszaru bezpiecznego w Inspektorze plików kontrolera widoku, a następnie dodaj ograniczenia między zawartością a nowymi zakotwiczeniami obszaru bezpiecznego. Zapobiega to zasłanianiu zawartości przez górne i dolne paski oraz przez obszar overscan w tvOS. Ograniczenia do bezpiecznego obszaru są konwertowane na górę i dół podczas wdrażania do wcześniejsze wersje iOS.

Oto proste odniesienie jako porównanie (aby uzyskać podobny efekt wizualny) pomiędzy istniejącym (górnym i dolnym) przewodnikiem po Układzie i przewodnikiem po bezpiecznym obszarze.

Układ Obszaru Bezpiecznego:

AutoLayout

Jak pracować z układem obszaru bezpiecznego?

Wykonaj następujące kroki, aby znaleźć rozwiązanie:

• Włącz "Bezpieczny układ obszaru", jeśli nie włączone.
• Usuń "wszystkie ograniczenia", jeśli pokazują połączenie z super view i ponownie dołącz wszystkie za pomocą bezpiecznej kotwicy układu. Można też dwukrotnie kliknąć ograniczenie i edytować połączenie z super view do kotwicy SafeArea

Oto przykładowa migawka, jak włączyć Bezpieczny układ obszaru i ograniczenie edycji.

Oto wynik powyższych zmian

Projektowanie układu z SafeArea
podczas projektowania dla iPhone X, musisz upewnić się, że układy wypełniają ekran i nie są zasłonięte przez Zaokrąglone rogi urządzenia, obudowę czujnika lub wskaźnik dostępu do ekranu głównego.

Większość aplikacji, które używają standardowych, systemowych elementów interfejsu użytkownika, takich jak paski nawigacyjne, tabele i kolekcje, automatycznie dostosowuje się do nowego formatu urządzenia. Materiały tła rozciągają się na krawędzie wyświetlacza, a elementy interfejsu są odpowiednio wstawione i pozycji.

W przypadku aplikacji z niestandardowymi układami Obsługa iPhone ' a X powinna być stosunkowo łatwa, zwłaszcza jeśli aplikacja używa układu automatycznego i przylega do przewodników bezpiecznego obszaru i układu marginesów.

Oto przykładowy kod (Ref z: Safe Area Layout Guide ) :
Jeśli tworzysz swoje ograniczenia w kodzie, użyj właściwości Safearealayoutguide UIView, aby uzyskać odpowiednie kotwice układu. Odtworzmy powyższy interfejs Przykład konstruktora w kodzie, aby zobaczyć, jak wygląda:

Zakładając, że mamy Zielony widok jako właściwość w naszym kontrolerze widoku:

private let greenView = UIView()

Możemy mieć funkcję do ustawiania widoków i ograniczeń wywoływanych z viewDidLoad:

private func setupView() {
  greenView.translatesAutoresizingMaskIntoConstraints = false
  greenView.backgroundColor = .green
  view.addSubview(greenView)
}

Utwórz wiodące i końcowe ograniczenia marginesu, jak zawsze, używając layoutMarginsGuide widoku głównego:

 let margins = view.layoutMarginsGuide
    NSLayoutConstraint.activate([
      greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
      greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
 ])

Teraz, jeśli nie celujesz tylko w iOS 11, będziesz musiał zawinąć ograniczenia przewodnika po safe area za pomocą # available i wróć do górnych i dolnych przewodników po układach dla wcześniejszych wersji 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)
   ])
}

wynik:

Po rozszerzeniu UIView ułatw sobie pracę z programem 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
    }
  }

}

Oto przykładowy kod w Objective-C :

• jak programowo dodać bezpieczny obszar

Oto oficjalna dokumentacja Apple Developer dla Safe Area Layout Przewodnik

Safe Area jest wymagane do obsługi projektowania interfejsu użytkownika dla iPhone-X. oto podstawowe wytyczne dla jak zaprojektować interfejs użytkownika dla iPhone-X przy użyciu układu Safe Area