Material Components (MDC) helfen Entwicklern bei der Implementierung von Material Design. MDC wurde von einem Team aus Entwicklern und UX-Designern bei Google entwickelt und bietet Dutzende von ansprechenden und funktionalen UI-Komponenten. Es ist für Android, iOS, Web und Flutter verfügbar. material.io/develop |
Im Codelab MDC-103 haben Sie die Farbe, Höhe und Typografie von Material-Komponenten (MDC) angepasst, um Ihre App zu gestalten.
Eine Komponente im Material Design-System führt eine Reihe vordefinierter Aufgaben aus und hat bestimmte Merkmale, z. B. eine Schaltfläche. Eine Schaltfläche ist jedoch mehr als nur eine Möglichkeit für Nutzer, eine Aktion auszuführen. Sie ist auch ein visueller Ausdruck von Form, Größe und Farbe, der dem Nutzer signalisiert, dass sie interaktiv ist und dass bei Berührung oder Klick etwas passiert.
In den Material Design-Richtlinien werden Komponenten aus der Sicht eines Designers beschrieben. Sie beschreiben eine Vielzahl von grundlegenden Funktionen, die plattformübergreifend verfügbar sind, sowie die anatomischen Elemente, aus denen jede Komponente besteht. Ein Hintergrund enthält beispielsweise eine Hintergrundebene und deren Inhalt, die Vorderebene und deren Inhalt, Bewegungsregeln und Anzeigeoptionen. Jede dieser Komponenten kann an die Anforderungen, Anwendungsfälle und Inhalte der jeweiligen App angepasst werden. Diese Elemente sind größtenteils herkömmliche Ansichten, Steuerelemente und Funktionen aus dem SDK Ihrer Plattform.
In den Material Design-Richtlinien werden zwar viele Komponenten genannt, aber nicht alle eignen sich für wiederverwendbaren Code und sind daher nicht in MDC enthalten. Sie können diese selbst erstellen, um einen benutzerdefinierten Stil für Ihre App zu erzielen. Dazu ist nur herkömmlicher Code erforderlich.
Umfang
In diesem Codelab fügen Sie Shrine einen Hintergrund hinzu. Damit werden die Produkte, die im asymmetrischen Raster angezeigt werden, nach Kategorie gefiltert. Sie verwenden:
- Form
- Bewegung
- Herkömmliche Android SDK-Klassen
MDC-Android-Komponenten in diesem Codelab
- Form
Voraussetzungen
- Grundkenntnisse in der Android-Entwicklung
- Android Studio (hier herunterladen, falls noch nicht vorhanden)
- Ein Android-Emulator oder -Gerät (über Android Studio verfügbar)
- Der Beispielcode (siehe nächsten Schritt)
Wie würden Sie Ihre Erfahrung bei der Entwicklung von Android-Apps bewerten?
Sie haben bereits MDC-103 abgeschlossen?
Wenn Sie MDC-103 abgeschlossen haben, sollte Ihr Code für dieses Codelab bereit sein. Fahren Sie mit Schritt 3 fort.
Sie fangen gerade erst an?
Starter-App für das Codelab herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-android-codelabs-104-starter/java
. cd
Sie vor Beginn in dieses Verzeichnis.
…oder aus GitHub klonen
Führen Sie die folgenden Befehle aus, um dieses Codelab von GitHub zu klonen:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 104-starter
Startcode in Android Studio laden
- Wenn der Einrichtungsassistent abgeschlossen ist und das Fenster Welcome to Android Studio angezeigt wird, klicken Sie auf Open an existing Android Studio project. Rufen Sie das Verzeichnis auf, in dem Sie den Beispielcode installiert haben, und wählen Sie java -> shrine aus(oder suchen Sie auf Ihrem Computer nach shrine), um das Shrine-Projekt zu öffnen.
- Warten Sie einen Moment, bis Android Studio das Projekt erstellt und synchronisiert hat. Die Aktivitätsanzeigen unten im Android Studio-Fenster geben Aufschluss über den Fortschritt.
- An diesem Punkt werden in Android Studio möglicherweise einige Build-Fehler angezeigt, weil das Android SDK oder Build-Tools wie das unten gezeigte fehlen. Folgen Sie der Anleitung in Android Studio, um diese zu installieren/aktualisieren und Ihr Projekt zu synchronisieren.
Projektabhängigkeiten hinzufügen
Das Projekt benötigt eine Abhängigkeit von der MDC Android Support Library. Die heruntergeladenen Beispielcodes sollten diese Abhängigkeit bereits enthalten. Es empfiehlt sich jedoch, die folgenden Schritte auszuführen, um sicherzugehen.
- Rufen Sie die Datei
build.gradle
des Modulsapp
auf und prüfen Sie, ob der Blockdependencies
eine Abhängigkeit von MDC Android enthält:
api 'com.google.android.material:material:1.1.0-alpha06'
- Optional: Bearbeiten Sie bei Bedarf die Datei
build.gradle
, um die folgenden Abhängigkeiten hinzuzufügen, und synchronisieren Sie das Projekt.
dependencies { api 'com.google.android.material:material:1.1.0-alpha06' implementation 'androidx.legacy:legacy-support-v4:1.0.0' implementation 'com.android.volley:volley:1.1.1' implementation 'com.google.code.gson:gson:2.8.5' implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21" testImplementation 'junit:junit:4.12' androidTestImplementation 'androidx.test:core:1.1.0' androidTestImplementation 'androidx.test.ext:junit:1.1.0' androidTestImplementation 'androidx.test:runner:1.2.0-alpha05' androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05' }
Start-App ausführen
|
Fertig! Die Shrine-App sollte auf Ihrem Gerät ausgeführt werden.
Ein Hintergrund ist die am weitesten hinten liegende Oberfläche einer App, die hinter allen anderen Inhalten und Komponenten angezeigt wird. Sie besteht aus zwei Ebenen: einer Hintergrundebene (für Aktionen und Filter) und einer Vorderebene (für Inhalte). Mit einem Backdrop können Sie interaktive Informationen und Aktionen wie Navigation oder Inhaltsfilter präsentieren.
Rasterinhalte ausblenden
Fügen Sie in shr_product_grid_fragment.xml
das Attribut android:visibility="gone"
in Ihr NestedScrollView
ein, um die Produktinhalte vorübergehend zu entfernen:
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
android:visibility="gone"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
Wir installieren einen Hintergrund in dieser Region. Damit keine Trennung zwischen der oberen App-Leiste und den Menüinhalten im Hintergrund zu sehen ist, wird der Hintergrund in derselben Farbe wie die obere App-Leiste dargestellt.
Fügen Sie in shr_product_grid_fragment.xml
Folgendes als erstes Element in Ihrem Stamm-FrameLayout
vor dem AppBarLayout
ein:
shr_product_grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="100dp"
android:paddingBottom="100dp">
</LinearLayout>
Fügen Sie in styles.xml
Folgendes hinzu:
styles.xml
<style name="Widget.Shrine.Backdrop" parent="">
<item name="android:background">?attr/colorAccent</item>
</style>
Gut gemacht! Sie haben der Benutzeroberfläche von Shrine einen schönen Hintergrund hinzugefügt. Als Nächstes fügen wir ein Menü hinzu.
Speisekarte hinzufügen
Ein Menü ist im Grunde eine Liste von Textschaltflächen. Wir fügen hier eine hinzu.
Erstellen Sie in Ihrem res -> layout
-Verzeichnis ein neues Layout mit dem Namen shr_backdrop.xml
und fügen Sie Folgendes hinzu:
shr_backdrop.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_featured_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_apartment_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_accessories_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_shoes_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_tops_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_bottoms_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_dresses_label" />
<View
android:layout_width="56dp"
android:layout_height="1dp"
android:layout_margin="16dp"
android:background="?android:attr/textColorPrimary" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_account_label" />
</merge>
Fügen Sie diese Liste dem LinearLayout
hinzu, das Sie gerade in shr_product_grid_fragment.xml
mit einem <include>
-Tag hinzugefügt haben:
shr_product_grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="88dp">
<include layout="@layout/shr_backdrop" />
</LinearLayout>
Erstellen und ausführen Ihr Startbildschirm sollte so aussehen:
Ihr Hintergrund ist fertig. Lass uns die Inhalte, die wir zuvor ausgeblendet haben, wieder einblenden.
Bevor wir in diesem Codelab Änderungen an Shrine vorgenommen haben, befand sich der primäre Produktinhalt auf der am weitesten hinten liegenden Oberfläche. Durch das Hinzufügen eines Hintergrunds werden diese Inhalte jetzt stärker hervorgehoben, da sie vor diesem Hintergrund erscheinen.
Neue Ebene hinzufügen
Wir sollten die Ebene mit dem Produktraster wieder anzeigen. Entfernen Sie das Attribut android:visibility="gone"
aus Ihrem NestedScrollView
:
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
Wir gestalten die vordere Ebene mit einer Kerbe oben links. In Material Design wird diese Art der Anpassung als „Form“ bezeichnet. Materialoberflächen können in verschiedenen Formen dargestellt werden. Formen verleihen Oberflächen mehr Ausdruck und Stil und können verwendet werden, um das Branding zu unterstreichen. Materialformen können abgerundete oder eckige Ecken und Kanten sowie eine beliebige Anzahl von Seiten haben. Sie können symmetrisch oder unregelmäßig sein.
Form hinzufügen
Sie können die Form des Rasters ändern. Wir haben einen benutzerdefinierten Hintergrund mit einer Form bereitgestellt, die jedoch nur unter Android Marshmallow und höher richtig angezeigt wird. Wir können den shr_product_grid_background_shape
-Hintergrund nur auf Geräten mit Android Marshmallow und höher festlegen.NestedScrollView
Fügen Sie zuerst Ihrem NestedScrollView
ein id
hinzu, damit wir im Code darauf verweisen können:
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:id="@+id/product_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
Legen Sie den Hintergrund dann programmatisch in ProductGridFragment.java
fest. Fügen Sie die folgende Logik hinzu, um den Hintergrund am Ende von onCreateView()
festzulegen, direkt vor der Return-Anweisung:
ProductGridFragment.java
// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
view.findViewById(R.id.product_grid).setBackgroundResource(R.drawable.shr_product_grid_background_shape);
}
Schließlich aktualisieren wir die Farbressource productGridBackgroundColor
(die auch für den Hintergrund der benutzerdefinierten Form verwendet wird) so:
colors.xml
<color name="productGridBackgroundColor">#FFFBFA</color>
Erstellen und ausführen:
Wir haben der primären Oberfläche von Shrine eine benutzerdefinierte Form gegeben. Aufgrund der Erhebung der Oberfläche können Nutzer sehen, dass sich etwas direkt hinter der weißen Frontschicht befindet. Fügen wir Bewegung hinzu, damit Nutzer das Menü sehen können.
Mit Bewegung können Sie Ihre App zum Leben erwecken. Bewegung kann groß und dramatisch, subtil und minimal oder irgendetwas dazwischen sein. Die Art der Bewegung sollte der Situation angemessen sein. Bewegungen, die auf wiederholte regelmäßige Aktionen angewendet werden, sollten klein und subtil sein, damit sie nicht regelmäßig zu viel Zeit in Anspruch nehmen. Andere Situationen, z. B. wenn ein Nutzer eine App zum ersten Mal öffnet, können auffälliger sein und dazu beitragen, den Nutzer über die Verwendung Ihrer App zu informieren.
Enthüllungsbewegung für die Menüschaltfläche hinzufügen
Die Bewegung ist die Form, die sich vorne befindet und sich gerade nach unten bewegt. Wir haben bereits einen Click-Listener für Sie bereitgestellt, der die Übersetzungsanimation für das Blatt in NavigationIconClickListener.java
ausführt. Wir können diesen Klick-Listener in der setupToolbar()
-Methode von ProductGridFragment.java
festlegen:
ProductGridFragment.java
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
Ihre setUpToolbar()
-Methode sollte nun so aussehen:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
}
Erstellen und ausführen Drücke die Menü-Taste:
Wenn Sie noch einmal auf das Symbol für das Navigationsmenü drücken, sollte das Menü ausgeblendet werden.
Bewegung der vorderen Ebene anpassen
Bewegung ist eine gute Möglichkeit, Ihre Marke auszudrücken. Sehen wir uns an, wie die Einblendungsanimation mit einer anderen Timing-Kurve aussieht.
Aktualisieren Sie Ihren Code in setupToolbar()
in ProductGridFragment.java
, um einen Interpolator an den Klick-Listener des Navigationssymbols zu übergeben:
ProductGridFragment.java
private void setUpToolbar(View view) { Toolbar toolbar = view.findViewById(R.id.app_bar); AppCompatActivity activity = (AppCompatActivity) getActivity(); if (activity != null) { activity.setSupportActionBar(toolbar); } toolbar.setNavigationOnClickListener(new NavigationIconClickListener( getContext(), view.findViewById(R.id.product_grid), new AccelerateDecelerateInterpolator())); }
Das hat doch einen anderen Effekt, oder?
Das gilt auch für bekannte Symbole. Wir passen das Aufdeck-Symbol an und fügen es in den Titel ein, um einen einzigartigen, markenspezifischen Look zu erzielen.
Symbol für die Menüschaltfläche ändern
Ändern Sie die Menüschaltfläche so, dass ein Symbol mit einem Diamanten angezeigt wird. Aktualisieren Sie die Symbolleiste in shr_product_grid_fragment.xml
, um ein neues Markensymbol zu verwenden, das wir bereitgestellt haben (shr_branded_menu
), und legen Sie die Attribute app:contentInsetStart
und android:padding
fest, damit die Symbolleiste besser den Spezifikationen Ihres Designers entspricht:
shr_product_grid_fragment.xml
<androidx.appcompat.widget.Toolbar android:id="@+id/app_bar" style="@style/Widget.Shrine.Toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:paddingStart="12dp" android:paddingLeft="12dp" android:paddingEnd="12dp" android:paddingRight="12dp" app:contentInsetStart="0dp" app:navigationIcon="@drawable/shr_branded_menu" app:title="@string/shr_app_name" />
Aktualisieren Sie den Click-Listener noch einmal in setupToolbar()
in ProductGridFragment.java
, um Drawables für die Symbolleiste zu berücksichtigen, wenn das Menü geöffnet und geschlossen ist:
ProductGridFragment.java
private void setUpToolbar(View view) { Toolbar toolbar = view.findViewById(R.id.app_bar); AppCompatActivity activity = (AppCompatActivity) getActivity(); if (activity != null) { activity.setSupportActionBar(toolbar); } toolbar.setNavigationOnClickListener(new NavigationIconClickListener( getContext(), view.findViewById(R.id.product_grid), new AccelerateDecelerateInterpolator(), getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon }
Erstellen und ausführen:
Sehr gut! Wenn der Hintergrund enthüllt werden kann, wird das Diamantsymbol für das Menü angezeigt. Wenn das Menü ausgeblendet werden kann, wird stattdessen ein Schließen-Symbol angezeigt.
In diesen vier Codelabs haben Sie gesehen, wie Sie mit Material-Komponenten einzigartige, elegante Benutzeroberflächen erstellen, die die Persönlichkeit und den Stil einer Marke widerspiegeln.
Weiteres Vorgehen
Dieses Codelab (MDC-104) schließt diese Reihe von Codelabs ab. Weitere Komponenten in MDC-Android finden Sie im Android Widgets Catalog.
Als weitere Herausforderung in diesem Codelab können Sie die Shrine-Anwendung so ändern, dass andere Produktbilder angezeigt werden, wenn im Hintergrundmenü eine Kategorie ausgewählt wird.
Informationen zum Herstellen einer Verbindung zwischen dieser App und Firebase für ein funktionierendes Backend finden Sie im Firebase Android Codelab.