Możesz ustawić wyświetlanie w aplikacji od krawędzi do krawędzi – wykorzystując całą szerokość i wysokość wyświetlacza – rysując za paskami systemowymi. Paski systemowe to paski stanu i nawigacyjne.
Aby zastosować układ od krawędzi do krawędzi, aplikacja musi:
- Aby stworzyć bardziej atrakcyjne i nowoczesne środowisko użytkownika, zarysuj pasek nawigacyjny.
- Użyj paska stanu, jeśli ma to sens w przypadku Twoich treści i układu, np. w przypadku zdjęć o pełnej szerokości. W tym celu użyj interfejsów API takich jak
AppBarLayout
, które definiują pasek aplikacji przypięty u góry ekranu.
Aby wdrożyć w aplikacji układ od krawędzi do krawędzi, wykonaj te czynności:
- Włącz wyświetlanie od krawędzi do krawędzi.
- Rozwiąż wszelkie problemy z nakładającymi się treściami wizualnymi.
Włącz wyświetlanie od krawędzi do krawędzi.
Możesz włączyć w aplikacji wyświetlanie od krawędzi do krawędzi, wywołując w aplikacji enableEdgeToEdge
w onCreate
na urządzeniu Activity
. Powinna ona zostać wywołana przed setContentView
.
Kotlin
override fun onCreate(savedInstanceState: Bundle?) { enableEdgeToEdge() super.onCreate(savedInstanceState) ... }
Java
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { EdgeToEdge.enable(this); super.onCreate(savedInstanceState); ... }
Domyślnie enableEdgeToEdge
paski systemowe są przezroczyste z wyjątkiem trybu nawigacji przy użyciu 3 przycisków, w którym pasek stanu jest przezroczysty. Kolory ikon systemowych i ramki są dostosowywane w zależności od jasnego lub ciemnego motywu systemu.
Metoda enableEdgeToEdge
automatycznie deklaruje, że aplikacja powinna być układana od krawędzi do krawędzi i dostosowuje kolory pasków systemowych. Jeśli jest to konieczne z jakiegokolwiek powodu, zapoznaj się z sekcją „Ręczne konfigurowanie wyświetlacza od krawędzi do krawędzi”.
Obsługa nakładających się elementów za pomocą wstawki
Po włączeniu wyświetlania od krawędzi do krawędzi niektóre widoki aplikacji mogą być zasłonięte paskami systemowymi, jak widać na ilustracji 3.
Możesz rozwiązać problemy z nakładającymi się elementami, reagując na wstawki określające, które części ekranu przecinają się z interfejsem systemu, np. z paskiem nawigacyjnym lub paskiem stanu. Przekrój może oznaczać wyświetlanie nad treścią, ale może też informować aplikację o gestach systemowych.
Typy dokształceń mające zastosowanie do wyświetlania aplikacji od krawędzi do krawędzi to:
Wcięcie pasków systemowych: najlepiej sprawdza się w przypadku widoków, które można kliknąć i które nie mogą być zasłonięte paskami systemowymi.
Wbudowane gesty systemowe: używane przez system używane przez system obszary nawigacji przy użyciu gestów, które mają wyższy priorytet niż Twoja aplikacja.
Wstawki z pasków systemowych
Najczęściej używanym typem wstawiania do paska systemu są elementy wstawiane. Reprezentują one obszar, w którym interfejs systemu wyświetla się na osi Z nad aplikacją. Najlepiej sprawdza się w przesuwaniu lub dopełnianiu widoków w aplikacji, które można klikać i które nie mogą być zasłonięte paskami systemowymi.
Na przykład pływający przycisk polecenia na ilustracji 3 jest częściowo zasłonięty paskiem nawigacyjnym:
Aby uniknąć tego rodzaju wizualnego nakładania się w trybie gestów lub przycisków, możesz zwiększyć marginesy widoku, używając parametrów getInsets(int)
i WindowInsetsCompat.Type.systemBars()
.
Poniższy przykładowy kod ilustruje, jak wdrożyć elementy paska z paskami systemowymi:
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()) // Apply the insets as a margin to the view. This solution sets // only the bottom, left, and right dimensions, but you can apply whichever // insets are appropriate to your layout. You can also update the view padding // if that's more appropriate. v.updateLayoutParams<MarginLayoutParams>( leftMargin = insets.left, bottomMargin = insets.bottom, rightMargin = insets.right, ) // Return CONSUMED if you don't want want the window insets to keep passing // down to descendant views. WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> { Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()); // Apply the insets as a margin to the view. This solution sets only the // bottom, left, and right dimensions, but you can apply whichever insets are // appropriate to your layout. You can also update the view padding if that's // more appropriate. MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams(); mlp.leftMargin = insets.left; mlp.bottomMargin = insets.bottom; mlp.rightMargin = insets.right; v.setLayoutParams(mlp); // Return CONSUMED if you don't want want the window insets to keep passing // down to descendant views. return WindowInsetsCompat.CONSUMED; });
Jeśli zastosujesz to rozwiązanie w przykładzie 3, w trybie przycisku nie powstaną żadne elementy wizualne, jak widać na ilustracji 4:
To samo dotyczy trybu nawigacji przy użyciu gestów, co pokazano na rysunku 5:
Wstawione gesty systemowe
Wstawione gesty systemowe to obszary okna, w których gesty systemowe mają pierwszeństwo przed aplikacją. Te obszary są zaznaczone na pomarańczowo na ilustracji 6:
Podobnie jak w przypadku ustawień paska systemowego, możesz uniknąć nakładania się wstawienia gestów systemowych, używając parametrów getInsets(int)
i WindowInsetsCompat.Type.systemGestures()
.
Te wstawki służą do odsuwania widoków przesuwanych lub dosuwania ich poza krawędzie. Typowym przypadkiem użycia są dolne arkusze, przesuwanie palcem w grach i karuzele zaimplementowane za pomocą ViewPager2
.
Na Androidzie 10 i nowszych ustawienia gestów systemowych zawierają dolne ustawienie dla gestu w domu oraz lewą i prawą stronę dla gestów cofania:
Poniższy przykładowy kod pokazuje, jak wdrożyć wstawianie gestów systemowych:
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures()) // Apply the insets as padding to the view. Here, set all the dimensions // as appropriate to your layout. You can also update the view's margin if // more appropriate. view.updatePadding(insets.left, insets.top, insets.right, insets.bottom) // Return CONSUMED if you don't want the window insets to keep passing down // to descendant views. WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> { Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures()); // Apply the insets as padding to the view. Here, set all the dimensions // as appropriate to your layout. You can also update the view's margin if // more appropriate. view.setPadding(insets.left, insets.top, insets.right, insets.bottom); // Return CONSUMED if you don't want the window insets to keep passing down // to descendant views. return WindowInsetsCompat.CONSUMED; });
Tryb pojemny
Niektóre treści najlepiej oglądać na pełnym ekranie, ponieważ zapewnia to im lepsze wrażenia. Paski systemowe możesz ukryć w trybie pojemnym, używając bibliotek WindowInsetsController
i WindowInsetsControllerCompat
:
Kotlin
val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView) // Hide the system bars. windowInsetsController.hide(Type.systemBars()) // Show the system bars. windowInsetsController.show(Type.systemBars())
Java
Window window = getWindow(); WindowInsetsControllerCompat windowInsetsController = WindowCompat.getInsetsController(window, window.getDecorView()); if (windowInsetsController == null) { return; } // Hide the system bars. windowInsetsController.hide(WindowInsetsCompat.Type.systemBars()); // Show the system bars. windowInsetsController.show(WindowInsetsCompat.Type.systemBars());
Więcej informacji o implementowaniu tej funkcji znajdziesz w artykule Ukrywanie pasków systemowych w trybie pojemnym.
Dodatkowe materiały
Poniżej znajdziesz więcej informacji o WindowInsets
, nawigacji przy użyciu gestów i sposobie działania wstawiania:
- WindowInsets – detektory układów
- Nawigacja przy użyciu gestów: wstawki
- Jak działają wstawki w Androidzie?