Paski systemowe Androida

Pasek stanu i pasek nawigacyjny są razem nazywane paskami systemowymi. Wyświetlane na nich ważne informacje, takie jak poziom naładowania baterii, godzina alertów powiadomień i umożliwiają bezpośrednią interakcję z urządzeniem z dowolnego miejsca.

Musisz wziąć pod uwagę widoczność słupków systemowych, niezależnie od tego, interfejsu użytkownika do interakcji z systemem operacyjnym Android, metod wprowadzania i innych możliwości urządzenia. Utrzymuj słupki systemowe na górze większości warstw, aby zapewnić które są uwzględniane.

Ilustracja 1. Obrazy pod paskami systemu

Wnioski

  • W projektach uwzględnij paski systemowe, aby uwzględnić bezpieczne strefy UI interakcje, 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.

  • Zadbaj o przezroczystość pasków systemowych i rozmieść aplikację na pełnym ekranie. z obsługą interfejsu pod słupkami, aby zapewnić pełną wygodę korzystania z aplikacji.

  • Unikaj dodawania gestów dotykowych oraz przeciągania elementów między elementami gestów. ich konflikt z nawigacją od krawędzi do krawędzi i gestami.

    Ilustracja 2. Wstawia gesty systemowe. Nie dotykaj kranu w tych obszarach

Umieść treść za paskami systemowymi

Dzięki funkcji od krawędzi do krawędzi Android wyświetla interfejs pod paskami systemowymi co da im jeszcze większe możliwości. Zalecamy korzystanie z technologii brzegowej do krawędzi, ponieważ Użytkownicy często proszą o to, aby były przezroczyste. (Przeczytaj, jak obsługują format edge-to-edge).

Aplikacja może rozwiązać problem nakładania się treści, reagując na zestawy. Wstawki – opis w jakim stopniu treść aplikacji musi zostać dopełniona, aby uniknąć nakładania się elementów interfejsu systemu operacyjnego Android, takich jak pasek nawigacyjny czy pasek stanu, lub funkcji urządzeń fizycznych, takich jak wycięcia w ekranie.

Podczas projektowania treści od krawędzi do krawędzi pamiętaj o tych typach wkładek przypadki:

  • Wcięcia pasków systemowych mają zastosowanie do interfejsu, który można kliknąć i który nie powinien wizualne przysłonięte paskami systemowymi.
  • Zestawy gestów systemowych dotyczą obszarów nawigacji przy użyciu gestów w systemie. 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 powiadomienia cieni.

Rys. 3. Wyróżniony obszar paska stanu u góry paska aplikacji

Pasek stanu może wyglądać różnie w zależności od kontekstu, pory dnia ustawione przez użytkownika preferencje lub motywy oraz inne parametry. Możesz też określić stylu paska stanu, jak w przykładach poniżej.

Ilustracja 4. Pasek stanu w jasnym i ciemnym motywie.

Upewnij się, że treść aplikacji rozciąga się na cały ekran (od krawędzi do krawędzi) Używaj przezroczystych pasków systemowych z treściami od krawędzi do krawędzi, jak widać w tabeli z tego przykładu.

Rys. 5. Przezroczyste paski przedstawiające odnowiona funkcja, która doskonale sprawdza się w przypadku treści. przez wykorzystanie największej ilości miejsca na ekranie.


Rysunek 6. Dopasuj styl pasków systemowych do treści lub dopasuj je do marki. Nie pozostawiaj na paskach systemowych wartości domyślnych atrybutów.

Po otrzymaniu powiadomienia na pasku stanu pojawia się zwykle ikona. Ten informuje użytkownika, że w panelu powiadomień może coś zobaczyć. Może to być ikona lub symbol Twojej aplikacji reprezentujące kanał. Zobacz Wygląd powiadomień.

Rysunek 7. Ikona powiadomień na pasku stanu

Ustaw styl paska stanu

Dopasuj tło paska stanu do motywu aplikacji, używając niestandardowego koloru czy styl, a także ustawienia przezroczystości i przezroczystości.

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

