Pasek stanu, pasek podpisów i pasek nawigacji są razem nazywane paskami systemowymi. 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.
Ważne jest, aby uwzględniać widoczność pasków systemowych, niezależnie od tego, czy projektujesz interfejs do interakcji z systemem operacyjnym Android, metodami wprowadzania czy innymi funkcjami urządzenia.
Wnioski
Podczas projektowania aplikacji uwzględniaj paski systemowe. Weź pod uwagę bezpieczne strefy interfejsu, interakcje systemowe, metody wprowadzania danych, wycięcia na wyświetlaczu, paski stanu, paski napisów, paski nawigacyjne i inne funkcje urządzenia.
Utrzymuj przezroczystość lub półprzezroczystość paska stanu i paska nawigacyjnego oraz rysuj treści za tymi paskami, aby zajmowały całą powierzchnię ekranu.
Pasek stanu
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ń. Style paska stanu mogą być przezroczyste lub półprzezroczyste.
Ikony na pasku stanu
Ikony na pasku stanu mogą wyglądać inaczej w zależności od kontekstu, pory dnia, preferencji lub motywów ustawionych przez użytkownika oraz innych parametrów. Więcej informacji znajdziesz w artykule Ikony na pasku systemowym.
Gdy nadejdzie powiadomienie, na pasku stanu zwykle pojawia się ikona. Sygnalizuje to użytkownikowi, że w panelu powiadomień jest coś do zobaczenia. Może to być ikona aplikacji lub symbol reprezentujący kanał. Zobacz Projekt powiadomień.
Ustawianie stylu paska stanu
Ustaw pasek stanu jako przezroczysty lub półprzezroczysty, aby treść aplikacji zajmowała cały ekran. Następnie ustaw styl ikon paska systemowego, aby miały odpowiedni kontrast.
W Androidzie 15 wyświetlanie bez ramki jest wymuszane, co sprawia, że pasek stanu jest domyślnie przezroczysty. Wywołaj metodę enableEdgeToEdge(), aby umożliwić zgodność wsteczną.
Na poniższym obrazie po lewej stronie pasek stanu jest przezroczysty, a zielone tło ikonyTopAppBar jest widoczne za nim.
Przezroczyste paski stanu są idealne, gdy interfejs nie pojawia się pod paskiem stanu lub obraz jest rysowany pod paskiem stanu. Półprzezroczyste paski stanu są idealne, gdy interfejs użytkownika przewija się pod paskiem stanu. Więcej informacji o ochronie gradientu znajdziesz w artykule Projektowanie od krawędzi do krawędzi.
Pasek nawigacyjny
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.
- Home zamyka aplikację i przechodzi na ekran główny urządzenia.
- W sekcji Przegląd znajdziesz aktywne aplikacje i ostatnio zamknięte aplikacje, które nie zostały odrzucone.
Użytkownicy mogą wybierać spośród różnych konfiguracji paska nawigacyjnego, w tym nawigacji gestami (zalecana) i nawigacji przy użyciu 3 przycisków. Aby zapewnić jak najlepsze wrażenia, uwzględnij różne typy 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 przesuwają palcem od lewej lub prawej krawędzi ekranu, aby wrócić, a od dołu, aby przejść do ekranu głównego. Przesunięcie palcem w górę i przytrzymanie otwiera przegląd.
Nawigacja gestami to bardziej skalowalny wzorzec nawigacji, który można stosować na urządzeniach mobilnych i większych ekranach. Aby zapewnić użytkownikom jak największy komfort, uwzględnij nawigację gestami, wykonując te czynności:
- Obsługa treści od krawędzi do krawędzi.
- Unikaj dodawania interakcji i obszarów docelowych pod wstawkami nawigacji gestami.
Więcej informacji znajdziesz w artykule Dodawanie obsługi nawigacji gestami.
Nawigacja przy użyciu 3 przycisków
Nawigacja przy użyciu 3 przycisków zapewnia 3 przyciski: wstecz, ekran główny i przegląd.
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 zapewnia na przykład 2 przyciski ekranu głównego i Wstecz.
Ikony paska nawigacyjnego
Ikony na pasku nawigacyjnym mogą też wyglądać inaczej w zależności od preferencji lub motywów ustawionych przez użytkownika. Więcej informacji znajdziesz w artykule Ikony na pasku systemowym.
Ustawianie stylu paska nawigacyjnego
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 systemowych zmienia kolor w zależności od treści znajdujących się za nimi.
Tryb nawigacji przy użyciu gestów
Po kierowaniu na Androida 15 lub wywołaniu metody enableEdgeToEdge w Activity system rysuje przezroczysty pasek nawigacji przy użyciu gestów i stosuje dynamiczne dostosowywanie kolorów. W tym przykładzie uchwyt na pasku nawigacyjnym zmienia kolor na ciemny, jeśli znajduje się nad jasną treścią, i odwrotnie.
Zawsze zalecane są przezroczyste paski nawigacyjne oparte na gestach.
Tak
Nie
Tryby przycisków
Po kierowaniu na Androida 15 lub wywołaniu metody enableEdgeToEdge w Activity system stosuje półprzezroczystą nakładkę za paskami nawigacyjnymi przycisków, którą możesz usunąć, ustawiając wartość Window.setNavigationBarContrastEnforced() na false.
Zalecamy stosowanie przezroczystych pasków nawigacyjnych z 3 przyciskami, gdy u dołu ekranu znajduje się pasek aplikacji lub pasek nawigacyjny aplikacji, albo gdy interfejs nie przewija się pod paskiem nawigacyjnym 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 systemowego.
Używaj przezroczystej nawigacji 3-przyciskowej do przewijania treści. Więcej informacji o przezroczystym pasku nawigacyjnym znajdziesz w artykule Projektowanie od krawędzi do krawędzi.
Klawiatura i nawigacja
Każdy typ nawigacji odpowiednio reaguje na klawiaturę ekranową, aby umożliwić użytkownikowi wykonywanie działań, takich jak zamykanie lub nawet zmiana typu klawiatury. Aby zapewnić płynne przejście, które zsynchronizuje przejście aplikacji z przesuwaniem klawiatury w górę i w dół od dołu ekranu, użyj WindowInsetsAnimationCompat.
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 skierowane do przodu. Wycięcia na wyświetlaczu mogą się różnić w zależności od producenta. Zastanów się, jak wycięcia na wyświetlaczu będą współdziałać z treściami, orientacją i wyświetlaniem od krawędzi do krawędzi.
Tryb pojemny
Paski systemowe 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 systemowe, oraz poruszania się po elementach sterujących systemu i wchodzenia z nimi w interakcje. Dowiedz się więcej o projektowaniu na potrzeby trybów pełnoekranowych lub przeczytaj, jak ukryć paski systemowe w trybie pełnoekranowym.