MDC-104 Android: Komplexe Komponenten (Java)

Material Components (MDC) ermöglichen Entwicklern die Implementierung von Material Design. Das MDC wurde von einem Team aus Entwickler:innen und UX-Designern bei Google erstellt und bietet Dutzende schöne und funktionale UI-Komponenten, die für Android, iOS, Web und Flutter verfügbar sind. material.io/develop

Im Codelab-MDC-103 haben Sie Farbe, Höhe und Typografie des Materials (MDC) an Ihre App angepasst.

Eine Komponente im Material Design-System führt eine Reihe vordefinierter Aufgaben aus und hat bestimmte Eigenschaften, z. B. eine Schaltfläche. Eine Schaltfläche ist mehr als nur eine Möglichkeit für Nutzer, eine Aktion auszuführen. Außerdem ist die Form, die Größe und die Farbe ein Hinweis darauf, dass der Nutzer interaktiv ist und dass etwas passiert, wenn er auf die Anzeige klickt oder darauf klickt.

Die Material Design-Richtlinien beschreiben Komponenten aus der Sicht eines Designers. Sie beschreiben eine große Auswahl an grundlegenden Funktionen, die für alle Plattformen verfügbar sind, sowie die anatomischen Elemente, aus denen jede Komponente besteht. Zum Beispiel enthält ein Hintergrund eine Hintergrundebene und ihren Inhalt, die Vorderebene und ihren Inhalt, Bewegungsregeln und Anzeigeoptionen. Jede dieser Komponenten kann für jede App, jeden Anwendungsfall und ihren Inhalt angepasst werden. In den meisten Fällen handelt es sich dabei um herkömmliche Ansichten, Steuerelemente und Funktionen des Plattformen-SDKs.

Die Material Design-Richtlinien enthalten zwar viele Komponenten, aber nicht alle sind gut für wiederverwendbare Codes geeignet. Daher sind sie in MDC nicht enthalten. Sie haben die Möglichkeit, diese Websitevarianten selbst zu erstellen, um mit benutzerdefiniertem Stil einen benutzerdefinierten Stil für Ihre App zu erzielen.

Inhalte, die Sie erstellen werden

In diesem Codelab fügen Sie dem Schrein einen Hintergrund hinzu. Die im asymmetrischen Raster angezeigten Produkte werden nach Kategorie gefiltert. Du nutzt Folgendes:

• Form
• Bewegung
• Traditionelle Android SDK-Klassen

Dies sind die letzten vier Codelabs, in denen Sie lernen, wie Sie eine App für ein Produkt namens Shrine erstellen. Wir empfehlen Ihnen, alle Codelabs Schritt für Schritt zu durchlaufen, während Sie sie Schritt für Schritt durchgehen. Die zugehörigen Codelabs finden Sie unter: MDC-101: Material Components (MDC) – Grundlagen MDC-102: Struktur und Struktur von Material Design. MDC-103: Material Design mit Farbe, Form, Höhe und Typ

MDC-Android-Komponenten in diesem Codelab

• Form

Voraussetzungen

• Grundkenntnisse in der Android-Entwicklung
• Android Studio (hier herunterladen, wenn du es noch nicht hast)
• Ein Android-Emulator oder -Gerät (über Android Studio verfügbar)
• Beispielcode (siehe nächsten Schritt)

Wie würdest du deine Erfahrung beim Erstellen von Android-Apps bewerten?

Fortgeschritten Fortgeschritten Profi

Möchtest du von MDC-103 fortfahren?

Wenn Sie MDC-103 abgeschlossen haben, sollte Ihr Code für dieses Codelab bereit sein. Fahren Sie mit Schritt 3 fort.

Neu beginnen?

Start der Codelab-App herunterladen

Starter-App herunterladen

Die Starter-App befindet sich im Verzeichnis material-components-android-codelabs-104-starter/java. Achten Sie darauf, vor dem Start cd in dieses Verzeichnis zu schreiben.

...oder von GitHub klonen

Führen Sie die folgenden Befehle aus, um dieses Codelab aus 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 aus GitHub klonen

Startcode in Android Studio laden

1. Sobald der Einrichtungsassistent abgeschlossen ist und das Fenster Willkommen in Android Studio angezeigt wird, klicken Sie auf Vorhandenes Android Studio-Projekt öffnen. Gehen Sie zu dem Verzeichnis, in dem Sie den Beispielcode installiert haben, und wählen Sie java -> alias aus oder suchen Sie auf Ihrem Computer nach Schrein, um das Shrine-Projekt zu öffnen.
2. Warten Sie einen Moment, bis Android Studio das Projekt erstellt und synchronisiert hat. Dies wird durch Aktivitätsindikatoren unten im Android Studio-Fenster angezeigt.
3. Es kann jetzt vorkommen, dass Android Studio einige Build-Fehler auslöst, weil das Android SDK oder die Build-Tools fehlen (siehe unten). Folgen Sie der Anleitung in Android Studio, um die Projekte zu installieren, zu aktualisieren und zu synchronisieren.

