Áttetsző SystemBarok a megfelelő módon – API-szinteken és témákon keresztül

BY admin
|

Az áttetsző állapot- és navigációs sávok élről élre történő rajzolása v21+ verzióban, sötét és világos témákkal.

Ez a cikk feltételezi, hogy már végigvetted a Gesture Navigation- Going Edge to Edge (I)

Mivel azt akarjuk, hogy a tartalom a rendszersávok mögé rajzolódjon, ez azt jelenti, hogy

  1. Áttetszőre van szükségünk
  2. Sötét vagy világos sávokra van szükségünk a navigációs sáv és a statusBar számára az aktuális témának megfelelően.

Capability

  • Teljesen konfigurálható statusBarColor
    De csak sötétebb színeket használhatunk, mivel a statusBar ikonok fehér színűek maradnak.
  • windowTranslucentStatus true felülírja a statusBarColor-t és egy fix sötét sávot alkalmaz, amely nem módosítható.
  • Teljesen konfigurálható navigationBarColor
    De korlátozva vagyunk sötétebb színek használatára, mivel a navigációs gombok fehér színűek maradnak.
  • windowTranslucentNavigation true felülírja a navigationBarColor-t és egy fix sötét sávot alkalmaz, amely nem módosítható.
  • A státuszsáv ikonjai & a navigációs sáv gombjai mindig világosak maradnak.

v23+

  • windowLightStatusBar
    Engedélyezi, hogy a státuszsáv ikonjai sötétek legyenek

v27+

  • windowLightNavigationBar
    A navigációs sáv gombjai sötétek legyenek.

Solution

Figyelem: átlátszó statusBarColor színt fogunk használni. Mivel ehelyett az AppBar-t fogjuk használni a statusBar színezésére. Mivel az AppBar lefedi a statusBar területét, elég, ha közvetlenül az AppBar-ra állítjuk a vonatkozó hátteret.

A megvalósításban ez lehet bármelyik nézet, amelyik felül van. Ha nincs nézet a képernyő tetején , akkor ehelyett használhatja a statsuBarColor attribútumot. Ez ugyanazt az eredményt fogja adni.

Bázisértékek:

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:

  • A windowTranslucentStatus és windowTranslucentNavigation árokba árok, mivel a rendszer sötét sávot fog alkalmazni, ha ezeket használjuk.
  • A statusBar és a navigationBar ikonok fehér színűek maradnak.
  • Ez azt jelenti, hogy csak sötét hátteret/szegélyt használhatunk.

Itt 2 lehetőségünk van:

Sötét és világos témákhoz különböző hátteret használunk.

Sötét téma esetén a colorSurface sötét/fekete lesz. Hasonló színt használhatunk a systemBarok számára is.
Fényes téma esetén a colorSurface világos/fehér lesz. A systembars esetében nem tudunk hasonló színt használni, mivel az ikonok fehér színűek.

A v21-22-es verzióban alapvetően nem tudjuk jól kezelni a világos témájú systembars-t. Így csak a sötét hátterek használatával maradunk .

Egyforma hátteret használjunk a sötét és világos témákhoz.

Azzal tudunk dolgozni, hogy sötét hátteret használunk a sötét és világos témákhoz.

Eredményképpen a Sötét téma fog ragyogni.

Fényes téma esetén:
Mivel ez a sötét sáv az AppBarra is vonatkozik (ha mögé rajzolunk, márpedig rajzolunk!), ezért az AppBarhoz egy ThemeOverlay.Dark-ot kell használnunk. Különben sötét szövegünk lesz sötét háttéren.

values-night

v23 – v26:

A statusBarral teljesen rugalmasak lehetünk, mivel lehetőségünk van arra, hogy az állapotsor ikonjai sötétek legyenek.

  • A világos téma esetén lesz egy világos status_bar_scrim és egy sötét nav_bar_scrim (mivel a navigációs ikonok nem lehetnek sötétek).
  • Sötét téma esetén a values-night felülírja a status_bar_scrim-et, hogy sötét legyen, és a nav_bar_scrim követi a status_bar_scrim-et, hogy szintén sötét legyen.
  • Meg kell akadályoznunk azt is, hogy a Widget.AppTheme.AppBar mindig sötét témájú legyen.

értékek-v23

v27+:

A navigationBarral teljesen rugalmasak lehetünk, mivel most már van lehetőségünk arra, hogy a navigációs sáv ikonjai sötétek legyenek.
Mert a values-v23 más status_bar_scrim-et és más nav_bar_scrim-et használ a light témához. Itt meg kell győződnünk arról, hogy mindkettő ugyanaz (mindkettő világos a világos témához, és mindkettő sötét a sötét témához).

Elég, ha a nav_bar_scrim ismét követi a status_bar_scrim-et, és kész is vagyunk.

values-v27

A teljes kód itt található: https://github.com/gaurav414u/MoviesInsetsDemo