Właściwy sposób na półprzezroczyste paski systemowe – na wszystkich poziomach API i w różnych motywach

BY admin
|

Do rysowania od krawędzi do krawędzi z półprzezroczystymi paskami stanu i nawigacji w wersji v21+ z ciemnymi i jasnymi motywami.

Ten artykuł zakłada, że przeszedłeś już przez Gesture Navigation- Going Edge to Edge (I)

Ponieważ chcemy, aby zawartość była rysowana za paskami systemowymi, oznacza to, że

  1. Potrzebujemy półprzezroczystości
  2. Potrzebujemy albo ciemnych, albo jasnych scrimów dla paska nawigacji i statusBar, zgodnie z bieżącym motywem.

Capability

  • W pełni konfigurowalny statusBarColor
    Jesteśmy jednak ograniczeni do używania ciemnych kolorów, ponieważ ikony paska statusu pozostają białe.
  • windowTranslucentStatus true zastąpi statusBarColor i zastosuje stałą ciemną obwódkę, której nie można zmienić.
  • W pełni konfigurowalny navigationBarColor
    Ale jesteśmy ograniczeni do używania ciemniejszych kolorów, ponieważ przyciski nawigacyjne pozostają w białym kolorze.
  • windowTranslucentNavigation true zastąpi navigationBarColor i zastosuje stałą ciemną obwódkę, której nie można zmienić.
  • Ikony paska stanu &przyciski paska nawigacyjnego zawsze pozostają jasne.

v23+

  • windowLightStatusBar
    Zezwala na to, aby ikony paska stanu były ciemne

v27+

  • windowLightNavigationBar
    Zezwala na to, aby przyciski paska nawigacyjnego były ciemne.

Rozwiązanie

Uwaga: Będziemy używać przezroczystego koloru statusBarColor. Ponieważ zamiast tego użyjemy AppBar, aby pokolorować statusBar. Ponieważ AppBar pokrywa obszar statusBar, powinno wystarczyć ustawienie odpowiedniego tła na AppBar bezpośrednio.

W twojej implementacji może to być dowolny widok, który znajduje się na górze. Jeśli nie ma widoku na górze ekranu , możesz zamiast tego użyć atrybutu statsuBarColor. Da to takie same rezultaty.

Wartości bazowe:

AppBarLayout:

<com.google.android.material.appbar.AppBarLayout
android:id="@+id/moviesAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/status_bar_scrim"
android:theme="@style/Widget.AppTheme.AppBar"
app:elevation="2dp"
app:layout_constraintTop_toTopOf="parent"> <androidx.appcompat.widget.Toolbar
android:id="@+id/moviesToolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:title="Popular Movies" />
</com.google.android.material.appbar.AppBarLayout>

v21 – v22:

  • Odrzucamy windowTranslucentStatus i windowTranslucentNavigation, ponieważ system zastosuje ciemną warstwę, jeśli ich użyjemy.
  • Ikony paska stanu i nawigacji pozostają białe.
  • To znaczy, że możemy używać tylko ciemnych teł/obramowań.

Mamy tutaj 2 opcje:

Użyj różnych teł dla ciemnych i jasnych motywów.

W przypadku ciemnego motywu kolorPowierzchni będzie ciemny/czarny. Możemy użyć podobnego koloru również dla SystemBars.
W przypadku jasnego motywu, colorSurface będzie light/white. Nie możemy użyć podobnego koloru dla pasków systemowych, ponieważ ikony są białe.

Podstawowo, nie możemy obsługiwać jasnych pasków systemowych bardzo dobrze na v21-22. Więc pozostało nam używanie tylko ciemnych teł .

Używaj tego samego tła dla ciemnych i jasnych motywów.

Możemy pracować po swojemu używając ciemnych teł dla ciemnych i jasnych motywów.

W rezultacie, ciemny motyw będzie błyszczał.

W przypadku jasnego motywu:
Ponieważ ciemny scrim będzie również zastosowany do AppBar (jeśli rysujemy za nim, co robimy!), będziemy musieli użyć ThemeOverlay.Dark dla AppBar. W przeciwnym razie będziemy mieli ciemny tekst na ciemnym tle.

values-night

v23 – v26:

Możemy być w pełni elastyczni ze statusBarem, ponieważ mamy możliwość sprawienia, że ikony paska stanu będą ciemne.

  • Dla jasnego motywu, będziemy mieli jasny status_bar_scrim i ciemny nav_bar_scrim (ponieważ ikony nawigacji nie mogą być ciemne).
  • Dla ciemnego motywu, values-night zastąpi status_bar_scrim, aby był ciemny, a nav_bar_scrim będzie podążał za status_bar_scrim, aby również był ciemny.
  • Musimy również zapobiec temu, aby nasz Widget.AppTheme.AppBar był zawsze ciemny.

values-v23

v27+:

Możemy być w pełni elastyczni z navigationBar, jako że teraz mamy możliwość sprawienia, że ikony paska nawigacji będą ciemne.
Ponieważ values-v23 używa innego status_bar_scrim i nav_bar_scrim dla motywu light. Musimy się tutaj upewnić, że oba są takie same (oba są jasne dla motywu light i oba są ciemne dla motywu dark).

Musimy tylko sprawić, aby nav_bar_scrim ponownie podążał za status_bar_scrim i gotowe.

values-v27

Cały kod można znaleźć tutaj: https://github.com/gaurav414u/MoviesInsetsDemo