Im vergangenen Jahr führte Google Material Design ein und es wurde klar, dass Bewegung und Animation zwei der auffälligsten Funktionen in modernen Android-Anwendungen sein werden. Google bot den Entwicklern jedoch keine einfache Lösung, um sie in Anwendungen zu integrieren. Infolgedessen wurden viele Bibliotheken entwickelt, um das Integrationsproblem zu lösen.
Während der diesjährigen Google I / O hat Google jedoch die Android Design Support Library eingeführt, um die Einführung von Material Design zu erleichtern. Dadurch können sich die Entwickler auf die Funktionen konzentrieren, die ihre Anwendungen einzigartig machen.
1. Regionen
In diesem Tutorial zeige ich Ihnen, wie Sie die in der Material Design-Spezifikation von Google gezeigten Bildlauftechniken implementieren. Bevor Sie beginnen, sollten Sie sich mit den verfügbaren scrollbaren Regionen in einer Android-Anwendung vertraut machen. In der folgenden Abbildung sehen Sie, dass es vier Regionen gibt.
Statusleiste
Hier werden Benachrichtigungen angezeigt und der Status der verschiedenen Gerätefunktionen wird angezeigt.
Werkzeugleiste
Die Symbolleiste wurde früher als Aktionsleiste bezeichnet. Es ist jetzt eine anpassbarere Ansicht mit denselben Funktionalitäten.
Tab / Suchleiste
In diesem optionalen Bereich werden die Registerkarten angezeigt, die den Inhalt Ihrer Anwendung kategorisieren. Lesen Sie mehr über die Verwendung von Registerkarten und die verschiedenen Möglichkeiten, diese in der Material Design-Spezifikation von Google anzuzeigen. Bei Bedarf können Sie es auch in der seitlichen Navigation von Google verwenden.
Flexibler Raum
Hier können Sie Bilder oder erweiterte Anwendungsleisten anzeigen.
In Bezug auf die Bildlauftechniken reagieren die Symbolleiste und die Registerkarte / Suchleiste, wenn der Inhalt Ihrer Anwendung gescrollt wird.
2. Projekteinrichtung
Um zu folgen, sollten Sie die neueste Version von Android Studio verwenden. Sie können es von der Android Developer-Website erhalten. Um diese Bildlauftechniken auszuprobieren, empfehle ich, ein neues Projekt zu erstellen (mit einem Mindest-API-Level von 15), da sich das Layout Ihrer Anwendung erheblich ändert.
Ich habe ein Starterprojekt zur Verfügung gestellt, das Sie von GitHub herunterladen können. Sie können das Starterprojekt als Ausgangspunkt verwenden und die Bildlauftechniken in Ihren eigenen Anwendungen verwenden. Lassen Sie uns zunächst die folgenden Abhängigkeiten zu Ihrem Projekt hinzufügen build.gradle Datei im App-Ordner:
Mit der ersten Abhängigkeit erhalten Sie die Android Design Support Library, die die neuen Klassen enthält, die wir für dieses Lernprogramm benötigen.
Mit der zweiten Abhängigkeit erhalten Sie die neueste Version von RecyclerView. Die im offiziellen Artikel zum Erstellen von Listen aufgelistete Version ist dieses Mal nicht nützlich.
Als Nächstes benötigen Sie einige Dummy-Daten, um diese Techniken auszuprobieren und die Daten zu füllen RecyclerView. Sie können sie selbst implementieren oder die Implementierung aus dem kopieren Anfangsaktivität Klasse im Starterprojekt.
3. Bildlaufverfahren 1
Diese Technik verbirgt den Symbolleistenbereich, wenn der Inhalt Ihrer Anwendung gescrollt wird. Sie können die Technik in Aktion im folgenden Video sehen.
Bei diesem Layout-Design können Sie sich Folgendes vorstellen:
Das Problem bei diesem Layout ist, dass Sie die Ereignisse selbst verwalten müssen, aber es wird schmerzlos sein, wenn Sie die neuen Klassen nutzen. Ändern wir es wie folgt:
In diesem neuen Layout können Sie Folgendes sehen:
das RelativesLayout wird durch a ersetzt KoordinatorLayout
das Werkzeugleiste ist in ein gehüllt AppBarLayout
das Werkzeugleiste und RecyclerView erhielt ein paar zusätzliche Attribute
Was sind diese neuen Klassen??
KoordinatorLayout
Dieses Layout ist ein neuer Container und ein Kompressor FrameLayout Dies bietet eine zusätzliche Kontrolle über Berührungsereignisse zwischen untergeordneten Ansichten.
AppBarLayout
Dieses Layout ist ein weiterer neuer Container, der speziell für die Implementierung vieler Funktionen des App Bar-Konzepts der Material Design-App konzipiert wurde. Denken Sie daran, wenn Sie es in einem anderen verwenden ViewGroup, Die meisten Funktionen funktionieren nicht.
Der Schlüssel zu dieser Bildlauftechnik und den meisten anderen Bildlaufverfahren, die wir besprechen werden, ist die KoordinatorLayout Klasse. Diese Sonderklasse kann Ereignisse von ihren untergeordneten Ansichten empfangen und an diese liefern, damit sie entsprechend reagieren können. Es ist als Stammcontaineransicht konzipiert.
Um diese Technik zu aktivieren, muss die App: Layoutverhalten Attribut gibt an, in welcher Ansicht die Ereignisse im ausgelöst werden Werkzeugleiste. In diesem Fall ist das die RecyclerView.
Das app: layout_scrollFlags Attribut des Werkzeugleiste zeigt der Ansicht an, wie sie reagieren soll.
app: layout_scrollFlags = "scroll | enterAlways"
Das app: layout_scrollFlags Attribut kann vier mögliche Werte haben, die kombiniert werden können, um den gewünschten Effekt zu erzielen:
scrollen
Dieses Flag sollte für alle Ansichten gesetzt werden, für die ein Scrollen außerhalb des Bildschirms erforderlich ist. Ansichten, die dieses Flag nicht verwenden, bleiben am oberen Bildschirmrand fixiert.
enterAlways
Dieses Flag stellt sicher, dass bei einem Bildlauf nach unten diese Ansicht sichtbar wird schnelle Rückkehr Muster.
enterAlwaysCollapsed
Wenn eine Sicht a erklärt hat minHöhe Wenn Sie dieses Flag verwenden, wird die Ansicht nur in der minimalen Höhe eingegeben (minimiert) und erst dann auf die volle Höhe erweitert, wenn die Bildlaufansicht ihren höchsten Punkt erreicht hat.
exitUntilCollapsed
Dieses Flag bewirkt, dass die Ansicht außerhalb des Bildschirms angezeigt wird, bis sie minimiert ist minHöhe wird erreicht).
Sie können das Projekt jetzt ausführen oder drücken Strg + R, und sehen Sie diese Technik in Aktion.
4. Bildlaufverfahren 2
Bei dieser Technik wird die Symbolleiste außerhalb des Bildschirms gescrollt, während der Bereich der Registerkartenleiste oben verankert bleibt. Sie können diese Technik in Aktion im folgenden Video sehen.
Für diese Technik werde ich das Layout der vorherigen Technik wiederverwenden und eine hinzufügen TabLayout neben dem anzeigen Werkzeugleiste, in der AppBarLayout.
Das TabLayout Ansicht bietet ein horizontales Layout für die Anzeige von Registerkarten. Sie können mit dem Tab eine beliebige Anzahl von Registerkarten hinzufügen neue Registerkarte Methode und stellen Sie ihren Verhaltensmodus mit der setTabMode. Beginnen wir mit dem Auffüllen der Registerkarten.
Durch Ändern des Wertes von app: layout_scrollFlags Attribut und Hinzufügen und Entfernen aus dem Werkzeugleiste und TabLayout, Sie können Animationen wie die in:
Google Play Store Die Symbolleiste wird ausgeblendet und die Registerkartenleiste bleibt sichtbar.
Foursquare wo die Registerkartenleiste außerhalb des Bildschirms blättert, während die Symbolleiste oben bleibt.
Spiel Musik wo sowohl die Symbolleiste als auch die Registerkartenleiste außerhalb des Bildschirms blättern.
Schauen Sie sich die folgenden Videos an, um Beispiele für diese Bildlauftechnik zu erhalten.
Sie können Ihr Projekt ausführen und diese Bildlauftechnik in Aktion sehen.
5. Bildlauftechnik 3
Ich verwende für diese Scroll-Technik die flexible Raumregion, die ich zu Beginn dieses Tutorials erwähnt habe. Ich mache das, um die anfängliche Höhe des zu verkleinern AppBarLayout wie der Inhalt nach oben scrollen. Die Höhe der AppBarLayout wird auf die ursprüngliche Höhe erhöht, wenn der Inhalt nach unten gescrollt wird. Sie können diese Technik in Aktion im folgenden Video sehen.
Für diese Scrolltechnik verwende ich folgendes Layout:
Es sieht auf jeden Fall aus wie viel Code, also lassen Sie uns den Code aufteilen. In diesem Layout habe ich folgende Änderungen vorgenommen:
Das Werkzeugleiste ist in ein gehüllt CollapsingToolBarLayout und beide Elemente werden in das Verzeichnis eingefügt AppBarLayout.
Das app: layout_scrollFlags Attribut wird aus dem verschoben Werkzeugleiste zum CollapsingToolBarLayout, weil dieser Container jetzt für das Reagieren auf Bildlaufereignisse zuständig ist.
Ein neues Attribut, app: layout_collapseMode, wurde dem hinzugefügt Werkzeugleiste. Dieses Attribut stellt sicher, dass die Werkzeugleiste bleibt am oberen Rand des Bildschirms fixiert.
Das AppBarLayout hat eine feste Anfangshöhe von 192 dp.
EIN FloatingActionButton wurde dem Layout hinzugefügt, unter dem RecyclerView.
Wozu dienen diese neuen Klassen??
CollapsingToolBarLayout
Dies ist eine neue Ansicht, die speziell für das Einwickeln der Werkzeugleiste und implementieren Sie eine einklappbare App-Leiste. Bei Verwendung der CollapsingToolBarLayout Klasse müssen Sie die folgenden Attribute besonders beachten:
App: contentScrim
Dieses Attribut gibt die Farbe an, die angezeigt werden soll, wenn sie vollständig reduziert ist.
Diese Attribute geben die Ränder des erweiterten Titels an. Sie sind nützlich, wenn Sie die Verwendung von planen setDisplayHomeAsUpEnabled Methode in Ihrer Aktivität und füllen Sie die neuen Felder um den Titel.
FloatingActionButton
Die schwebende Aktionsschaltfläche ist eine wichtige Komponente von Material Design-Apps. Sie können jetzt schwebende Aktionsschaltflächen mit nur wenigen Codezeilen in Ihr Layout einfügen. Du kannst den ... benutzen App: fabSize Attribut zur Auswahl aus zwei verschiedenen Größen, Standard (56 dp) und Mini (40 dp). Standard ist die Standardgröße.
Der Verschwindungseffekt wird automatisch durch Verankerung der schwebenden Aktionstaste an der erreicht AppBarLayout Verwendung der app: layout_anchor Attribut. Sie können die Position relativ zu diesem Anker auch mit angeben app: layout_anchorGravity Attribut.
Bevor Sie das Projekt ausführen, müssen Sie in der Aktivität angeben, dass CollapsingToolBarLayout wird den Titel statt des anzeigen Werkzeugleiste. Sehen Sie sich den folgenden Code-Ausschnitt zur Verdeutlichung an.
Führen Sie das Projekt aus, um die dritte Bildlauftechnik in Aktion zu sehen.
6. Bildlauftechnik 4
Diese Bildlauftechnik verwendet das erweiterte AppBarLayout, In der vorherigen Technik gezeigt, um ein Bild anzuzeigen. Sie können diese Technik im folgenden Video sehen.
Für diese Technik werde ich das vorherige Layout wiederverwenden und etwas modifizieren:
In diesem Layout habe ich folgende Änderungen vorgenommen:
Das android: hintergrund Attribut wurde aus dem entfernt AppBarLayout. Weil der Bildansicht Wenn Sie diesen Bereich ausfüllen, brauchen Sie keine Hintergrundfarbe.
Das App: extendedTitleMarginStart und App: extendedTitleMarginEnd Attribute wurden entfernt, weil wir das nicht verwenden setDisplayHomeAsUpEnabled Methode in der Aktivität.
Ein Bildansicht wurde hinzugefügt Vor das Werkzeugleiste. Dies ist wichtig, um das zu vermeiden AppBarLayout Zeigt einen Teil des Bildes anstelle der Primärfarbe an, wenn diese minimiert ist.
Sie haben vielleicht auch bemerkt, dass die Bildansicht hat die app: layout_collapseMode Attribut. Der Wert des Attributs ist auf festgelegt Parallaxe Parallax-Scrolling implementieren. Zusätzlich können Sie auch das hinzufügen app: layout_collapseParallaxMultiplier Attribut, um einen Multiplikator festzulegen.
Dies sind alle Änderungen, die Sie vornehmen müssen, damit diese Scroll-Technik in Ihrer App reibungslos funktioniert. Führen Sie das Projekt aus, um diese Bildlauftechnik in Aktion zu sehen.
7. Bildlauftechnik 5
Bei diesem Bildlaufverfahren wird der flexible Bereich vom Inhalt der App überlappt und außerhalb des Bildschirms gescrollt, wenn der Inhalt gescrollt wird. Sie können diese Technik in Aktion im folgenden Video sehen.
Bei dieser Technik können Sie das Layout der vorherigen Technik mit wenigen Änderungen wieder verwenden.
Für dieses Layout:
Das Bildansicht und das FloatingActionButton in der CollapsingToolbarLayout wurden entfernt. Diese Technik erfordert kein Bild.
In dem CollapsingToolbarLayout, das App: contentScrim Attribut wurde durch das ersetzt android: hintergrund Attribut. Wir machen das, weil die Hintergrundfarbe mit der übereinstimmen muss Werkzeugleiste Hintergrundfarbe schön beim Verschwinden.
Das android: hintergrund Attribut wurde dem hinzugefügt Werkzeugleiste.
Das App: Behavior_overlapTop Attribut wurde dem hinzugefügt RecyclerView. Dies ist das wichtigste Attribut für dieses Bildlaufverfahren, da dieses Attribut den Überlappungsbereich angibt, den die Ansicht mit dem haben soll AppBarLayout. Damit dieses Attribut Wirkung hat, sollte es der gleichen Ansicht hinzugefügt werden, die die App: Layoutverhalten Attribut.
Wenn Sie versuchen, diese Bildlauftechnik mit diesen Änderungen zu verwenden, hat das resultierende Layout keinen Titel in der Werkzeugleiste. Um dies zu lösen, können Sie eine Textvorschau und füge es dem hinzu Werkzeugleiste programmatisch.
TextView Text = neue TextView (dies); text.setText (R.string.title_activity_technique5); text.setTextAppearance (this, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse); toolbar.addView (Text);
Fazit
Beachten Sie, dass Sie nicht jede dieser Techniken in Ihrer App implementieren müssen. Einige sind für Ihr Design nützlicher als andere. Nun, da Sie wissen, wie jeder implementiert wird, können Sie ihn auswählen und damit experimentieren.
Ich hoffe, Sie fanden dieses Tutorial hilfreich. Vergiss nicht es zu teilen, wenn es dir gefallen hat. Sie können unten Kommentare und Fragen hinterlassen.
Share
Accentsconagua
