Paski systemowe Androida

Pasek stanu, pasek podpisu i pasek nawigacji to paski systemowe. Wyświetlają ważne informacje, takie jak poziom naładowania baterii, czas i powiadomienia, oraz umożliwiają bezpośrednią interakcję z urządzeniem z dowolnego miejsca.

Niezależnie od tego, czy projektujesz interfejs użytkownika do interakcji z systemem operacyjnym Android, metodami wprowadzania danych czy innymi funkcjami urządzenia, musisz wziąć pod uwagę widoczność pasków systemowych.

Rysunek 1. Obrazy za paskami systemowymi

Wnioski

  • Podczas projektowania aplikacji uwzględnij paski systemowe. Weź pod uwagę bezpieczne strefy interfejsu, interakcje z systemem, metody wprowadzania danych, wycięcia w ekranie, paski stanu, paski z napisem, paski nawigacyjne i inne funkcje urządzenia.

  • Ustaw przezroczyste lub półprzezroczyste paski stanu i paski nawigacyjne systemu, a także treści za tymi paskami, aby wypełniały cały ekran.

  • Unikaj dodawania gestów dotykania lub przeciągania pod wstawkami gestów, ponieważ mogą one kolidować z przeglądaniem od krawędzi do krawędzi i poruszaniem się po ekranie za pomocą gestów.

Rysunek 2. Wstawki gestów systemowych. Unikaj umieszczania celów dotykowych pod tymi obszarami

Rysowanie treści za paskami systemowymi

Funkcja wyświetlania od krawędzi do krawędzi pozwala Androidowi wyświetlać interfejs użytkownika pod paskami systemu, aby zapewnić wciągające wrażenia, co jest często wymagane przez użytkowników.

Aplikacja może reagować na nakładanie się treści, odpowiadając na wstawki. Insety określają, o ile treści aplikacji trzeba przesunąć, aby uniknąć nakładania się na elementy interfejsu systemu operacyjnego Androida, takie jak pasek stanu, pasek nagłówka czy pasek nawigacyjny, lub na elementy fizycznego urządzenia, takie jak wycięcie w ekranie. Dowiedz się, jak obsługiwać obraz od krawędzi do krawędzi i zarządzać wstawkami w edytorzewidokach.

Podczas projektowania interfejsów typu edge-to-edge należy pamiętać o tych typach wstawek:

  • Wstawki pasków systemowych dotyczą interfejsu użytkownika, który można dotykać i który nie powinien być zasłonięty przez paski systemowe.
  • Wstawki gestów systemowych dotyczą obszarów nawigacji za pomocą gestów używanych przez system, które mają wyższy priorytet niż aplikacja.
  • Wstawki w wycięciu w ekranie dotyczą obszarów urządzenia, które wchodzą w obszar wyświetlacza, np. wycięcie na aparat.

Pasek postępu

Na Androidzie pasek stanu zawiera ikony powiadomień i ikony systemowe. Użytkownik wchodzi w interakcję z paskiem stanu, przeciągając go w dół, aby otworzyć obszar powiadomień.

Rysunek 3. Region paska stanu wyróżniony na górze paska 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. Zobacz ikony na pasku systemu.

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

Gdy otrzymasz powiadomienie, na pasku stanu pojawi się ikona. Informuje ona użytkownika, że w szufladzie powiadomień jest coś do zobaczenia. Może to być ikona aplikacji lub symbol reprezentujący kanał. Zapoznaj się z projektowaniem powiadomień.

Rysunek 5. Ikona powiadomienia na pasku stanu

Ustawianie stylu paska stanu

Ustaw pasek stanu jako przezroczysty lub półprzezroczysty, aby treści aplikacji zajmowały cały ekran.

W Androidzie 15 wyświetlanie bez ramki jest wymuszane, więc pasek stanu jest domyślnie przezroczysty. Aby zapewnić zgodność wsteczną, wywołaj metodę enableEdgeToEdge().

Rysunek 6. Aby uatrakcyjnić swoje treści, użyj pełnego ekranu. Nie mają nieprzezroczystych pasków systemowych.

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

  • Wstecz powoduje bezpośredni powrót do poprzedniego widoku.
  • Przejście do ekranu głównego powoduje wyjście z aplikacji i powrót na ekran główny urządzenia.
  • W sekcji Przegląd widać, że aplikacje są otwarte i ostatnio otwierane.

Użytkownicy mogą wybierać spośród różnych konfiguracji paska nawigacyjnego, w tym nawigacji przy użyciu gestów (zalecane) i nawigacji przy użyciu 3 przycisków. Aby zapewnić użytkownikom jak najlepsze wrażenia, uwzględnij różne typy nawigacji.

Nawigacja przy użyciu gestów

Wprowadzona w Androidzie 10 (poziom interfejsu API 29) nawigacja za pomocą gestów jest zalecanym typem nawigacji, ale nie możesz zastąpić preferencji użytkownika. Nawigacja za pomocą gestów nie korzysta z przycisków Wstecz, Ekran główny i Przegląd, lecz zamiast tego wyświetla pojedynczy element sterujący gestami. Użytkownicy mogą przesuwać palcem od lewej lub prawej krawędzi ekranu, aby wrócić wstecz, oraz od dołu w górę, aby przejść do ekranu głównego. Przesuń palcem w górę i przytrzymaj, aby otworzyć przegląd.

