Wycinki w oknie tworzenia

Wycięcie w ekranie to na niektórych urządzeniach obszar, który rozciąga się w stronę powierzchni wyświetlacza. Umożliwia wydajność od krawędzi do krawędzi, a jednocześnie zapewnia miejsce na ważne czujniki z przodu urządzenia.

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

Rysunek 2. Przykład wycięcia w orientacji poziomej

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.

Na tej stronie opisujemy, jak wdrożyć obsługę urządzeń z wycięciem w sekcji Utwórz, w tym jak korzystać z obszaru wycięcia, czyli prostokąta od krawędzi do krawędzi na powierzchni wyświetlacza, która zawiera wycięcie.

Przypadek domyślny

Domyślnie wycięcia w ekranie są uwzględniane w informacjach o wcięciach w oknach. Dlatego aplikacja nie będzie rysować w obszarach z wycięciem w ekranie, gdy będziesz postępować zgodnie z instrukcjami tworzenia aplikacji od krawędzi do krawędzi.

Gdy na przykład użyjesz Modifier.windowInsetsPadding(WindowInsets.safeContent) lub Modifier.windowInsetsPadding(WindowInsets.safeDrawing), aplikacja nie będzie automatycznie rysować w obszarach z wycięciem. Zarówno WindowInsets.safeContent, jak i WindowInsets.safeDrawing zawierają informacje o wycięciu w ekranie i nie będą przedstawiać miejsca, w którym znajduje się wycięcie dla urządzenia.

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ć ten sposób działania, musisz samodzielnie zmodyfikować informacje o wycięciu.

Ręczne obsługę informacji o wycięciu

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

• Przy użyciu WindowInsets.displayCutout

• Ustawienie w pliku manifestu motywu w usłudze android:windowLayoutInDisplayCutoutMode

• Automatyczne ustawianie opcji elementu Window za pomocą funkcji window.attributes.layoutInDisplayCutoutMode

• Uzyskiwanie dostępu do obiektu z wycięciem Path za pomocą LocalView.current.rootWindowInsets.displayCutout

W przypadku tworzenia wiadomości najlepiej ustawić windowLayoutInDisplayCutoutMode na default w ogólnym motywie, a następnie używać WindowInsets.displayCutout do obsługi wstawionych elementów kompozycyjnych:

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

Ta metoda umożliwia uwzględnienie dopełnienia displayCutout tam, gdzie jest to wymagane, lub zignorowanie go, gdy nie jest wymagane.

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

Aby zastosować wycięcie w ekranie w niektórych funkcjach kompozycyjnych, ale nie w innych, użyj funkcji WindowInset.displayCutout. W razie potrzeby ten interfejs API umożliwia dostęp do informacji o wycięciu.

Sprawdzone metody

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.
• Gdy postępujesz zgodnie ze wskazówkami od krawędzi do krawędzi, informacje o wycięciu są podawane w przypadku safeDrawing / safeContent.
• W miarę możliwości używaj zasady Modifier.windowInsetsPadding(WindowInsets.safeDrawing), aby określić odpowiednie dopełnienie, które zostanie zastosowane do Twojej treści. Unikaj kodowania wysokości paska stanu na stałe, bo może to spowodować nakładanie się lub ucinanie treści.

Przetestuj sposób renderowania treści za pomocą wycinków

Pamiętaj, aby przetestować wszystkie ekrany i sposób 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:

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

   

   Rysunek 3. Aby przetestować sposób renderowania treści, użyj Opcji programisty.