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 sterowaniem za pomocą gestów.

    Ilustracja 2. Wstawki gestów systemowych. Unikaj umieszczania elementów dotykowych w tych obszarach

Rysowanie treści za paskami systemowymi

Funkcja wyświetlania od krawędzi do krawędzi umożliwia Androidowi wyświetlanie interfejsu pod paskami systemowymi, aby zapewnić użytkownikom 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 edytorze i widokach.

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 górnego paska aplikacji

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. Styl ikony paska stanu możesz ustawić tak jak w przypadku poniższych przykładów.

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

Upewnij się, że treści aplikacji zajmują cały ekran. Zachowaj przezroczyste lub półprzezroczyste paski stanu i nawigacji z treściami od krawędzi do krawędzi, jak w tym przykładzie.

Rysunek 5. Aplikacja od krawędzi do krawędzi z przezroczystymi paskami systemu idealnie nadaje się do wyświetlania treści, ponieważ zajmuje większość miejsca na ekranie.

W Androidzie 15 obowiązuje wyświetlanie bez ramki, dzięki czemu paski systemu są domyślnie przezroczyste lub półprzezroczyste. W przypadku starszych wersji Androida nie pozostawiaj ciemnych pasków systemu.

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

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

Rysunek 7. Ikona powiadomienia na pasku stanu

Ustawianie stylu paska stanu

Zadbaj o to, aby pasek stanu był przezroczysty we wszystkich wersjach, wywołując funkcję enableEdgeToEdge(). Pamiętaj o zaktualizowaniu kolorów ikony w pasku stanu, aby zapewnić kontrast. Aby na przykład utworzyć ciemne ikony:

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

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 używa przycisków Wstecz, Ekran główny i Przegląd. 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.

Ilustracja 8. Pasek nawigacji 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.

Ilustracja 9. 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 10. Pasek nawigacji 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 dolny pasek aplikacji, ustaw wartość Window.setNavigationBarContrastEnforced() na false, aby pasek ten mógł być wyświetlany pod paskiem nawigacji systemu bez zastosowania półprzezroczystej zasłony w przypadku nawigacji za pomocą 3 przycisków.

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 na podstawie zawartości znajdującej się za nimi. W poniższym przykładzie uchwyt na pasku nawigacyjnym zmienia kolor na ciemny, jeśli znajduje się nad jasnymi treściami, i odwrotnie.

    Rysunek 11. Dynamiczna adaptacja kolorów

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

    Rysunek 12. Dynamiczna adaptacja kolorów, w której paski systemu zmieniają kolor w zależności od zawartości za nimi

Klawiatura i poruszanie się po ekranie

Rysunek 13. 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 14. 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 15. Tryb pełnoekranowy wyświetlany na pełnym ekranie urządzenia mobilnego w orientacji poziomej

Możesz ukryć paski systemowe, gdy potrzebujesz pełnego ekranu, np. 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.