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.
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.
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ń.
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.
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 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.
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
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.
- 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.
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. 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 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 jasną treścią, i odwrotnie.
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.
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.
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.
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
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.