Nawigacja za pomocą gestów to bardziej elastyczny wzór nawigacji, który umożliwia projektowanie na urządzenia mobilne i większe ekrany. Aby zapewnić użytkownikom jak najlepsze wrażenia, uwzględnij nawigację za pomocą gestów, wykonując te czynności:

  • Obsługa treści od krawędzi do krawędzi.
  • Unikaj dodawania interakcji lub punktów dotykowych w ramkach w przycisku nawigacji za pomocą gestów.

Dowiedz się więcej o implementacji nawigacji za pomocą gestów.

Rysunek 7. Pasek nawigacyjny z uchwytem gestów

Nawigacja przy użyciu 3 przycisków

Nawigacja przy użyciu 3 przycisków: przyciski ekranu głównego, Wstecz i przeglądu.

Rysunek 8. Pasek nawigacji z 3 przyciskami

Inne warianty paska nawigacyjnego

W zależności od wersji Androida i urządzenia użytkownicy mogą mieć dostęp do innych konfiguracji paska nawigacyjnego. Nawigacja przy użyciu 2 przycisków obejmuje 2 przyciski: ekranu głównego i wstecz.

Rysunek 9. Pasek nawigacyjny z 2 przyciskami

Ustawianie stylu nawigacji

Aby sprawdzić, czy pasek nawigacyjny jest przezroczysty lub półprzezroczysty we wszystkich wersjach, wywołaj funkcję enableEdgeToEdge().

Na urządzeniach z Androidem 15 lub nowszym albo po wywołaniu metody enableEdgeToEdge() nawigacja za pomocą gestów jest domyślnie przezroczysta. Nawigacja za pomocą 3 przycisków jest przezroczysta domyślnie lub nieprzejrzysta, jeśli znajduje się na pasku zadań na urządzeniu z dużym ekranem.

Jeśli Twoja aplikacja ma pasek aplikacji na dole, ustaw wartość Window.setNavigationBarContrastEnforced() na false, aby pasek aplikacji na dole mógł być wyświetlany pod paskiem nawigacji systemu bez zastosowania półprzezroczystej zasłony w przypadku nawigacji z 3 przyciskami.

Android obsługuje ochronę wizualną interfejsu w trybie nawigacji za pomocą gestów i w trybach przycisków.

Tryb nawigacji za pomocą gestów: system stosuje dynamiczną adaptację kolorów, w której zawartość pasków systemu zmienia kolor w zależności od treści znajdujących się za nimi. W tym przykładzie uchwyt na pasku nawigacyjnym zmienia kolor na ciemny, jeśli znajduje się nad jasnym elementem, i odwrotnie.

Rysunek 10. Dynamiczna adaptacja kolorów

Tryby przycisków: system stosuje przezroczystą zasłonę za przyciskami na pasku nawigacji, którą można usunąć, ustawiając wartość Window.setNavigationBarContrastEnforced() na false.

Rysunek 11. dynamiczne dostosowywanie kolorów, w którym paski systemu zmieniają kolor w zależności od treści znajdujących się za nimi

Klawiatura i poruszanie się po ekranie

Rysunek 12. Klawiatura ekranowa z paskami nawigacyjnymi

Każdy typ nawigacji reaguje odpowiednio na klawiaturę ekranową, aby umożliwić użytkownikowi wykonywanie takich czynności jak zamykanie lub nawet zmiana typu klawiatury. Aby zapewnić płynne przejście klawiatury, użyj WindowInsetsAnimationCompat, aby zsynchronizować przejście aplikacji z klawiaturą przesuwaną w górę i w dół od dołu ekranu.

Wycięcia w ekranie

Wycięcie w ekranie to obszar na niektórych urządzeniach, który wkracza w powierzchnię wyświetlacza, aby zapewnić miejsce dla czujników z przodu. Wycięcia w ekranie mogą się różnić w zależności od producenta.

Rysunek 13. Przykłady wycięć na wyświetlaczu

Wycięcia w ekranie mogą wpływać na wygląd interfejsu. Gdy kierujesz aplikację na Androida 15 (poziom API 35) lub nowszego, domyślnie jest ona wyświetlana w regionie wycięcia w ekranie. Aplikacje muszą obsługiwać wycięcia w ekranie, aby ważne elementy interfejsu nie były wyświetlane pod wycięciem. Dowiedz się, jak obsługiwać wycięcia w ekranie.

Tryb imersji

Rysunek 14. Tryb pełnoekranowy na urządzeniu mobilnym w orientacji poziomej

Możesz ukryć paski systemowe, gdy potrzebujesz pełnego ekranu, na przykład gdy użytkownik ogląda film. Użytkownik powinien mieć możliwość dotknięcia ekranu, aby wyświetlić paski systemu i interfejs, i w ten sposób poruszać się po systemie lub korzystać z elementów sterujących. Dowiedz się więcej o projektowaniu na potrzeby trybów pełnoekranowych lub przeczytaj, jak ukryć paski systemowe w trybie pełnoekranowym.