Możesz ustawić wyświetlanie aplikacji od krawędzi do krawędzi (na całą szerokość i wysokość wyświetlacza) poprzez rysowanie za paskami systemowymi. Są to paski stanu i nawigacji.
Aby wdrożyć układ od krawędzi do krawędzi, aplikacja musi:
- Umieść elementy za paskiem nawigacyjnym, aby stworzyć bardziej atrakcyjne i nowoczesne środowisko.
- Narysuj element za paskiem stanu, jeśli ma to sens w przypadku Twoich treści i układu, np. w przypadku zdjęć o pełnej szerokości. Aby to zrobić, użyj interfejsów API takich jak
AppBarLayout, które definiują pasek aplikacji przypięty do górnej części ekranu.
Aby wdrożyć układ od krawędzi do krawędzi w aplikacji, wykonaj te czynności:
- Włącz wyświetlanie od krawędzi do krawędzi.
- Rozwiązuj problemy z wizualnymi nakładającymi się treściami.
Włącz wyświetlanie od krawędzi do krawędzi.
Możesz włączyć wyświetlacz od krawędzi do krawędzi w swojej aplikacji, wywołując metodę enableEdgeToEdge w onCreate z Activity. Powinna 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 ukrywa paski systemowe. Wyjątkiem jest tryb nawigacji przy użyciu 3 przycisków, w którym pasek stanu wyświetla się przezroczystą ramkę. Kolory ikon systemowych i ekranu są dostosowywane w zależności od jasnego lub ciemnego motywu systemu.
Metoda enableEdgeToEdge automatycznie deklaruje, że aplikacja powinna być nałożona od krawędzi do krawędzi, i dostosowuje kolory pasków systemowych. Jeśli z jakiegoś powodu jest to konieczne, przeczytaj sekcję „Ręczne konfigurowanie wyświetlania od krawędzi do krawędzi”.
Obsługa nakładających się elementów za pomocą wkładek
Po włączeniu wyświetlania od krawędzi do krawędzi niektóre widoki aplikacji mogą być widoczne za słupkami systemowymi, jak widać na rysunku 3.
Możesz rozwiązać problem z nakładaniem się, reagując na zestawy określające, które części ekranu przecinają się z interfejsem systemu, np. z paskiem nawigacyjnym czy paskiem stanu. Krzyżowanie może oznaczać wyświetlanie nad treścią, ale może też informować aplikację o gestach systemowych.
Typy wstawienia reklamy, które mają zastosowanie do wyświetlania aplikacji od krawędzi do krawędzi:
Wstawki słupków systemowych: najlepiej sprawdzają się w przypadku widoków, które można dotknąć, i nie mogą być zasłonięte słupkami systemowymi.
Wstawki za pomocą gestów: przeznaczone do obszarów wymagających użycia gestów przez system, które mają wyższy priorytet niż aplikacja.
Wcięcia słupków systemowych
Najczęściej stosowanym typem wkładek są systemowe wstawki. Reprezentują obszar, w którym interfejs systemu wyświetla się na osi Z nad aplikacją. Służą one do przesuwania lub uzupełniania widoków w aplikacji, które można kliknąć. Nie mogą też być zasłonięte słupkami systemu.
Na przykład pływający przycisk polecenia na ilustracji 3 jest częściowo zasłonięty paskiem nawigacyjnym:
Aby uniknąć tego rodzaju nakładania się elementów w trybie gestu lub przycisku, możesz zwiększyć marginesy widoku za pomocą funkcji getInsets(int) i WindowInsetsCompat.Type.systemBars().
Poniższy przykładowy kod pokazuje, jak wdrożyć systemowe wstawki słupkowe:
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 do przykładu pokazanego na ilustracji 3, w trybie przycisku nie będzie nakładać się, jak widać na rysunku 4:
To samo dotyczy trybu nawigacji przy użyciu gestów, jak widać na rysunku 5:
Systemowe wstawki gesty
Gesty systemowe to obszary okna, w których gesty systemowe mają wyższy priorytet niż Twoja aplikacja. Na ilustracji 6 te obszary są zaznaczone na pomarańczowo:
Podobnie jak w przypadku wkładek słupków systemowych możesz uniknąć nakładania się wstawienia gestów systemu za pomocą właściwości getInsets(int) i WindowInsetsCompat.Type.systemGestures().
Te wstawki umożliwiają odsunięcie widoków przesuwanych od krawędzi lub odsunięcie ich od krawędzi. Typowe przypadki użycia to dolne arkusze, przesuwanie w grach i karuzele zaimplementowane za pomocą ViewPager2.
W Androidzie 10 i nowszych wstawki systemowe zawierają dolną wkładkę dla gestu Home oraz wstążkę lewą i prawą dla gestów cofania.
Ten przykładowy kod pokazuje, jak wdrożyć systemowe wstawki gesty:
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 imersji
Niektóre treści najlepiej oglądać na pełnym ekranie, ponieważ są one bardziej wciągające. Aby ukryć paski systemowe w trybie pojemnym, użyj 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
W tym artykule znajdziesz więcej informacji o funkcji WindowInsets, nawigowaniu przy użyciu gestów i sposobie działania wstawienia:
- WindowInsets – detektory układów
- Nawigacja przy użyciu gestów: wcięcia
- Jak działają obrazy wstawiane na Androidzie?