Bezpieczny obszar Xcode 9

Podczas eksploracji Xcode9 Beta znaleziono bezpieczny obszar na konstruktorach interfejsów Wyświetl przeglądarkę hierarchii. Zaciekawiło mnie to i spróbowałem dowiedzieć się czegoś o dokumentacji Safe Area on Apple. W skrócie dokument mówi: „Obszar widoku, który bezpośrednio współdziała z układem automatycznym”. Ale to mnie nie zadowoliło, chcę wiedzieć Praktyczne zastosowanie tej nowej rzeczy.

Czy ktoś ma jakąś wskazówkę?

Konkluzja z dokumentu Apple dla obszaru bezpiecznego.

Klasa UILayoutGuide jest przeznaczona do wykonywania wszystkich zadań wykonywanych wcześniej przez fikcyjne widoki, ale w bezpieczniejszy i wydajniejszy sposób. Prowadnice układu nie definiują nowego widoku. Nie uczestniczą w hierarchii widoków. Zamiast tego po prostu definiują prostokątny region w układzie współrzędnych swojego widoku, który może współdziałać z automatycznym układem.

Bezpieczny obszar to przewodnik po układzie (przewodnik po układzie bezpiecznego obszaru ) .
Przewodnik po układzie reprezentujący część widoku, która nie jest zasłonięta przez paski i inną zawartość. W systemie iOS 11+ Apple wycofuje górne i dolne prowadnice układu i zastępuje je przewodnikiem po jednym bezpiecznym obszarze.

Gdy widok jest widoczny na ekranie, ten przewodnik odzwierciedla część widoku, która nie jest objęta innymi treściami. Bezpieczny obszar widoku odzwierciedla obszar pokryty przez paski nawigacji, paski kart, paski narzędzi i inne elementy nadrzędne, które zasłaniają widok kontrolera widoku. (W tvOS, bezpieczny obszar obejmuje ramkę ekranu, zgodnie z definicją overscanCompensationInsetswłaściwości UIScreen.) Obejmuje również każdą dodatkową przestrzeń zdefiniowaną przez właściwość kontrolera widoku additionalSafeAreaInsets. Jeśli widok nie jest aktualnie zainstalowany w hierarchii widoków lub nie jest jeszcze widoczny na ekranie, prowadnica układu zawsze pasuje do krawędzi widoku.

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

Według Apple Xcode 9 - Release note
Interface Builder używa UIView.safeAreaLayoutGuide jako zamiennika dla przestarzałych przewodników układu Top i Bottom w UIViewController. Aby użyć nowego bezpiecznego obszaru, wybierz Bezpieczne prowadnice układu obszaru w Inspektorze plików dla kontrolera widoku, a następnie dodaj ograniczenia między zawartością a nowymi kotwicami bezpiecznego obszaru. Zapobiega to zasłonięciu treści przez górne i dolne paski oraz przez region overscan w systemie tvOS. W przypadku wdrażania we wcześniejszych wersjach systemu iOS ograniczenia w obszarze bezpiecznym są konwertowane na górę i dół.

Oto proste odniesienie jako porównanie (w celu uzyskania podobnego efektu wizualnego) między istniejącym (górnym i dolnym) przewodnikiem po układzie a przewodnikiem po układzie bezpiecznego obszaru.

Układ bezpiecznego obszaru:

Autoukład

Jak pracować z Safe Area Layout?

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

• Włącz „Bezpieczny układ obszaru”, jeśli nie jest włączony.
• Usuń „wszystkie ograniczenia”, jeśli pokazują połączenie z Super View i ponownie dołącz wszystko za pomocą bezpiecznego zakotwiczenia układu. LUB Kliknij dwukrotnie ograniczenie i edytuj połączenie z super widoku do kotwicy SafeArea

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

Oto wynik powyższych zmian

Projektowanie układu za pomocą SafeArea
Projektując dla iPhone'a X, należy upewnić się, że układy wypełniają ekran i nie są zasłaniane przez zaokrąglone rogi urządzenia, obudowę czujnika lub wskaźnik dostępu do ekranu głównego.

Większość aplikacji korzystających ze standardowych elementów interfejsu użytkownika dostarczonych przez system, takich jak paski nawigacyjne, tabele i kolekcje, automatycznie dostosowuje się do nowego kształtu urządzenia. Materiały tła rozciągają się do krawędzi ekranu, a elementy interfejsu użytkownika są odpowiednio wstawione i ustawione.

W przypadku aplikacji z niestandardowymi układami obsługa iPhone'a X powinna być również stosunkowo łatwa, zwłaszcza jeśli aplikacja korzysta z automatycznego układu i jest zgodna z prowadnicami dotyczącymi bezpiecznego obszaru i marginesów.

Oto przykładowy kod (patrz: Przewodnik dotyczący układu bezpiecznego obszaru ) :
Jeśli tworzysz ograniczenia w kodzie, użyj właściwości safeAreaLayoutGuide UIView, aby uzyskać odpowiednie kotwice układu. Odtwórzmy powyższy przykład Interface Builder w kodzie, aby zobaczyć, jak to wygląda:

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

private let greenView = UIView()

Moglibyśmy 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 marginesów, 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, chyba że celujesz tylko w iOS 11, będziesz musiał zawinąć ograniczenia prowadnicy układu bezpiecznego obszaru za pomocą #available i wrócić do górnych i dolnych prowadnic układu 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 UIViewrozszerzeniu ułatw sobie programową pracę z 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 programisty Apple dotycząca przewodnika po układzie bezpiecznego obszaru