Projektabhängigkeiten hinzufügen

Das Projekt ist von der MDC-Android-Supportbibliothek abhängig. Im Beispielcode sollte diese Abhängigkeit bereits enthalten sein. Es empfiehlt sich aber, die folgenden Schritte auszuführen, um sicherzugehen.

1. Rufen Sie die Datei build.gradle des app-Moduls auf und achten Sie darauf, dass der dependencies-Block eine Abhängigkeit von MDC Android enthält:

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

2. Optional: Bearbeiten Sie 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'
}

Starter-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 Ausführen/Wiedergeben, um die App zu erstellen und auszuführen. Wenn im Fenster Bereitstellungsziel auswählen ein Android-Gerät aufgeführt ist, fahren Sie mit Schritt 8 fort. Andernfalls klicken Sie auf 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 eine aktuelle Android-Version aus, am besten das höchste API-Level. Sollte die App nicht installiert sein, klicken Sie auf den angezeigten Link Herunterladen und schließen Sie den Download ab. Klicken Sie auf Weiter. Übernehmen Sie auf dem Bildschirm Virtuelles Android-Gerät (AVD) die aktuellen Einstellungen und klicken Sie auf Fertigstellen. Wählen Sie im Dialogfeld „Bereitstellungsziel“ ein Android-Gerät aus. Klicke auf OK. Die App wird mit Android Studio erstellt, bereitgestellt und automatisch auf dem Zielgerät geöffnet.

Wenn Sie die Abhängigkeit nicht hinzufügen können oder die App nicht ausgeführt werden konnte, beenden Sie die Entwicklerumgebung und beheben Sie die Fehler.

Wenn beim Erstellen der Fehler INSTALL_FAILED_INVALID_APK angezeigt wird, führen Sie in Android Studio den Befehl Build' -> Clean Project' aus.

Fertig! Sie sollten die Shrine-App auf Ihrem Gerät sehen.

Ein Hintergrund ist die breiteste Oberfläche einer App und erscheint hinter allen anderen Inhalten und Komponenten. Sie besteht aus zwei Oberflächen: einer Hintergrundebene (Aktionen und Filter) und einer Vorderebene (Inhalte). Mit einem Hintergrund können Sie interaktive Informationen und Aktionen wie Navigations- oder Inhaltsfilter anzeigen.

Rasterinhalt

Fügen Sie in shr_product_grid_fragment.xml das Attribut android:visibility="gone" zu Ihrem NestedScrollView hinzu, um den Produktinhalt 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 in dieser Region einen Hintergrund. Damit bei dem Hintergrund im Vordergrund und im Menü der App keine Trennlinie angezeigt wird, verwenden wir für den Hintergrund dieselbe Farbe wie für die oberste App-Leiste.

Fügen Sie in shr_product_grid_fragment.xml das erste Element im Stamm FrameLayout vor dem AppBarLayout hinzu:

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üge in styles.xml Folgendes hinzu:

styles.xml

<style name="Widget.Shrine.Backdrop" parent="">
   <item name="android:background">?attr/colorAccent</item>
</style>

Perfekt! Du hast der Benutzeroberfläche des Schreins einen wunderschönen Hintergrund hinzugefügt. Als Nächstes fügen wir eine Speisekarte hinzu.

Speisekarte hinzufügen

Ein Menü ist im Wesentlichen eine Liste mit Textschaltflächen. Hier wird eine hinzugefügt.

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>

Und füge diese Liste den LinearLayout, den du gerade in shr_product_grid_fragment.xml hinzugefügt hast, über ein <include>-Tag hinzu:

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 Der Startbildschirm sollte so aussehen:

Ihr Hintergrund ist fertig. Lasst uns den zuvor geschlossenen Inhalt wiederherstellen.

Bevor wir in diesem Codelab Änderungen am Schrein vorgenommen haben, befand sich der Hauptinhalt des Produkts auf der am weitesten zurückliegenden Seite. Durch das Hinzufügen eines Hintergrunds wird dieser Inhalt jetzt hervorgehoben, da er vor diesem Hintergrund erscheint.

Neue Ebene hinzufügen

Jetzt sollte wieder die Produktrasterebene angezeigt werden. Entfernen Sie das android:visibility="gone"-Attribut 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">

Gestalten Sie die vordere Ebene mit einer Aussparung oben links. Bei Material Design wird diese Art der Anpassung als Form bezeichnet. Materialoberflächen können in verschiedenen Formen angezeigt werden. Formen verleihen den Oberflächen mehr Gewicht und können verwendet werden, um das Branding anzupassen. Materialformen können gekrümmte oder geneigte Ecken und Ränder und eine beliebige Anzahl von Seiten haben. Sie können symmetrisch oder unregelmäßig sein.

Form hinzufügen

