Paski systemowe Androida

Pasek stanu, pasek podpisów i pasek nawigacyjny to paski systemu. Wyświetlają ważne informacje, takie jak poziom baterii, godzina i powiadomienia, a także umożliwiają bezpośrednią interakcję z urządzeniem z dowolnego miejsca.

Zawsze uwzględniaj obecność i widoczność pasków systemu, niezależnie od tego, czy projektujesz układy, metody wprowadzania czy inne funkcje urządzenia.

Rysunek 1. Obrazy za paskami systemu.

Wnioski

  • Uwzględnij paski systemu w układach dla różnych rozmiarów ekranu i form. Uwzględnij bezpieczne strefy interfejsu, interakcje z systemem, metody wprowadzania, wycięcia w ekranie, paski stanu, paski podpisów, paski nawigacyjne i inne funkcje urządzenia.

  • Ustaw przezroczystość pasków stanu i nawigacji systemu oraz rysuj treści za tymi paskami, aby wyświetlać je od krawędzi do krawędzi.

  • Używaj WindowInsets, aby prawidłowo obsługiwać zachodzące na siebie elementy paska systemu i zapewnić, że w układach adaptacyjnych Twoje treści nie będą zasłonięte.

  • Używaj układów kanonicznych, które efektywnie wykorzystują miejsce na ekranie.

Pasek stanu

Pasek stanu zawiera ikony powiadomień i ikony systemowe. Użytkownik wchodzi w interakcję z paskiem stanu, przeciągając go w dół, aby uzyskać dostęp do obszaru powiadomień. Style paska stanu mogą być przezroczyste lub półprzezroczyste.

Rysunek 2. Obszar paska stanu wyróżniony nad górnym paskiem aplikacji.

Ikony na pasku stanu

Ikony na pasku stanu mogą wyglądać inaczej w zależności od kontekstu, pory dnia, preferencji użytkownika lub motywów oraz innych parametrów. Więcej informacji znajdziesz w artykule Ikony na pasku systemu.

Rysunek 3. Ikony na pasku stanu w jasnym i ciemnym motywie.

Gdy pojawi się powiadomienie, zwykle na pasku stanu wyświetla się ikona. Sygnalizuje ona użytkownikowi, że w panelu powiadomień jest coś do zobaczenia. Może to być ikona aplikacji lub symbol reprezentujący kanał. Zobacz Projektowanie powiadomień design.

Rysunek 4. Ikona powiadomienia na pasku stanu.

Ustawianie stylu paska stanu

Ustaw przezroczystość paska stanu, aby zawartość aplikacji zajmowała cały ekran. Następnie ustaw styl ikon paska systemu, aby miały odpowiedni kontrast.

Na Androidzie 15 wymuszane jest wyświetlanie od krawędzi do krawędzi, co sprawia, że pasek stanu jest domyślnie przezroczysty. Aby zapewnić zgodność wsteczną, wywołaj enableEdgeToEdge().

Na poniższym obrazie po lewej stronie pasek stanu jest przezroczysty, a zielone tło TopAppBar jest rysowane za paskiem stanu.

Rysunek 5. Wykorzystuj całą powierzchnię ekranu, aby ulepszać treści. Nie mają nieprzezroczystych pasków systemu.

Przezroczyste paski stanu są idealne, gdy interfejs nie pojawia się pod paskiem stanu lub gdy obraz jest rysowany pod paskiem stanu. Półprzezroczyste paski stanu są idealne, gdy interfejs przewija się pod paskiem stanu. Więcej informacji o ochronie gradientu znajdziesz w artykule Projektowanie aplikacji bez ramki.

Rysunek 6. Aplikacja bez ramki z ochroną gradientu w 2 odcieniach, która obejmuje 2 panele za paskiem stanu systemu.

Android umożliwia użytkownikom sterowanie nawigacją za pomocą przycisków Wstecz, Strona główna i Przegląd:

  • Wstecz powoduje powrót do poprzedniego widoku.
  • Strona główna zostanie usunięta z aplikacji i przeniesiona na ekran główny urządzenia.
  • Przegląd pokazuje aktywne aplikacje i ostatnie nieodrzucone aplikacje.

Użytkownicy mogą wybierać spośród różnych konfiguracji nawigacji, w tym nawigacji przy użyciu gestów i nawigacji adaptacyjnej. Aby zapewnić optymalny komfort użytkowania, uwzględnij wiele typów nawigacji.

Nawigacja przy użyciu gestów

Nawigacja przy użyciu gestów nie korzysta z przycisków Wstecz, Strona główna i Przegląd, ale wyświetla pojedynczy uchwyt gestu. Użytkownicy mogą przesuwać palcem od lewej lub prawej krawędzi ekranu, aby wrócić, oraz od dołu, aby przejść do ekranu głównego. Przesunięcie palcem w górę i przytrzymanie otwiera przegląd.

Nawigacja przy użyciu gestów to bardziej skalowalny wzorzec nawigacji do projektowania na urządzeniach mobilnych i większych ekranach. Aby zapewnić najlepszy komfort użytkowania, uwzględnij nawigację przy użyciu gestów, wykonując te czynności:

  • Obsługa treści wyświetlanych od krawędzi do krawędzi.
  • Unikaj dodawania interakcji lub obszarów dotyku pod wcięciami nawigacji przy użyciu gestów.

Więcej informacji znajdziesz w artykule Dodawanie obsługi nawigacji przy użyciu gestów.

Rysunek 7. Pasek nawigacyjny z uchwytem gestu.

Nawigacja adaptacyjna

