Ich arbeite an einem Android-Projekt und implementiere die Navigationsleiste. Ich lese gerade die neue Material Design Spec und die Material Design Checkliste durch .
Die Spezifikation besagt, dass der ausziehbare Bereich über allem anderen, einschließlich der Statusleiste, schweben und über der Statusleiste halbtransparent sein sollte.
Mein Navigationsbereich befindet sich über der Statusleiste, hat jedoch keine Transparenz. Ich habe den Code aus diesem SO- Beitrag befolgt, wie im Blog-Spot des Google-Entwicklers vorgeschlagen. Link oben Wie verwende ich DrawerLayout, um über die ActionBar / Symbolleiste und unter der Statusleiste anzuzeigen? .
Unten ist mein XML-Layout
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="@color/appPrimaryColour" />
</LinearLayout>
<LinearLayout android:id="@+id/linearLayout"
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:fitsSystemWindows="true"
android:background="#ffffff">
<ListView android:id="@+id/left_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"></ListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
Unten ist mein Apps-Thema
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/appPrimaryColour</item>
<item name="colorPrimaryDark">@color/appPrimaryColourDark</item>
<item name="colorAccent">@color/appPrimaryColour</item>
<item name="windowActionBar">false</item>
<item name="windowActionModeOverlay">true</item>
</style>
Unten ist mein Apps v21 Thema
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/appPrimaryColour</item>
<item name="colorPrimaryDark">@color/appPrimaryColourDark</item>
<item name="colorAccent">@color/appPrimaryColour</item>
<item name="windowActionBar">false</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
Unten ist meine onCreate-Methode
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
mDrawerLayout = (DrawerLayout)findViewById(R.id.my_drawer_layout);
mDrawerList = (ListView)findViewById(R.id.left_drawer);
mDrawerLayout.setStatusBarBackgroundColor(
getResources().getColor(R.color.appPrimaryColourDark));
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
{
LinearLayout linearLayout =
(LinearLayout)findViewById(R.id.linearLayout);
linearLayout.setElevation(30);
}
Unten ist ein Screenshot meiner Navigationsschublade, der zeigt, dass die Oberseite nicht halbtransparent ist
Antworten:
Der Hintergrund Ihrer Statusleiste ist weiß, der Hintergrund Ihrer Schublade
LinearLayout
. Warum? Sie sind EinstellungenfitsSystemWindows="true"
für IhreDrawerLayout
und dieLinearLayout
darin. Dies führtLinearLayout
dazu, dass Sie hinter der Statusleiste (die transparent ist) expandieren . So wird der Hintergrund für die Schublade in der Statusleiste weiß.Wenn Sie nicht möchten, dass sich Ihre Schublade hinter die Statusleiste erstreckt (Sie möchten einen halbtransparenten Hintergrund für die gesamte Statusleiste haben), können Sie zwei Dinge tun:
1) Sie können einfach jeden Hintergrundwert von Ihrem entfernen
LinearLayout
und den Hintergrund Ihres Inhalts darin einfärben. Oder2) Sie können
fitsSystemWindows="true"
von Ihrem entfernenLinearLayout
. Ich denke, dies ist ein logischerer und sauberer Ansatz. Sie vermeiden auch, dass ein Schatten unter die Statusleiste geworfen wird, in der sich Ihre Navigationsleiste nicht erstreckt.Wenn Sie möchten, dass sich Ihre Schublade hinter die Statusleiste erstreckt und über eine halbtransparente Überlagerung in Statusleistengröße verfügt, können Sie a
ScrimInsetFrameLayout
als Container für Ihren Schubladeninhalt (ListView
) verwenden und den Hintergrund der Statusleiste mithilfe von festlegenapp:insetForeground="#4000"
. Natürlich können Sie#4000
zu allem wechseln , was Sie wollen. Vergiss nichtfitsSystemWindows="true"
hier zu bleiben !Oder wenn Sie Ihren Inhalt nicht überlagern und nur eine Volltonfarbe anzeigen möchten, können Sie den Hintergrund Ihres Inhalts einfach
LinearLayout
auf alles einstellen , was Sie möchten. Vergessen Sie jedoch nicht, den Hintergrund Ihrer Inhalte separat festzulegen!EDIT: Sie müssen sich nicht mehr darum kümmern. Weitere Informationen zur Implementierung von Navigation Drawer / View finden Sie in der Design Support Library .
quelle
Sie müssen lediglich eine halbtransparente Farbe für die Statusleiste verwenden. Fügen Sie Ihrem v21-Thema die folgenden Zeilen hinzu:
Vergiss nicht, dass die
color
(Ressource) immer das Format haben muss#AARRGGBB
. Dies bedeutet, dass die Farbe auch den Alpha-Wert enthält.quelle
Warum nicht etwas Ähnliches verwenden?
Der obige Code verwendet die Alpha-Ressource in der
android:background
, um Transparenz in der Aktionsleiste anzuzeigen.Es gibt andere Möglichkeiten, dies durch Code zu tun, wie andere Antworten zeigen. Meine Antwort oben macht das Notwendige in der XML-Layout-Datei, die meiner Meinung nach leicht zu bearbeiten ist.
quelle
Alle hier genannten Antworten sind zu alt und zu lang. Die beste und kurze Lösung, die mit der neuesten Navigationsansicht funktioniert, ist
Dadurch wird die Farbe Ihrer Statusleiste beim Öffnen der Schublade in transparent geändert
Wenn Sie jetzt die Schublade schließen, müssen Sie die Farbe der Statusleiste wieder auf dunkel ändern. So können Sie dies tun.
und dann im Hauptlayout eine einzelne Zeile hinzufügen, dh
und Ihr Schubladenlayout wird so aussehen
und Ihre Navigationsansicht wird so aussehen
Ich habe es getestet und es funktioniert voll. Ich hoffe, es hilft jemandem. Dies ist vielleicht nicht der beste Ansatz, aber es funktioniert reibungslos und ist einfach zu implementieren. Markieren Sie es, wenn es hilft. Glückliche Codierung :)
quelle
Sie müssen Ihr Navigationsschubladenlayout in a einbinden
ScrimLayout
.A
ScrimLayout
zeichnet im Grunde ein halbtransparentes Rechteck über das Layout Ihrer Navigationsschublade. Um die Größe des Einschubs abzurufen, überschreibenfitSystemWindows
Sie einfach IhreScrimLayout
.Später überschreiben,
onDraw
um ein halbtransparentes Rechteck zu zeichnen.Eine Beispielimplementierung finden Sie in der Google IO App-Quelle. Hier können Sie sehen, wie es in der Layout-XML verwendet wird.
quelle
Wenn Sie möchten, befindet sich das Navigationsfeld über der Statusleiste und ist über der Statusleiste halbtransparent. Google I / O Android App Source bietet eine gute Lösung ( APK im Play Store werden nicht auf die letzte Version aktualisiert)
Zuerst benötigen Sie ein ScrimInsetFrameLayout
Ändern Sie dann in Ihrem XML-Layout diesen Teil
Ändern Sie LinearLayout wie folgt in Ihr ScrimInsetFrameLayout
quelle
ScrimInsetsView_insetForeground
Attribut setzen.android.support.design.internal.ScrimInsetsFrameLayout
aus der Support-BibliothekIch hatte eine ähnliche Funktion in meinem Projekt zu implementieren. Und um meine Schublade transparent zu machen, verwende ich einfach die Transparenz für Hex-Farben . Bei Verwendung von 6 Hex-Ziffern haben Sie 2 Hex-Ziffern für jeden Wert von Rot, Grün und Blau. Wenn Sie jedoch zwei zusätzliche Ziffern (8 hexadezimale Ziffern) eingeben, haben Sie ARGB (zwei Ziffern für den Alpha-Wert) (siehe hier ).
Hier sind die Hex-Opazitätswerte: für die 2 zusätzlichen Ziffern
Zum Beispiel: Wenn Sie eine hexadezimale Farbe (# 111111) haben, geben Sie einfach einen der Deckkraftwerte ein, um Transparenz zu erhalten. wie folgt: (# 11111100)
Meine Schublade deckt nicht die Aktionsleiste ab (wie Ihre), aber die Transparenz kann auch in diesen Fällen angewendet werden. Hier ist mein Code:
Und hier ist ein weiterer Artikel , der Ihnen helfen kann, die Alpha-Codes in hexadezimalen Farben zu verstehen.
quelle
Die vorhandenen Lösungen sind ziemlich veraltet. Hier ist die neueste Lösung, die perfekt auf AndroidX- oder Materialbibliotheken funktionieren sollte.
Fügen Sie
android:fitsSystemWindows="true"
der Stammansicht Ihres Layouts hinzu, das zufällig DrawerLayout für Ihren Fall ist.Dadurch wird die Ansicht angewiesen, den gesamten Bildschirm für Messung und Layout zu verwenden, wobei sich die Statusleiste überschneidet.
Fügen Sie Ihrem XML-Stil Folgendes hinzu
windowTranslucentStatus
macht die Statusleiste transparent undwindowDrawsSystemBarBackgrounds
weist die Statusleiste an, etwas darunter zu zeichnen, anstatt eine schwarze Leere zu sein.Rufen Sie an
DrawerLayout.setStatusBarBackground()
oderDrawerLayout.setStatusBarBackgroundColor()
in Ihrer HauptaktivitätDadurch wird DrawerLayout angewiesen, den Statusleistenbereich einzufärben.
quelle
Oben gute Lösungen, aber sie haben in meinem Fall nicht funktioniert,
Mein Fall: In der Statusleiste ist die gelbe Farbe bereits mit Stilen festgelegt. Sie ist nicht durchscheinend. und meine Navigationsschubladenfarbe ist weiß. Wenn ich jetzt meine Navigationsschublade zeichne, befindet sie sich immer hinter der Statusleiste und der Navigationsleiste, da auch die Farbe der Navigationsleiste festgelegt ist.
Ziel: Ändern der Statusleiste und der Farbe der Navigationsleiste beim Öffnen der Navigationsleiste und Wiederherstellen beim Schließen.
Lösung:
quelle
Alle Antworten hier sind sehr kompliziert. Lassen Sie mich Ihnen einfachen Code geben. Fügen Sie unter Ihrem AppTheme-Stil diese Codezeile hinzu, und Sie erhalten eine graue, halbtransparente Statusleiste, wenn Sie die Schublade öffnen.
das wird es funktionieren lassen.
quelle