Obszar bezpieczny jest wymagany do obsługi projektowania interfejsu użytkownika dla iPhone-X. Oto podstawowe wytyczne dotyczące projektowania interfejsu użytkownika dla telefonu iPhone-X przy użyciu układu bezpiecznego obszaru

Chcę wspomnieć o coś, złapał mnie pierwszy, gdy starałem się dostosować aplikację SpriteKit oparte uniknąć zaokrąglonych krawędziach i „wycięcie” nowego iPhone X, jak sugerują najnowsze wytycznych interfejsu HID : nową właściwość safeAreaLayoutGuideo UIViewpotrzebach do być odpytywane po dodaniu widoku do hierarchii (na przykład on -viewDidAppear:) w celu zgłoszenia sensownej ramki układu (w przeciwnym razie zwraca tylko rozmiar pełnego ekranu).

Z dokumentacji nieruchomości:

Przewodnik po układzie reprezentujący część widoku, która nie jest zasłonięta przez paski i inną zawartość. Gdy widok jest widoczny na ekranie , ten przewodnik odzwierciedla część widoku, która nie jest zakryta przez paski nawigacji, paski kart, paski narzędzi i inne widoki przodków. (W systemie tvOS bezpieczny obszar odzwierciedla obszar nie zakryty ramką ekranu). Jeśli widok nie jest obecnie zainstalowany w hierarchii widoków lub nie jest jeszcze widoczny na ekranie, krawędzie prowadnicy układu są równe krawędziom widoku .

(podkreślenie moje)

Jeśli przeczytasz go już wcześniej -viewDidLoad:, layoutFrameprzewodnik będzie {{0, 0}, {375, 812}}zamiast oczekiwanego{{0, 44}, {375, 734}}

• Wcześniej w iOS 7.0–11.0 < Przestarzałe > UIKitużywa topLayoutGuide i bottomLayoutGuide, która jest UIViewwłaściwością

• iOS11 + używa safeAreaLayoutGuide, który również jest UIViewwłasnością

• Zaznacz pole wyboru Przewodnik po układzie bezpiecznego obszaru w Inspektorze plików.

• Bezpieczne obszary pomagają umieścić widoki w widocznej części całego interfejsu.

• W systemie tvOS obszar bezpieczny zawiera również wstawki przeskanowane ekranu, które reprezentują obszar objęty ramką ekranu.

• safeAreaLayoutGuide odzwierciedla część widoku, która nie jest zakryta przez paski nawigacji, paski kart, paski narzędzi i inne widoki przodków.

• Użyj bezpiecznych obszarów jako pomocy przy rozmieszczaniu treści, takich jak UIButton itp.

• Projektując dla iPhone'a X, musisz upewnić się, że układy wypełniają ekran i nie są zasłaniane przez zaokrąglone rogi urządzenia, obudowę czujnika lub wskaźnik dostępu do ekranu głównego.

• Upewnij się, że tła rozciągają się do krawędzi ekranu, a układy przewijane w pionie, takie jak tabele i zbiory, rozciągają się aż do samego dołu.

• Pasek stanu na iPhonie X jest wyższy niż na innych iPhone'ach. Jeśli aplikacja zakłada stałą wysokość paska stanu do umieszczania zawartości poniżej paska stanu, musisz zaktualizować aplikację, aby dynamicznie pozycjonowała zawartość na podstawie urządzenia użytkownika. Zwróć uwagę, że pasek stanu na iPhonie X nie zmienia wysokości, gdy aktywne są zadania w tle, takie jak nagrywanie głosu i śledzenie lokalizacji print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

• Wysokość pojemnika wskaźnika domu wynosi 34 punkty.

• Po włączeniu Przewodnika układu bezpiecznego obszaru można zobaczyć właściwość ograniczeń obszaru bezpiecznego wymienioną w narzędziu do tworzenia interfejsu.

Można ustawić ograniczenia z odpowiednio z self.view.safeAreaLayoutGuideas-

CelC:

  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;

Szybki:

   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
        }

Firma Apple wprowadziła topLayoutGuide i bottomLayoutGuide jako właściwości UIViewController już w iOS 7. Umożliwiły one tworzenie ograniczeń, aby zawartość nie była ukryta przez paski UIKit, takie jak pasek stanu, nawigacja lub pasek kart. Te prowadnice układu są przestarzałe w systemie iOS 11 i zastąpione przez przewodnik dotyczący układu z jednym bezpiecznym obszarem.

Więcej informacji można znaleźć w odnośniku .

Przewodnik dotyczący układu bezpiecznego obszaru pomaga uniknąć nakładania się elementów interfejsu użytkownika systemu podczas pozycjonowania zawartości i elementów sterujących.

Bezpieczny obszar to obszar pomiędzy elementami interfejsu systemu, którymi są pasek stanu, pasek nawigacji i pasek narzędzi lub pasek kart. Dlatego po dodaniu paska stanu do aplikacji obszar bezpieczny zmniejsza się. Po dodaniu paska nawigacji do aplikacji bezpieczny obszar ponownie się zmniejsza.

Na iPhonie X bezpieczny obszar zapewnia dodatkowe wstawki od górnej i dolnej krawędzi ekranu w orientacji pionowej, nawet jeśli nie jest wyświetlany żaden pasek. W trybie poziomym bezpieczny obszar jest wstawiony z boków ekranów i wskaźnika domu.

Jest to zaczerpnięte z wideo Apple Designing for iPhone X, w którym również wizualizują, jak różne elementy wpływają na obszar bezpieczny.