Innym popularnym wzorcem nawigacji na Androidzie jest przełączanie się między panelem nawigacyjnym a paskiem nawigacyjnym w zależności od klasy rozmiaru okna wyświetlacza. Komponenty nawigacji adaptacyjnej w Jetpack Compose obsługują wiele formatów, a jednocześnie zapobiegają zakłócaniu układu komponentów nawigacyjnych przez paski systemu.

W przypadku układów adaptacyjnych zastanów się, jak paski systemu mogą się zachowywać lub jak mogą być inaczej stylizowane w różnych kontekstach, np. w przypadku kompaktowych lub rozwiniętych rozmiarów okien albo różnych pozycji urządzeń składanych.

Więcej informacji znajdziesz w artykule Tworzenie nawigacji adaptacyjnej.

Ikony nawigacji mogą też wyglądać inaczej w zależności od preferencji użytkownika lub motywów. Więcej informacji znajdziesz w artykule Ikony na pasku systemu.

Ustawianie stylu nawigacji

Android obsługuje wizualną ochronę interfejsu w trybie nawigacji gestami i w trybach przycisków. System stosuje dynamiczne dostosowywanie kolorów, w którym zawartość pasków systemu zmienia kolor w zależności od treści znajdujących się za nimi.

Tryb nawigacji przy użyciu gestów

Po wybraniu Androida 15 jako platformy docelowej lub wywołaniu enableEdgeToEdge w Activity system rysuje przezroczysty pasek nawigacji przy użyciu gestów i stosuje dynamiczne dostosowywanie kolorów. W poniższym przykładzie uchwyt na pasku nawigacyjnym zmienia kolor na ciemny, jeśli znajduje się nad jasną treścią, i odwrotnie.

Rysunek 8. Dynamiczne dostosowywanie kolorów.

Zawsze zalecamy używanie przezroczystych pasków nawigacji przy użyciu gestów.

Tak

Ustaw przezroczystość paska nawigacji przy użyciu gestów.

Czego nie robić

Nie dodawaj tła do paska nawigacji przy użyciu gestów.

Tryby przycisków

Po wybraniu Androida 15 jako platformy docelowej lub wywołaniu enableEdgeToEdge w Activity system stosuje półprzezroczystą zasłonę za paskami nawigacji przy użyciu przycisków. Możesz ją usunąć, ustawiając wartość Window.setNavigationBarContrastEnforced() na false.

Rysunek 9. Dynamiczne dostosowywanie kolorów z przezroczystą zasłoną.

Używaj przezroczystych pasków nawigacji z 3 przyciskami, gdy u dołu ekranu znajduje się pasek aplikacji lub pasek nawigacji aplikacji, albo gdy interfejs nie przewija się pod paskiem nawigacji z 3 przyciskami. Aby uzyskać przezroczysty pasek nawigacyjny, ustaw wartość Window.setNavigationBarContrastEnforced() na false i dodaj do dolnych pasków aplikacji dopełnienie, aby rysować pod systemowymi paskami nawigacyjnymi, jak widać na rysunkach 7, 8 i 9. Więcej informacji znajdziesz w sekcji Ochrona paska systemu.

W przypadku przewijania treści używaj półprzezroczystego paska nawigacji z 3 przyciskami. Więcej informacji o kwestiach związanych z półprzezroczystym paskiem nawigacji znajdziesz w artykule Projektowanie aplikacji bez ramki.

Klawiatura i nawigacja

Rysunek 10. Klawiatura ekranowa z paskami nawigacji.

Każdy typ nawigacji odpowiednio reaguje na klawiaturę ekranową, aby umożliwić użytkownikowi wykonywanie działań, takich jak odrzucanie lub nawet zmienianie typu klawiatury. Aby zapewnić płynne przejście, które synchronizuje przejście aplikacji z przesuwaniem klawiatury w górę i w dół od dołu ekranu, użyj WindowInsetsAnimationCompat.

Układy

Układy adaptacyjne optymalizują dostępną przestrzeń wyświetlania. Organizują interfejs aplikacji, przenosząc treści do paneli dodatkowych lub trzeciorzędnych.

Projektując układy adaptacyjne, zastanów się, jak paski systemowe wchodzą w interakcję z treściami. Używaj WindowInsets, aby mieć pewność, że interfejs nie jest zasłaniany przez paski systemu na wyświetlaczach, takich jak duże ekrany, urządzenia składane i okna aplikacji w trybach wielu okien i okien na pulpicie.

Gdy aplikacja jest wyświetlana od krawędzi do krawędzi, sprawdź, czy treści i elementy sterujące nie są zasłaniane przez interfejs systemu. Jeśli na przykład pasek nawigacyjny zasłania przycisk, użytkownik może nie być w stanie go kliknąć.

Więcej informacji znajdziesz w artykule Układy kanoniczne.

Wycięcia w ekranie

Wycięcie w ekranie to obszar na niektórych urządzeniach, który wchodzi w powierzchnię wyświetlacza, aby zapewnić miejsce na czujniki z przodu urządzenia. Wycięcia na wyświetlaczu mogą się różnić w zależności od producenta. Zastanów się, jak wycięcia w ekranie będą współdziałać z treściami, orientacją i wyświetlaniem od krawędzi do krawędzi.

Rysunek 11. Przykłady wycięć w ekranie.

Tryb pojemny

Rysunek 12. Tryb pojemny pokazujący pełnoekranowe wrażenia na urządzeniu mobilnym w orientacji poziomej.

Paski systemu możesz ukryć, gdy potrzebujesz trybu pełnoekranowego, np. gdy użytkownik ogląda film. Użytkownik powinien nadal mieć możliwość kliknięcia, aby wyświetlić paski systemu, oraz poruszania się po elementach sterujących systemu i wchodzenia z nimi w interakcje. Więcej informacji znajdziesz w sekcjach Treści immersyjne i Ukrywanie pasków systemu w trybie pojemnym.