Pasek stanu i pasek nawigacji są nazywane paskami systemowymi. Wyświetlają one ważne informacje, takie jak poziom naładowania baterii, godzina czy alerty, a także 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.
Wnioski
Podczas projektowania aplikacji uwzględnij paski systemowe. Weź pod uwagę bezpieczne strefy interfejsu, interakcje z systemem, metody wprowadzania, wycięcia wyświetlacza, paski stanu, napisy, 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 przeglądaniem za pomocą gestów.
Ilustracja 2. Wstawki gestów systemowych. Unikaj umieszczania elementów dotykowych w tych obszarach
Rysowanie treści za paskami systemu
Funkcja wyświetlania od krawędzi do krawędzi umożliwia Androidowi wyświetlanie interfejsu użytkownika pod paskami systemu w celu zapewnienia wciągającej obsługi, która jest często zgłaszana przez użytkowników.
Aplikacja może reagować na nakładanie się treści, odpowiadając na wstawki. Insety opisują, jak bardzo treści w aplikacji muszą być wypełnione, aby uniknąć nakładania się na elementy interfejsu systemu operacyjnego Android, takie jak pasek nawigacyjny czy pasek stanu, lub na elementy fizyczne urządzenia, takie jak wycięcia 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.
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ń.
Ikony na pasku stanu mogą wyglądać inaczej w zależności od kontekstu, pory dnia, ustawień 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.
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.
W Androidzie 15 wyświetlanie bez ramki jest wymuszane, aby paski systemu były domyślnie przezroczyste lub półprzezroczyste. W przypadku starszych wersji Androida nie pozostawiaj ciemnych pasków systemu.
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ń.
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
Wyświetlanie wycięć i paska stanu
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. Może to mieć wpływ na wygląd pasków stanu. Wycięcia w ekranie mogą się różnić w zależności od producenta.
Dowiedz się, jak obsługiwać wycięcia w ekranie.
Pasek nawigacyjny
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.
- 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 nawigacji za pomocą gestów.
Dowiedz się więcej o implementacji nawigacji za pomocą gestów.
Nawigacja przy użyciu 3 przycisków
Nawigacja przy użyciu 3 przycisków: przyciski ekranu głównego, Wstecz i przeglądu.
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.
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. Domyślnie nawigacja za pomocą 3 przycisków jest półprzezroczysta, a na dużym ekranie – nieprzezroczysta.
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 12. 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()nafalse.
Rysunek 13. Dynamiczna adaptacja kolorów, w której paski systemu zmieniają kolor w zależności od zawartości znajdującej się za nimi
Klawiatura i poruszanie się po ekranie
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.
Tryb imersji
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.