MDC-104 Android: Erweiterte Material-Komponenten (Java)

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

Dies ist das letzte von vier Codelabs, in denen Sie eine App für das Produkt „Shrine“ erstellen. Wir empfehlen, alle Codelabs in der richtigen Reihenfolge durchzuarbeiten, da die Aufgaben Schritt für Schritt erklärt werden. Die zugehörigen Codelabs finden Sie unter: MDC-101: Material Components (MDC) – Grundlagen MDC-102: Material Design Structure and Layout MDC-103: Material Design-Theming mit Farbe, Form, Erhebung und Typ

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?

Anfänger Mittelstufe Fortgeschritten

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

Starter-App 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

Weitere Informationen: Repository von GitHub klonen

Startcode in Android Studio laden

1. 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.
2. 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.
3. 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.

1. Rufen Sie die Datei build.gradle des Moduls app auf und prüfen Sie, ob der Block dependencies eine Abhängigkeit von MDC Android enthält:

api 'com.google.android.material:material:1.1.0-alpha06'

2. 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

Achten Sie darauf, dass die Build-Konfiguration links neben der Schaltfläche „Ausführen / Wiedergeben“ app ist. Klicken Sie auf die grüne Schaltfläche Run / Play (Ausführen / Spielen), um die App zu erstellen und auszuführen. Wenn im Fenster Select Deployment Target (Bereitstellungsziel auswählen) bereits ein Android-Gerät in der Liste der verfügbaren Geräte aufgeführt ist, fahren Sie mit Schritt 8 fort. Klicken Sie andernfalls auf Create New Virtual Device (Neues virtuelles Gerät erstellen). Wählen Sie auf dem Bildschirm Hardware auswählen ein Smartphone aus, z. B. Pixel 2, und klicken Sie dann auf Weiter. Wählen Sie auf dem Bildschirm System Image (System-Image) eine aktuelle Android-Version aus, vorzugsweise das höchste API-Level. Wenn sie nicht installiert ist, klicken Sie auf den angezeigten Link Herunterladen und schließen Sie den Download ab. Klicken Sie auf Weiter. Lassen Sie die Einstellungen auf dem Bildschirm Android Virtual Device (AVD) unverändert und klicken Sie auf Fertigstellen. Wählen Sie im Dialogfeld „Bereitstellungsziel“ ein Android-Gerät aus. Klicken Sie auf OK. Android Studio erstellt die App, stellt sie bereit und öffnet sie automatisch auf dem Zielgerät.

Wenn Sie die Abhängigkeit nicht hinzufügen oder die App nicht erfolgreich ausführen konnten, beenden Sie den Vorgang und beheben Sie die Probleme in Ihrer Entwicklungsumgebung.

Wenn beim Erstellen der App der Fehler INSTALL_FAILED_INVALID_APK auftritt, versuchen Sie, in Android Studio Build -> Clean Project (Projekt bereinigen) auszufü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.

Die fertige MDC 104-App ist verfügbar, wenn Sie das abgeschlossene Codelab herunterladen oder 104-complete mit Git auschecken: git checkout 104-complete.

Sie können Ihre Version der App mit der App in diesem Branch vergleichen.

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.

Ich konnte dieses Codelab mit einem angemessenen Zeit- und Arbeitsaufwand durcharbeiten.

Stimme vollkommen zu Stimme zu Neutral Stimme nicht zu Stimme überhaupt nicht zu

Ich möchte Material-Komponenten auch in Zukunft verwenden.

Stimme voll zu Stimme zu Neutral Stimme nicht zu Stimme überhaupt nicht zu