Form des Rasters ändern. Wir haben einen benutzerdefinierten Hintergrund für den Hintergrund bereitgestellt, aber die Form wird nur unter Android Marshmallow und höher korrekt angezeigt. Wir können den shr_product_grid_background_shape auf Ihrem NestedScrollView nur für Android Marshmallow und höher festlegen. Füge zuerst ein id zu deinem NestedScrollView 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 dann den Hintergrund programmatisch in ProductGridFragment.java fest. Fügen Sie die folgende Logik hinzu, um den Hintergrund am Ende von onCreateView() unmittelbar vor der Rückgabeanweisung festzulegen:

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 wird die Farbressource productGridBackgroundColor (auch vom Hintergrund für benutzerdefinierte Formen verwendet) so aktualisiert:

farbe.xml

<color name="productGridBackgroundColor">#FFFBFA</color>

Erstellen und ausführen:

Wir haben dem Schrein eine benutzerdefinierte Form für die primäre Oberfläche zugewiesen. Aufgrund der Bodenhöhe sehen Nutzer, dass sich hinter der weißen Ebene etwas befindet. Fügen Sie Bewegung hinzu, damit Nutzer das sehen können, was im Menü passiert:

Mit Bewegung kannst du deine App zum Leben erwecken. Bewegung kann groß und dramatisch, subtil und minimal sein oder dazwischen liegen. Die verwendete Bewegung sollte der Situation entsprechen. Bewegungen, die bei wiederholten regulären Aktionen angewendet werden, sollten klein und subtil sein, damit sie nicht zu viel Zeit in Anspruch nehmen. Andere Situationen, z. B. das erste Mal, dass ein Nutzer eine App öffnet, können ansprechender sein und den Nutzer darüber informieren, wie er Ihre App verwendet.

Bewegung auf der Menüschaltfläche hinzufügen

Die Bewegung ist die Form vorne, die sich gerade nach unten bewegt. Wir haben bereits einen Klick-Listener für Sie bereitgestellt, mit dem die Übersetzungsanimation für das Tabellenblatt in NavigationIconClickListener.java ausgeführt wird. 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)));

Die Methode setUpToolbar() 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ücken Sie die Menütaste:

Wenn Sie das Symbol für das Navigationsmenü noch einmal drücken, wird das Menü ausgeblendet.

Bewegung der Vorderschicht optimieren

Mit Bewegung kannst du deine Marke zum Ausdruck bringen. Sehen wir uns an, wie die Animation mit einer anderen Timing-Kurve aussieht.

Aktualisieren Sie den Code in setupToolbar() in ProductGridFragment.java, damit ein Interpolator wie unten beschrieben an das Navigationssymbol „Navigation“ übergeben wird:

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 führt zu einem anderen Effekt, nicht?

Markensymbole können auch auf bekannte Symbole angewendet werden. Lassen Sie das Symbol zum Anzeigen benutzerdefiniert machen und mit unserem Titel zusammenführen, um einen individuellen, markenbezogenen Look zu erreichen.

Symbol für die Menüschaltfläche ändern

Ändern Sie die Menüschaltfläche, damit ein Symbol mit Rautendesign angezeigt wird. Aktualisieren Sie Ihre Symbolleiste in shr_product_grid_fragment.xml, um ein neues Markensymbol (shr_branded_menu) zu verwenden und die Attribute app:contentInsetStart und android:padding festzulegen, damit die Symbolleiste besser mit Ihren Spezifikationen übereinstimmt.

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 unseren Klick-Listener in setupToolbar() von ProductGridFragment.java noch einmal, damit Fenster wie unten geöffnet werden, 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! Wird der Hintergrund angezeigt, ist das Diamanten-Menüsymbol zu sehen. Wenn das Menü verborgen werden kann, wird stattdessen ein Schließen-Symbol angezeigt.

In den vier Codelabs hast du gelernt, wie du mit „Material Components“ ein individuelles, elegantes Erlebnis gestaltest, mit dem du die Persönlichkeit und den Stil deiner Marke ausdrücken kannst.

Die fertige MDC 104-App kannst du herunterladen, indem du das abgelaufene Codelab herunterlädst. Alternativ kannst du auch den 104-Abschluss mit Git aufrufen: git checkout 104-complete.

Sie können Ihre Version der App mit der App in diesem Zweig testen.

Nächste Schritte

In diesem Codelab (MDC-104) werden diese Codelab-Sequenzen abgeschlossen. Im Katalog der Android-Widgets finden Sie noch mehr Komponenten in MDC-Android.

Für eine weitere Herausforderung in diesem Codelab ändern Sie Ihre Shrine-Anwendung so, dass die Produktbilder geändert werden, die im Hintergrundmenü ausgewählt werden.

Informationen zum Verbinden dieser App mit Firebase für ein funktionierendes Back-End finden Sie im Firebase Android-Codelab.

Ich konnte dieses Codelab mit angemessenem Zeitaufwand starten.

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

Ich möchte Materialkomponenten weiterhin verwenden

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