Wycięcie w ekranie to na niektórych urządzeniach obszar, który rozciąga się na powierzchnię wyświetlacza. Zapewnia on zaawansowane wrażenia od krawędzi do krawędzi, a jednocześnie zapewnia miejsce na ważne czujniki z przodu urządzenia.
Android obsługuje wycięcia w ekranie na urządzeniach z Androidem 9 (poziom interfejsu API 28) lub nowszym. Producenci urządzeń mogą jednak również obsługiwać wycięcia w ekranie na urządzeniach z Androidem 8.1 lub starszym.
Ten dokument opisuje, jak wdrożyć obsługę urządzeń z wycięciem, w tym jak pracować z obszarem wycięcia, czyli prostokątem od krawędzi do krawędzi na powierzchni wyświetlacza, która zawiera wycięcie.
Wybierz, jak aplikacja obsługuje obszary z wycięciem
Jeśli nie chcesz, aby treść nakładała się na obszar wycięcia, nie musisz zasłaniać treści paskami stanu i paskami nawigacyjnym. Jeśli renderujesz w obszarze wycięcia, użyj WindowInsetsCompat.getDisplayCutout()
, aby pobrać obiekt DisplayCutout
, który zawiera bezpieczne wcięcia i ramkę ograniczającą dla każdego wycięcia. Te interfejsy API pozwalają sprawdzić, czy treści nie nakładają się na wycięcie, i w razie potrzeby zmienić ich położenie.
Możesz też ustalić, czy treść ma się znajdować za obszarem wycięcia. Atrybut układu okna layoutInDisplayCutoutMode
określa sposób rysowania treści w obszarze wycięcia.
Możesz ustawić layoutInDisplayCutoutMode
na jedną z tych wartości:
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
: treść jest renderowana w obszarze wycięcia w trybie pionowym, ale w trybie poziomym są wyświetlane z czarnymi pasami.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
: treść renderuje się w obszarze wycięcia zarówno w orientacji pionowej, jak i poziomej.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
: treść nigdy nie jest renderowana w obszarze wycięcia.
Tryb wycinania możesz ustawić automatycznie lub przez określenie stylu w aktywności. W tym przykładzie zdefiniowano styl stosujący do aktywności atrybut LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
.
<style name="ActivityTheme"> <item name="android:windowLayoutInDisplayCutoutMode"> shortEdges <!-- default, shortEdges, or never --> </item> </style>
W poniższych sekcjach opisano bardziej szczegółowo różne tryby wycinania.
Domyślne zachowanie
Domyślnie w trybie pionowym bez ustawionych specjalnych flag rozmiar paska stanu na urządzeniu z wycięciem jest zmieniany na co najmniej wysokości wycięcia, a treść jest widoczna poniżej. W trybie poziomym lub pełnoekranowym okno aplikacji jest oparte na czarnych pasach, dzięki czemu żadna treść nie wyświetla się w obszarze wycięcia.
Renderuj treść w obszarach z krótszymi wycięciami
W przypadku niektórych treści, np. filmów, zdjęć, map i gier, renderowanie w obszarze wycięcia może być świetnym sposobem na zapewnienie użytkownikom bardziej atrakcyjnych wrażeń. W przypadku LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
zawartość obejmuje obszar wycięcia przy krótszej krawędzi wyświetlacza, zarówno w orientacji pionowej, jak i poziomej, niezależnie od tego, czy paski systemowe są ukryte czy widoczne. Podczas korzystania z tego trybu upewnij się, że żadne ważne treści nie zasłaniają obszaru wycięcia.
Ten obraz przedstawia przykład LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
w przypadku urządzenia w orientacji pionowej:
Ten obraz przedstawia przykład LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
w przypadku urządzenia w orientacji poziomej:
W tym trybie okno wychodzi poza wycięcie przy krótszej krawędzi wyświetlacza, zarówno w orientacji pionowej, jak i poziomej, niezależnie od tego, czy okno zakrywa paski systemowe.
Wycięcie w rogu uznajemy za wycięcie na krótszej krawędzi:
Nigdy nie renderuj treści w obszarze wycięcia w ekranie
W przypadku LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
okno nigdy nie może nakładać się na obszar wycięcia.
Oto przykład użycia funkcji LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
w orientacji pionowej:
Oto przykład elementu LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
w trybie poziomym:
Sprawdzone metody obsługi wycięcia w ekranie
Podczas pracy z wycięciami w ekranie weź pod uwagę te kwestie:
- Pamiętaj o rozmieszczeniu kluczowych elementów interfejsu. Nie pozwól, by wycięcie w tekście zasłaniało tekst, elementy sterujące lub inne informacje.
- W obszarze wycięcia nie umieszczaj ani nie rozszerzaj żadnych elementów interaktywnych, które wymagają dokładnego rozpoznania. Czułość w zakresie dotyku może być niższa w obszarze wycięcia.
W miarę możliwości używaj parametru
WindowInsetsCompat
, aby pobrać wysokość paska stanu i określić odpowiednie dopełnienie, które chcesz zastosować do treści. Unikaj kodowania na stałe wysokości paska stanu, ponieważ może to spowodować nakładanie się lub ucinanie treści.Użyj
View.getLocationInWindow()
, aby określić, ile miejsca w oknie używa aplikacja. Nie zakładaj, że aplikacja używa całego okna i nie używaj funkcjiView.getLocationOnScreen()
.Jeśli aplikacja musi przechodzić w tryb pojemny lub z niego wyjść, użyj trybu wycinania
shortEdges
lubnever
. Domyślne zachowanie w przypadku wycięcia może powodować, że treści w aplikacji będą renderowane w obszarze wycięcia, gdy widoczne są paski systemowe, ale nie w trybie pojemnym. Powoduje to przemieszczanie się treści w górę i w dół podczas przenoszenia, jak widać w poniższym przykładzie.W trybie pojemnym zachowaj ostrożność, używając współrzędnych okna, a nie ekranu, ponieważ aplikacja nie zajmuje całego ekranu. Ze względu na skrzynkę współrzędnych współrzędne z początku ekranu różnią się od współrzędnych z początku okna. Korzystając z funkcji
getLocationOnScreen()
, możesz przekształcić współrzędne ekranu na współrzędne widoku. Poniższy obraz pokazuje, jak różnią się współrzędne, gdy zawartość ma czarne pasy:Podczas obsługi obiektów
MotionEvent
używajMotionEvent.getX()
iMotionEvent.getY()
, aby uniknąć podobnych problemów ze współrzędnymi. Nie używaj właściwościMotionEvent.getRawX()
aniMotionEvent.getRawY()
.
Testowanie renderowania treści
Przetestuj wszystkie ekrany i sposoby działania aplikacji. Jeśli to możliwe, przetestuj ją na urządzeniach z różnymi wycięciami. Jeśli nie masz urządzenia z wycięciem, możesz przeprowadzić symulację typowych konfiguracji wycięcia na dowolnym urządzeniu lub w emulatorze z Androidem 9 lub nowszym. Aby to zrobić, wykonaj te czynności:
- Włącz Opcje programisty.
- Na ekranie Opcje programisty przewiń w dół do sekcji Rysunek i wybierz Symuluj wyświetlacz z wycięciem.
Wybierz typ wycięcia.