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 pracować z tekstem od krawędzi do krawędzi w oknie Compose

Od krawędzi do krawędzi w oknie tworzenia wiadomości →

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:

1. Włącz wyświetlanie od krawędzi do krawędzi.
2. 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.

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

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

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;
});

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:

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 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?