Gdy ustawisz kierowanie na pakiet SDK 35 lub nowszy na urządzeniu z Androidem 15 lub nowszym, w których Twoja aplikacja jest wyświetlana od krawędzi do krawędzi. Okno rozciąga się na całą szerokość i wysokość. przez zarysowanie pasków systemowych. Paski systemowe zawierają stan m.in. pasek napisów i nawigacji.
Wiele aplikacji ma górny pasek aplikacji. Górny pasek aplikacji powinien rozciągać się do górnej krawędzi aplikacji i wyświetlaj za paskiem stanu. Opcjonalnie górny pasek aplikacji może zmniejsza się do wysokości paska stanu podczas przewijania treści.
Wiele aplikacji ma też dolny pasek aplikacji lub dolny pasek nawigacyjny. Słupki powinny rozciąga się też do dolnej krawędzi ekranu i wyświetla się za obszarem nawigacyjnym przeglądarki. W przeciwnym razie aplikacje powinny pokazywać przewijaną treść za paskiem nawigacyjnym.
Implementując układ od brzegu do krawędzi w aplikacji, pamiętaj o tych kwestiach: umysł:
- Włączanie wyświetlania od krawędzi do krawędzi
- Rozwiązuj problemy z wizualnymi nakładającymi się treściami.
- Rozważ wyświetlanie ram za pasami systemowymi.
![przykładowy obraz za paskiem stanu](https://developer.android.com/static/images/guide/navigation/e2e-imagery-behind-status-bar.png?authuser=6&hl=pl)
Włącz wyświetlanie od krawędzi do krawędzi
Jeśli Twoja aplikacja jest kierowana na pakiet SDK 35 lub nowszą wersję, protokół Edge jest automatycznie włączony w przypadku urządzenia z Androidem 15 lub nowszym,
Aby włączyć połączenia brzegowe w poprzednich wersjach Androida, wykonaj te czynności:
Dodaj zależność do parametru
androidx.activity
w Plikbuild.gradle
aplikacji lub modułu:Kotlin
dependencies { val activity_version =
activity_version
// Java language implementation implementation("androidx.activity:activity:$activity_version") // Kotlin implementation("androidx.activity:activity-ktx:$activity_version") }Odlotowe
dependencies { def activity_version =
activity_version
// Java language implementation implementation 'androidx.activity:activity:$activity_version' // Kotlin implementation 'androidx.activity:activity-ktx:$activity_version' }Importowanie
enableEdgeToEdge
funkcji rozszerzenia do aplikacji:
Ręcznie włącz połączenia brzegowe, 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()
sprawia, że paski systemowe są przezroczyste, z wyjątkiem włączonych
Tryb nawigacji przy użyciu 3 przycisków, na którym pasek stanu wyświetla się z przezroczystą siatką.
kolory ikon systemowych i ramki są dostosowywane na podstawie
jasny lub ciemny motyw.
Funkcja enableEdgeToEdge()
automatycznie deklaruje, że aplikacja powinna być
od krawędzi do krawędzi i dostosować kolory pasków systemowych.
Aby włączyć obraz od krawędzi do krawędzi w aplikacji bez korzystania z
funkcji enableEdgeToEdge()
, patrz
Ręcznie skonfiguruj wyświetlacz od krawędzi do krawędzi
Obsługa nakładających się elementów za pomocą wkładek
Niektóre widoki aplikacji mogą wyświetlać się za paskami systemowymi, jak widać na ilustracji. 3.
Możesz rozwiązać problem z pokrywaniem się, reagując na wcięcia określające, które części Ekran krzyżuje się z interfejsem systemowym, np. paskiem nawigacyjnym czy stanem przeglądarki. Krzyżujące się elementy mogą oznaczać wyświetlanie nad treścią, ale mogą też wpływać o gestach systemowych.
Typy wstawienia reklamy, które mają zastosowanie do wyświetlania aplikacji od krawędzi do krawędzi:
Wcięcia słupków systemowych: najlepiej sprawdzają się w przypadku widoków, które można kliknąć. być zasłonięte paskami systemowymi.
Wcięcia w wycięciach w ekranie: w obszarach, w których może być wycięcie w ekranie. ze względu na kształt urządzenia.
Wstawki za pomocą gestów: przeznaczone do obszarów nawigacyjnych przy użyciu gestów w systemie. które mają wyższy priorytet niż Twoja aplikacja.
Wcięcia słupków systemowych
Najczęściej stosowanym typem wkładek są systemowe wcięcia słupkowe. Reprezentują one obszar, w którym interfejs systemu wyświetla się na osi Z nad aplikacją. Są najlepsze służy do przesuwania lub wypełniania widoków w aplikacji dostępnych do kliknięcia. Nie wolno za ich pomocą wizualne przysłonięte paskami systemowymi.
Na przykład działanie pływające (FAB) na ilustracji 3 jest częściowo zasłonięte paskiem nawigacyjnym:
![przykład implementacji od krawędzi do krawędzi, ale pasek nawigacyjny zakrywa przycisk PPP](https://developer.android.com/static/images/guide/navigation/e2e-after-implementation.png?authuser=6&hl=pl)
Aby uniknąć tego rodzaju nakładania się elementów w trybie gestu lub przycisku:
można zwiększyć marginesy obejrzenia za pomocą
getInsets(int)
z
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 rys. 3, nie uzyskasz wizualne nakładanie się w trybie przycisków, tak jak na ilustracji 4:
![półprzezroczysty pasek nawigacyjny bez przycisku FAB.](https://developer.android.com/static/images/guide/navigation/e2e-system-bars-top.png?authuser=6&hl=pl)
To samo dotyczy trybu nawigacji przy użyciu gestów, jak widać na rysunku 5:
![od krawędzi do krawędzi dzięki nawigowaniu przy użyciu gestów](https://developer.android.com/static/images/guide/navigation/e2e-system-bars-bottom.png?authuser=6&hl=pl)
Zestawy do wycięcia w ekranie
Niektóre urządzenia mają wycięcia w ekranie. Wycięcie zazwyczaj znajduje się na górze i znajdować się na pasku stanu. Gdy ekran urządzenia jest ustawiony w orientacji poziomej wycięcie może znajdować się na pionowej krawędzi. W zależności od treści aplikacji jak widać na ekranie, należy wdrożyć dopełnienie, by uniknąć wycięć, domyślnie aplikacje będą rysować w wycięciu w ekranie.
Na przykład na wielu ekranach aplikacji wyświetla się lista elementów. Nie zasłaniaj elementów listy z wycięciem w ekranie lub paskami systemowymi.
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets -> val bars = insets.getInsets( WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout() ) v.updatePadding( left = bars.left, top = bars.top, right = bars.right, bottom = bars.bottom, ) WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> { WindowInsetsCompat bars = insets.getInsets( WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout() ); v.setPadding(bars.left, bars.top, bars.right, bars.bottom); return WindowInsetsCompat.CONSUMED; });
Określ wartość WindowInsetsCompat
, stosując funkcję logiczną lub funkcji
słupki systemowe i rodzaje wycięcia w ekranie.
Ustaw clipToPadding
na RecyclerView
, tak aby dopełnienie przewijało się razem
elementów listy. Dzięki temu elementy są zasłonięte paskami systemowymi, gdy użytkownik
jak widać w następnym przykładzie.
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
Systemowe wstawki gesty
Wstawki systemowe w postaci gestów reprezentują obszary okna, w których wykonuje się gesty systemowe mają pierwszeństwo przed aplikacją. Te obszary są zaznaczone na pomarańczowo na ilustracji 6:
![Przykład systemowego wstawienia gestów](https://developer.android.com/static/images/guide/navigation/e2e-system-gesture-insets.png?authuser=6&hl=pl)
Podobnie jak w przypadku wcięć słupków systemowych, możesz uniknąć nakładania się na elementy w gestach systemowych
za pomocą
getInsets(int)
z
WindowInsetsCompat.Type.systemGestures()
Te wstawki umożliwiają odsunięcie widoków przesuwanych od krawędzi lub odsunięcie ich od krawędzi. Częste zastosowania
przypadki to dolne arkusze,
przesuwanie w grach i karuzele
ViewPager2
.
W Androidzie 10 i nowszych zestawy gestów systemu zawierają dolną wkładkę dla gestu ekranu głównego oraz lewej i prawej wstawki dla gestów cofania:
![przykład pomiarów wstawionych gestami systemowymi](https://developer.android.com/static/images/guide/navigation/e2e-system-gesture-insets-measurements.png?authuser=6&hl=pl)
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; });
Składniki materiałowe
Komponenty Android Material oparte na wielu widokach
(com.google.android.material){:.external} automatycznie obsługuje wstawki, w tym
BottomAppBar
,
BottomNavigationView
,
NavigationRailView
i NavigationView
Jednak AppBarLayout
nie obsługuje automatycznie wkładek. Dodaj
android:fitsSystemWindows="true"
aby obsługiwać górne wstawki lub użyć setOnApplyWindowInsetsListener
.
Dowiedz się, jak obsługiwać wstawki za pomocą Komponenty Material Design
Tryb imersji
Niektóre treści najlepiej oglądać na pełnym ekranie, dając użytkownikowi więcej możliwości
i wciągające doświadczenie. Aby włączyć tryb pojemny, możesz ukryć paski systemowe za pomocą
WindowInsetsController
oraz
WindowInsetsControllerCompat
biblioteki:
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 znajdziesz w sekcji Ukrywanie pasków systemowych w trybie pojemnym. .
Dodatkowe materiały
Więcej informacji o funkcji WindowInsets
, gest
nawigacji i jak działają wstawki:
- WindowInsets – detektory układów
- Nawigacja przy użyciu gestów: wcięcia
- Jak działają obrazy wstawiane na Androidzie?