BottomNavigationView - Schatten- und Ripple-Effekt
Ich war wirklich glücklich, als BottomNavigationView vor einer Woche veröffentlicht wurde, aber ich Ich bin mit einigen Problemen konfrontiert, die es mir unmöglich machen, es zu lösen. Ich sehe einen Schatten über der BottomNavigationView, genau wie die Google Fotos Android App uns zeigt:
Wenn wir auf einen Google Fotos-Menüpunkt tippen, sehen wir einen Welleneffekt, der wie das Symbol und die Textfarbe (wenn ausgewählt) blau gefärbt ist.
Bei der Implementierung der von Google bereitgestellten Lösung wird nur eine graue Welleneffektfarbe angezeigt, und schlimmer noch, sie wird nicht angezeigt, wenn wir die Hintergrundfarbe der unteren Navigationsansicht ( design:itemBackground="..." ) ändern.
Jemand weiß, wie man es löst?
5 Antworten
Folgendes habe ich erreicht:
Ich habe eine Demo auf GitHub erstellt, um Ihnen zu helfen.
Verwenden Sie zunächst die neueste Support-Bibliothek compile "com.android.support:design:$SUPPORT_VERSION"
Es funktioniert nur, wenn Sie die weiße Hintergrundfarbe android:background="@android:color/white"
Hinweis: Dieser Ripple-Effekt verschwindet, wenn Sie app:itemBackground property verwenden oder in Ihrem Fall design:itemBackground="..." , also entfernen Sie ihn einfach.
Handhabung aktiviert / deaktiviert:
Sie müssen Selektor-Datei erstellen:
%Vor% Wenn Sie den standardmäßigen Grauripple-Effekt ändern möchten, ändern Sie colorControlHighlight proproperty in AppTheme so, dass er wie folgt aussieht:
Verwenden Sie 26% Alpha für farbige Wellen.
%Vor%- Für Schatten verwenden Sie die Höhe in Ihrer BottomNavigationView
app:elevation="8dp". - Und für Ripples Effect müssen Sie nur
app:itemBackgroundentfernen undandroid:backgroundauf eine weiße Farbe setzen wie dasandroid:background="@android:color/white"
Vollständiges Beispiel unten:
%Vor%Vielleicht möchten Sie Ihrer Schaltfläche einen Selektor hinzufügen wie:
%Vor%/res/drawable/my_selector.xml:
%Vor%Lesen Sie mehr: RippleDrawable
Nimm dieses FrameLayout , das Schatten zeichnet, und diesen Farbverlauf Zeichnungs-XML :
Wickle dein BottomNavigationView in dieses Layout ein wie:
Leider wird der ursprüngliche Schatten unter der Ansicht gezeichnet, wir müssen diesen Aufwärtsschatten selbst nachahmen.
Vergessen Sie nicht, android:elevation="8dp" auch für DrawShadowFrameLayout hinzuzufügen.
Ein weiterer Ansatz besteht in der Erweiterung BottomNavigationView und dem Überschreiben von draw() , um dasselbe zu erreichen. Dies wird Ihnen helfen, ein FrameLayout in Ihrer Ansichtshierarchie zu verlieren.
Dies ist ein Problem in der Design-Bibliothek und wurde gemeldet hier .
Der Schatten-Teil dieser Frage wurde bereits aufgelöst. Sie sollten daher Ihre Gradle-Abhängigkeiten für die Support- und Design-Bibliothek auf 25.0.1 aktualisieren.
Die Google-Ingenieure bestehen darauf, dass das Problem mit dem Ripple-Effekt ebenfalls behoben wurde, aber ich konnte es nicht richtig funktionieren lassen.
Ein Beispiel, wie das XML für BottomNavigationView aussehen könnte, sehen Sie hier:
Zeigen Sie das Problem an, um ihm Aufmerksamkeit zu verleihen.
Tags und Links android shadow bottomnavigationview