Jeśli ręcznie ustawiasz kolor tła, możesz opcjonalnie dodać styl do stanu aby uzyskać optymalny kontrast.

Wycięcia w ekranie i pasek stanu

Wycięcie w ekranie to na niektórych urządzeniach wycięcie w ekranie z miejscem na czujniki z przodu. Może 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.

Rys. 8. Przykłady wycięć w ekranie

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 mogą wybierać spośród różnych konfiguracji pasków nawigacyjnych, w tym gestów nawigacja (zalecana) i nawigacja przy użyciu 3 przycisków.

Nawigacja przy użyciu gestów

Wprowadzona w Androidzie 10 (poziom interfejsu API 29) zalecana jest nawigacja przy użyciu gestów typ nawigacji, ale nie możesz zastąpić preferencji użytkownika. Gest nawigacja nie używa przycisków Wstecz, Home i Przegląd. Zamiast tego wyświetla się uchwyt do afordancji. Aby wejść w interakcję, przesuń palcem od lewej lub prawą krawędzi ekranu, aby przejść wstecz i do przodu, lub w górę od dołu w domu. Przesuwanie palcem w górę i przytrzymywanie otwiera przegląd.

Nawigacja przy użyciu gestów to bardziej skalowalny wzorzec nawigacji na urządzeniach mobilnych i większych ekranach. Aby zapewnić użytkownikom najlepsze wrażenia, weź pod uwagę nawigowanie przy użyciu gestów według:

  • 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.

Rys. 9. Pasek nawigacyjny uchwytu 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.

Rys. 10. Pasek nawigacyjny z 3 przyciskami

Inne odmiany paska nawigacyjnego

W zależności od wersji Androida i urządzenia inne konfiguracje paska nawigacyjnego mogą udostępnić użytkownikom. Na przykład nawigacja przy użyciu 2 przycisków umożliwia Przyciski ekranu głównego i Wstecz.

Rys. 11. Pasek nawigacyjny z 2 przyciskami

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 obsługuje w całości wizualną ochronę interfejsu za pomocą gestów w trybie nawigacji czy trybach przycisków.

  • Tryb nawigacji przy użyciu gestów: system stosuje dynamiczną adaptację kolorów. którego kolor pasków systemowych zmienia kolor w zależności od zawartości, za nimi. W poniższym przykładzie nick na pasku nawigacyjnym zmieni kolor na ciemny, jeśli zostanie umieszczony nad jasnymi treściami, i na odwrót.

    Rysunek 12. Dynamiczne dostosowywanie kolorów
  • Tryby przycisków: system wyświetla za nim półprzezroczystą planszę. słupki (dla poziomu API 29 lub nowszego) lub przezroczysty pasek systemowy (dla poziomu interfejsu API) 28 lub mniej).

    Rys. 13. Dynamiczna adaptacja kolorów, gdy są słupki systemowe Zmieniają kolor w zależności od tego, co znajduje się za nim

Klawiatura i nawigacja

Rys. 14. Klawiatura ekranowa z paskami nawigacyjnymi

Każdy typ nawigacji prawidłowo reaguje na klawiaturę ekranową na pozwalają użytkownikowi na wykonywanie takich czynności jak zamknięcie lub nawet zmiana ustawienia typu klawiatury. Aby zapewnić płynne przejście klawiatury, przejście zsynchronizowane przez przejście aplikacji przesuwaniem klawiatury od dołu do góry ekranu, użyj klawiszy WindowInsetsAnimationCompat

Tryb imersji

Rysunek 15. Pełny ekran w trybie pojemnym na urządzeniu mobilnym o orientacji poziomej

Możesz ukryć paski systemowe, gdy np. korzystasz z pełnego ekranu gdy użytkownik ogląda film. Użytkownik powinien nadal mieć możliwość kliknięcia wyświetlić paski systemowe i interfejs, aby umożliwić nawigację lub interakcję z elementami sterującymi systemu. Dowiedz się więcej o projektowaniu pod kątem trybów pełnoekranowych lub przeczytaj, jak Ukryj paski systemowe w trybie pojemnym.