Wyświetlaj zawartość w aplikacji od krawędzi do krawędzi

Wypróbuj sposób tworzenia wiadomości

Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak korzystać z wersji od brzegu do krawędzi w Compose

Od krawędzi do krawędzi w tworzeniu wiadomości →

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ł:

1. Włączanie wyświetlania od krawędzi do krawędzi
2. Rozwiązuj problemy z wizualnymi nakładającymi się treściami.
3. Rozważ wyświetlanie ram za pasami systemowymi.

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:

1. Dodaj zależność do parametru androidx.activity w Plik build.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'
   }
   

2. 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.

     override fun onCreate(savedInstanceState: Bundle?) {
       enableEdgeToEdge()
       super.onCreate(savedInstanceState)
       ...
     }
   

     @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:

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:

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
}

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:

To samo dotyczy trybu nawigacji przy użyciu gestów, jak widać na rysunku 5:

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.

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
}

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:

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:

Ten przykładowy kod pokazuje, jak wdrożyć systemowe wstawki gesty:

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
}

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:

val windowInsetsController =
      WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())

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?