Wyświetlacz od krawędzi do krawędzi umożliwia aplikacji rysowanie interfejsu za paskami systemu – paskiem stanu, paskiem podpisów i paskiem nawigacyjnym – aby zapewnić użytkownikom lepsze wrażenia. Jeśli kierujesz aplikację na urządzenia z Androidem 15 (API na poziomie 35) lub nowszym, wyświetlanie bez ramki jest domyślnie wymuszane.
Aby prawidłowo wyświetlać treści od krawędzi do krawędzi na wszystkich wersjach Androida, wykonaj te czynności konfiguracyjne. Bez tych kroków aplikacja może rysować jednolite kolory za paskami systemu lub nie animować treści synchronicznie z przejściami klawiatury ekranowej (IME).
1. Włącz wyświetlanie bez ramki
Aby włączyć wyświetlanie od krawędzi do krawędzi we wcześniejszych wersjach Androida, wywołaj enableEdgeToEdge() w metodzie Activity.onCreate():
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
...
}
Domyślnie enableEdgeToEdge() sprawia, że paski systemowe są przezroczyste, z wyjątkiem trybu nawigacji przy użyciu 3 przycisków, w którym stosuje półprzezroczystą powłokę na pasku nawigacyjnym, aby uzyskać lepszy kontrast. Kolor ikon systemowych i półprzezroczystej nakładki dostosowuje się do jasnego lub ciemnego motywu systemu.
2. Konfigurowanie windowSoftInputMode
Ustaw android:windowSoftInputMode="adjustResize" w pozycji AktywnośćAndroidManifest.xml. To ustawienie umożliwia aplikacji otrzymywanie wstawek IME, dzięki czemu możesz dostosowywać układ za pomocą dopełnienia, gdy klawiatura ekranowa pojawia się lub znika.
<!-- In your AndroidManifest.xml file: -->
<activity
android:name=".ui.MainActivity"
android:label="@string/app_name"
android:windowSoftInputMode="adjustResize"
android:theme="@style/Theme.MyApplication"
android:exported="true">
...
</activity>
3. Obsługa nakładających się elementów za pomocą wcięć
Po włączeniu wyświetlania od krawędzi do krawędzi niektóre treści i elementy interfejsu aplikacji mogą być wyświetlane za paskami systemu. Aby zapobiec zasłanianiu ważnych lub interaktywnych elementów przez paski systemowe lub nakładaniu się na gesty systemowe, musisz obsługiwać wcięcia.
Odcięcia opisują części ekranu, które przecinają się z interfejsem systemu lub gestami systemowymi. Główne typy wcięć, które należy wziąć pod uwagę w przypadku wyświetlaczy od krawędzi do krawędzi:
- Odcięcia pasków systemu:reprezentują obszary, w których wyświetlają się paski systemu. Używaj tych ustawień, aby uniknąć zasłaniania interfejsu przez paski systemu.
- Wstawki wycięcia w ekranie: reprezentują obszary, w których na ekranie urządzenia znajduje się fizyczne wycięcie (np. wycięcie na aparat).
W Compose możesz obsługiwać wcięcia za pomocą linijek, modyfikatorów dopełnienia lub modyfikatorów rozmiaru wcięcia. Szczegółowe informacje znajdziesz w artykule Informacje o wcięciach w oknie.
Tematy zaawansowane
W przypadku bardziej zaawansowanych zastosowań od krawędzi do krawędzi weź pod uwagę te kwestie.
Tryb pojemny
Niektóre treści, takie jak filmy czy mapy, lepiej prezentują się w trybie pełnoekranowym, w którym paski systemu są ukryte. Paski systemu możesz ukryć za pomocą tych metod:WindowInsetsControllerCompat
val windowInsetsController =
WindowCompat.getInsetsController(window, window.decorView)
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())
// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars()) For example, use either `Scaffold`,
Kolory i ikony paska systemowego
Gdy aplikacja zajmuje cały ekran, jej tło może być widoczne za paskami systemu, więc może być konieczne dostosowanie kolorów ikon pasków systemu, aby uzyskać lepszy kontrast.
Aby zmienić kolor ikon na pasku stanu na jasny lub ciemny, użyj WindowInsetsControllerCompat:
// Set status bar icons to dark
WindowCompat.getInsetsController(window, window.decorView)
.isAppearanceLightStatusBars = true
// Set status bar icons to light
WindowCompat.getInsetsController(window, window.decorView)
.isAppearanceLightStatusBars = false
Ochrona paska systemu
enableEdgeToEdge() zapewnia domyślne przezroczyste lub półprzezroczyste paski systemowe, ale może być konieczne dostosowanie ich. Zapoznaj się z wskazówkami dotyczącymi projektowania pasków systemowych na Androidzie i wskazówkami dotyczącymi projektowania aplikacji bez ramki, aby zdecydować, kiedy używać pasków przezroczystych, a kiedy półprzezroczystych.
Aby pasek nawigacyjny z 3 przyciskami był całkowicie przezroczysty zamiast półprzezroczystego, możesz wyłączyć wymuszanie kontrastu:
window.isNavigationBarContrastEnforced = false
Więcej informacji znajdziesz w artykule Ochrona paska systemu.
Okna
Aby wyświetlać okna pełnoekranowe od krawędzi do krawędzi, wywołaj WindowCompat.enableEdgeToEdge w metodzie onStart() okna:
class MyAlertDialogFragment : DialogFragment() {
override fun onStart(){
super.onStart()
dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
}
...
}