Wycinki w oknie tworzenia

Wycięcie w ekranie to obszar na niektórych urządzeniach, który wkracza w powierzchnię ekranu. Zapewnia to ekran od krawędzi do krawędzi, a jednocześnie pozostawia miejsce na ważne czujniki z przodu urządzenia.

Rysunek 1. Przykład wycięcia w trybie portretowym

Ilustracja 2. Przykład wycięcia w trybie poziomym

Android obsługuje wycięcia w ekranie na urządzeniach z Androidem 9 (poziom interfejsu API 28) i nowszym. Producenci urządzeń mogą jednak obsługiwać wycięcia na wyświetlaczu na urządzeniach z Androidem 8.1 lub starszym.

Na tej stronie opisano, jak w Compose zaimplementować obsługę urządzeń z wycięciami w ekranie, w tym jak pracować z obszarem wycięcia, czyli prostokątem na powierzchni ekranu od krawędzi do krawędzi, który zawiera wycięcie.

Domyślna wielkość liter

Domyślnie wycięcia na wyświetlacze są uwzględniane w informacjach o wstawkach okna. Dlatego jeśli zastosujesz się do wskazówek dotyczących tworzenia aplikacji sięgającej od krawędzi do krawędzi, aplikacja nie będzie wyświetlać elementów w obszarach wycięcia.

Jeśli na przykład użyjesz funkcji Modifier.windowInsetsPadding(WindowInsets.safeContent) lub Modifier.windowInsetsPadding(WindowInsets.safeDrawing), aplikacja nie będzie automatycznie rysować w obszarach, w których znajduje się wycięcie. Obie te wartości (WindowInsets.safeContent i WindowInsets.safeDrawing) zawierają informacje o wycięciu w ekranie i nie będą wyświetlane w miejscu wycięcia na urządzeniu.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) {
            // Any composable inside here will avoid drawing behind cutouts
        }
    }
}
CutoutSnippets.kt

Aby jeszcze bardziej dostosować to działanie, musisz samodzielnie przetworzyć dane wycięcia.

Ręczne zarządzanie informacjami o wycięciu

Możesz obsługiwać wycięcia na jeden z tych sposobów:

• Korzystanie z WindowInsets.displayCutout

• Ustawienie w pliku manifestu motywu za pomocą android:windowLayoutInDisplayCutoutMode

• Programowe ustawienie opcji w Window za pomocą window.attributes.layoutInDisplayCutoutMode

• Uzyskiwanie dostępu do obiektu wycięcia Path za pomocą narzędzia LocalView.current.rootWindowInsets.displayCutout

W przypadku Compose zalecamy ustawienie wartości windowLayoutInDisplayCutoutMode na default w ogólnym temacie, a następnie użycie wartości WindowInsets.displayCutout do obsługi wstawek w kompozycjach:

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}
CutoutSnippets.kt

Dzięki temu możesz zachować wypełnienie displayCutout tam, gdzie jest to wymagane, lub zignorować je tam, gdzie nie jest wymagane.

Możesz też zastosować te same ustawienia, które są opisane w dokumentacji wycięć widoków, ustawiając inną opcję motywu aktywności android:windowLayoutInDisplayCutoutMode lub ustawiając atrybut okna za pomocą window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT. Jednak tryb wycinania jest wtedy stosowany do całej aktywności i nie można go kontrolować w poszczególnych komponentach.

Aby uwzględnić wycięcie w ekranie w niektórych składanych elementach, a w innych nie, użyj WindowInset.displayCutout. Ten interfejs API umożliwia dostęp do informacji o wycinkach w razie potrzeby.

Sprawdzone metody

Podczas pracy z wycinkami wyświetlacza należy wziąć pod uwagę te kwestie:

• Zwróć uwagę na rozmieszczenie kluczowych elementów interfejsu. Nie pozwól, aby obszar wycięcia zasłaniał ważny tekst, elementy sterujące ani inne informacje.
• Nie umieszczaj ani nie rozszerzaj elementów interaktywnych, które wymagają precyzyjnego wykrywania dotyku, w obszarze wycięcia. Czułość ekranu może być niższa w obszarze wycięcia.
• Jeśli postępujesz zgodnie ze wskazówkami dotyczącymi wyświetlania od krawędzi do krawędzi, informacje o wycięciu są uwzględniane w ramkach safeDrawing / safeContent.
• W miarę możliwości użyj elementu Modifier.windowInsetsPadding(WindowInsets.safeDrawing), aby określić odpowiedni margines dla treści. Unikaj stałego kodowania wysokości paska stanu, ponieważ może to spowodować nakładanie się lub przycinanie treści.

Testowanie renderowania treści z wycięciami

Przetestuj wszystkie ekrany i funkcje aplikacji. Jeśli to możliwe, przetestuj aplikację na urządzeniach z różnymi typami wycięć. Jeśli nie masz urządzenia z wycięciem, możesz symulować typowe konfiguracje wycięcia na dowolnym urządzeniu lub w emulatorze z Androidem 9 lub nowszym. Aby to zrobić:

1. Włącz Opcje programisty.
2. Na ekranie Opcje programisty przewiń w dół do sekcji Rysowanie i wybierz Symuluj wyświetlacz z wcięciem.
3. Wybierz typ wycięcia.

   

   Rysunek 3. Aby sprawdzić, jak renderowane są Twoje treści, użyj opcji dla deweloperów.