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.
Odpowiedzi:
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ą
overscanCompensationInsets
właściwości UIScreen.) Obejmuje również każdą dodatkową przestrzeń zdefiniowaną przez właściwość kontrolera widokuadditionalSafeAreaInsets
. 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.
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:
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:
Moglibyśmy mieć funkcję do ustawiania widoków i ograniczeń wywoływanych z viewDidLoad:
Utwórz wiodące i końcowe ograniczenia marginesów, jak zawsze, używając layoutMarginsGuide widoku głównego:
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:
Wynik:
Po
UIView
rozszerzeniu ułatw sobie programową pracę z SafeAreaLayout.Oto przykładowy kod w Objective-C :
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
źródło
margins
iview.leadingAnchor
: kiedy używaszlet margins = view.layoutMarginsGuide
i później używaszmargins.leadingAnchor
, ograniczasz widok do marginesów widoku. Doda to trochę dodatkowej przestrzeni po bokach. Jeśli tego nie chcesz, po prostu użyjview.leadingAnchor
i,view.trailingAnchor
a nie zobaczysz żadnej białej przestrzeni po lewej lub prawej stronie ...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ść
safeAreaLayoutGuide
oUIView
potrzebach 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:
(podkreślenie moje)
Jeśli przeczytasz go już wcześniej
-viewDidLoad:
,layoutFrame
przewodnik będzie{{0, 0}, {375, 812}}
zamiast oczekiwanego{{0, 44}, {375, 734}}
źródło
UIKit
używa topLayoutGuide i bottomLayoutGuide, która jestUIView
właściwościąiOS11 + używa safeAreaLayoutGuide, który również jest
UIView
wł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.
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.safeAreaLayoutGuide
as-CelC:
Szybki:
źródło
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 .
źródło
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.
źródło