Průsvitné systémové panely správným způsobem – napříč úrovněmi API a motivy

BY admin
|

Kreslení od okraje k okraji pomocí průsvitných stavových a navigačních panelů ve verzi v21+ s tmavými a světlými motivy.

Tento článek předpokládá, že jste již prošli kapitolu Navigace gesty – kreslení od okraje k okraji (I)

Protože chceme, aby se obsah vykresloval za systémovými pruhy, znamená to, že

  1. Potřebujeme průsvitné
  2. Potřebujeme buď tmavé, nebo světlé šrámy pro navigační a stavový pruh podle aktuálního tématu.

Možnost

  • Plně konfigurovatelný statusBarColor
    Jsme však omezeni použitím tmavších barev, protože ikony statusBaru zůstávají v bílé barvě.
  • windowTranslucentStatus true přepíše statusBarColor a použije pevný tmavý rámeček, který nelze změnit.
  • Plně konfigurovatelný navigationBarColor
    Jsme však omezeni na použití tmavších barev, protože navigační tlačítka zůstávají bíle zbarvená.
  • windowTranslucentNavigation true přepíše navigationBarColor a použije pevný tmavý rámeček, který nelze změnit.
  • Ikony stavového řádku &tlačítka navigačního řádku zůstanou vždy světlé.

v23+

  • windowLightStatusBar
    Povolí, aby ikony stavového řádku byly tmavé

v27+

  • windowLightNavigationBar
    Povolí, aby tlačítka navigačního řádku byla tmavá.

Řešení

Poznámka: Budeme používat průhlednou barvu statusBarColor. Protože místo toho použijeme k obarvení stavového řádku AppBar. Protože AppBar pokrývá plochu statusBaru, mělo by stačit nastavit příslušné pozadí přímo na AppBar.

Ve vaší implementaci to může být libovolné zobrazení, které je nahoře. Pokud v horní části obrazovky žádné zobrazení není , můžete místo toho použít atribut statsuBarColor. Dá to stejné výsledky.

Základní hodnoty:

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:

  • Překopeme windowTranslucentStatus a windowTranslucentNavigation, protože systém použije tmavý šramot, pokud je použijeme.
  • Ikony StatusBar a NavigationBar zůstanou bíle zbarvené.
  • To znamená, že můžeme použít pouze tmavé pozadí/skripty.

Máme zde 2 možnosti:

Použít různé pozadí pro tmavé a světlé téma.

V případě tmavého tématu bude barvaPovrch tmavá/černá. Podobnou barvu můžeme použít i pro systemBars.
V případě světlého tématu bude colorSurface světlá/bílá. Podobnou barvu nemůžeme použít pro systémové lišty, protože ikony jsou bílé.

Zásadně nemůžeme ve verzi v21-22 dobře zpracovat systémové lišty se světlým tématem. Takže nám zbývá použít pouze tmavé pozadí .

Použít stejné pozadí pro tmavá i světlá témata.

Můžeme pracovat tak, že použijeme tmavé pozadí pro tmavá i světlá témata.

Výsledkem bude, že tmavé téma bude zářit.

V případě světlého tématu:
Protože tento tmavý šramot bude aplikován i na AppBar (pokud za ním kreslíme, což kreslíme!), budeme muset pro AppBar použít ThemeOverlay.Dark. Jinak budeme mít tmavý text na tmavém pozadí.

values-night

v23 – v26:

U statusBaru můžeme být plně flexibilní, protože máme možnost nechat ikony stavového řádku ztmavnout.

  • Pro světlé téma budeme mít světlý status_bar_scrim a tmavý nav_bar_scrim (protože ikony navigace nemohou být tmavé).
  • Pro tmavé téma bude values-night přepisovat status_bar_scrim na tmavý a nav_bar_scrim bude následovat status_bar_scrim, aby byl také tmavý.
  • Také musíme zabránit tomu, aby náš Widget.AppTheme.AppBar byl vždy tmavý.

hodnoty-v23

v27+:

Můžeme být s navigačním panelem navigationBar plně flexibilní, protože nyní máme možnost, aby ikony navigačního panelu byly tmavé.
Protože values-v23 používá jiný status_bar_scrim a nav_bar_scrim pro světlé téma. Zde se musíme ujistit, že jsou oba stejné (Oba jsou světlé pro světlé téma a oba jsou tmavé pro tmavé téma).

Jen musíme zajistit, aby nav_bar_scrim opět následoval status_bar_scrim, a máme hotovo.

values-v27

Celý kód najdete zde: https://github.com/gaurav414u/MoviesInsetsDemo