Pasek stanu i pasek nawigacyjny są razem nazywane paskami systemowymi. Wyświetlają ważne informacje, takie jak poziom naładowania baterii, godzina i alerty o powiadomieniach, a także umożliwiają bezpośrednią interakcję z urządzeniem z dowolnego miejsca.
Należy wziąć pod uwagę słupki systemowe niezależnie od tego, czy interfejs jest przeznaczony do interakcji z systemem operacyjnym Android, z metod wprowadzania czy z innych funkcji urządzenia. Utrzymuj słupki systemu na górze większości warstw, aby je uwzględnić.
Odebranie krążka
Uwzględnij w projektach paski systemowe, aby uwzględniać bezpieczne strefy interfejsu, interakcje systemu, metody wprowadzania, wycięcia w ekranie i inne możliwości urządzenia. Utrzymuj słupki systemowe w najwyższej warstwie, aby były uwzględniane.
Zalecane: zadbaj o przejrzystość pasków systemowych i rozmieść aplikację na pełnym ekranie, ciągniejąc interfejs pod paskami, aby zapewnić pełną wygodę użytkowania.
Jeśli nie możesz ustawić przezroczystości obu pasków, sprawdź, czy ich kolory pasują do koloru aplikacji. Możesz np. dopasować kolor dolnego paska nawigacyjnego do koloru paska gestów, a koloru górnego paska stanu do koloru treści.
Rys. 2. Sprawdź, czy kolory paska systemu pasują do koloru treści aplikacji Unikaj dodawania gestów dotykujących i przeciągania elementów docelowych do wkładek, ponieważ kolidują z nawigacją od krawędzi do krawędzi i przy użyciu gestów.
Rys. 3. Systemowe wcięcia gestów Unikaj umieszczania w tych miejscach elementów do kliknięcia.
Umieść treść za paskami systemowymi
Dzięki funkcji od krawędzi do krawędzi Android rysuje interfejs pod pasami systemowymi, aby zapewnić jeszcze lepsze wrażenia. Zalecamy korzystanie z formatów od krawędzi do krawędzi, ponieważ użytkownicy często proszą o przejrzystość paska nawigacyjnego. (Przeczytaj, jak obsługiwać standard edge-to-edge).
Aplikacja może rozwiązać problem nakładania się treści, reagując na zestawy. Wstawki opisują, w jakim stopniu należy uzupełnić zawartość aplikacji, aby nie nakładała się na elementy interfejsu systemu operacyjnego Android, takie jak pasek nawigacyjny czy pasek stanu, ani na fizyczne funkcje urządzenia, takie jak wycięcia w wyświetlaczu.
Podczas projektowania aplikacji od krawędzi do krawędzi pamiętaj o tych typach wkładek:
- Wcięcia pasków systemowych dotyczą interfejsu, który można kliknąć i nie powinien być zasłonięty przez paski systemowe.
- Wstawki za pomocą gestów dotyczą obszarów nawigacji przy użyciu gestów, z których korzysta system, które mają wyższy priorytet niż Twoja aplikacja.
Pasek postępu
W Androidzie 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ń.
Pasek stanu może wyglądać różnie w zależności od kontekstu, pory dnia, preferencji lub motywów ustawionych przez użytkownika oraz innych parametrów. Możesz też ustawić styl paska stanu, tak jak w podanych niżej przykładach.
Upewnij się, że treść aplikacji rozciąga się na cały ekran – od krawędzi do krawędzi jest wymagana. Używaj przezroczystych pasków systemowych z treściami od krawędzi do krawędzi, jak pokazano w tym przykładzie.
Po otrzymaniu powiadomienia na pasku stanu pojawia się zwykle ikona. Informuje to użytkownika, że w panelu powiadomień może coś zobaczyć. Może to być ikona lub symbol Twojej aplikacji reprezentujące kanał. Zobacz Projekt powiadomień.
Ustaw styl paska stanu
Dopasuj tło paska stanu do motywu aplikacji, ustawiając własny kolor lub styl oraz ustaw przezroczystość i przezroczystość.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Jeśli ręcznie ustawiasz kolor tła, możesz opcjonalnie zmienić styl zawartości paska stanu na jasny lub ciemny, aby uzyskać optymalny kontrast.
Wycięcia w ekranie i pasek stanu
Wycięcie w ekranie to na niektórych urządzeniach obszar, który rozszerza się w ekran, aby zapewnić miejsce na czujniki z przodu. Może to wpływać 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 pozwala użytkownikom sterować nawigacją za pomocą opcji Wstecz, Ekran główny i Przegląd:
- Powrót powoduje powrót bezpośrednio do poprzedniego widoku.
- Strona główna zostanie przeniesiona z aplikacji na ekran główny urządzenia.
- Przegląd pokazuje, które aplikacje są otwarte i zostały niedawno otwarte.
Użytkownicy mają do wyboru różne konfiguracje pasków nawigacyjnych, w tym nawigację przy użyciu gestów (zalecane) i nawigację przy użyciu 3 przycisków.
Nawigacja przy użyciu gestów
Wprowadzona w Androidzie 10 (poziom interfejsu API 29) nawigacja przy użyciu gestów jest zalecanym typem nawigacji, ale nie można zastąpić preferencji użytkownika. Nawigacja przy użyciu gestów nie używa przycisków Wstecz, Home i Przegląd. Zamiast tego wyświetla się uchwyt jednym gestem umożliwiającym angażowanie. Aby przejść do ekranu głównego, przesuń palcem od lewej lub prawej krawędzi ekranu, aby przejść wstecz lub do przodu, albo od dołu do góry, aby przejść na stronę główną. Przesuwanie palcem w górę i przytrzymywanie 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 zadbać o komfort użytkowników, uwzględnij nawigację przy użyciu gestów przez:
- Obsługa treści od początku do końca.
- Unikaj dodawania interakcji lub docelowych elementów dotykowych w elementach nawigacyjnych przy użyciu gestów.
Przeczytaj o implementowaniu nawigacji przy użyciu gestów.
Nawigacja przy użyciu 3 przycisków
Nawigacja przy użyciu 3 przycisków obejmuje 3 przyciski Wstecz, Ekran główny i Przegląd.
Inne odmiany paska nawigacyjnego
W zależności od wersji Androida i urządzenia użytkownicy mogą mieć dostęp do innych konfiguracji paska nawigacyjnego. Np. w nawigacji przy użyciu dwóch przycisków znajdują się dwa przyciski: Ekran główny i Wstecz.
Ustaw styl nawigacji
Przykład poniżej pokazuje, jak wdrożyć styl nawigacji.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android zapewnia wizualną ochronę interfejsu w trybie nawigacji gestami lub w trybach przycisków.
Tryb nawigacji przy użyciu gestów: system stosuje dynamiczną adaptację kolorów, w której zawartość pasków systemowych zmienia kolor odpowiednio do treści, która znajduje się za nimi. W poniższym przykładzie uchwyt na pasku nawigacyjnym zmieni się na ciemny kolor, jeśli znajdzie się on nad jasnymi treściami, i na odwrót.
Rys. 13. Dynamiczne dostosowywanie kolorów Tryby przycisku: system stosuje przezroczysty pasek za paskami systemowymi (w przypadku interfejsu API na poziomie 29 lub wyższym) lub przezroczysty pasek systemowy (w przypadku interfejsu API na poziomie 28 lub niższym).
Rys. 14. Dynamiczne dostosowywanie kolorów, gdzie słupki systemowe zmieniają kolor w zależności od treści znajdującej się za nimi
Klawiatura i nawigacja
Każdy typ nawigacji prawidłowo reaguje na klawiaturę ekranową, umożliwiając użytkownikowi wykonanie różnych czynności, takich jak zamknięcie, czy nawet zmiana typu klawiatury. Aby przejście klawiatury było płynne, użyj funkcji WindowInsetsAnimationCompat, aby zapewnić płynne przejście w aplikacji za pomocą przesuwania klawiatury w górę i w dół.
Tryb imersji
Możesz ukryć paski systemowe, jeśli chcesz korzystać z trybu pełnoekranowego, na przykład gdy użytkownik ogląda film. Użytkownik powinien nadal mieć możliwość kliknięcia słupków systemu i interfejsu, co pozwala poruszać się po elementach sterujących systemu lub wchodzić z nimi w interakcję. Dowiedz się więcej o projektowaniu pod kątem trybów pełnoekranowych lub ukrywanie pasków systemowych w trybie pojemnym.