Informationen zu diesem Codelab
1. Einführung
Material Components (MDC) unterstützen Entwickler bei der Implementierung von Material Design. MDC wurde von einem Team aus Entwicklern und UX-Designern bei Google entwickelt. Es enthält Dutzende schöne und funktionale UI-Komponenten und ist für Android, iOS, das Web und Flutter.material.io/develop verfügbar. |
Material Components for Android (MDC Android) ist kein neues System oder Framework, das einen Paradigmenwechsel in Ihrer App erfordert. MDC Android basiert auf den gleichen Klassen und APIs, die Sie bereits aus Android kennen, beispielsweise AppCompat-Schaltflächen und Textfelder. Komponenten, die von MDC Android bereitgestellt werden, können nach Bedarf verwendet werden, um eine sofortige Designverbesserung für Ihre bestehende App vorzunehmen.
Inhalt
In diesem Codelab ersetzen Sie von MDC einige vorhandene Komponenten in einem Formular durch neue.
MDC-Android-Komponenten in diesem Codelab
- Textfelder
- Tasten
- Menus
Voraussetzungen
- Grundkenntnisse in der Android-Entwicklung
- Android Studio (hier herunterladen, falls Sie es noch nicht haben)
- Ein Android-Emulator oder -Gerät (verfügbar über Android Studio)
- Beispielcode (siehe nächster Schritt)
Wie würdest du deine Erfahrung mit der Entwicklung von Android-Apps bewerten?
2. Entwicklungsumgebung einrichten
Starter-Codelab-App herunterladen
Die Start-App befindet sich im Verzeichnis material-components-android-codelabs-111-starter/java
. Achten Sie darauf, dass Sie sich in diesem Verzeichnis cd
befinden, bevor Sie beginnen.
...oder von 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 111-starter
Startcode in Android Studio laden
- Sobald der Einrichtungsassistent fertig ist und das Fenster Willkommen bei Android Studio angezeigt wird, klicken Sie auf Vorhandenes Android Studio-Projekt öffnen. Navigieren Sie zu dem Verzeichnis, in dem Sie den Beispielcode installiert haben, und wählen Sie java -> Versand (oder suchen Sie auf Ihrem Computer nach shipping), um das Versandprojekt zu öffnen.
- Warten Sie einen Moment, bis das Projekt in Android Studio erstellt und synchronisiert wurde. Dies können Sie an den Aktivitätsanzeigen unten im Android Studio-Fenster erkennen.
- An dieser Stelle kann Android Studio einige Build-Fehler ausgeben, weil das Android SDK oder die Build-Tools (siehe unten) fehlen. Folgen Sie der Anleitung in Android Studio, um diese zu installieren bzw. zu aktualisieren und Ihr Projekt zu synchronisieren.
MDC-Android importieren
Gehen Sie zur Datei build.gradle
des Moduls app
und achten Sie darauf, dass der Block dependencies
eine Abhängigkeit von MDC Android enthält:
api 'com.google.android.material:material:1.1.0-alpha06'
Starter-App ausführen
|
Fertig! Sie sollten die App und ihr Formular sehen.
3. Textfelder aktualisieren
Textfelder in Material Design haben gegenüber reinen Textfeldern einen deutlichen Vorteil bei der Benutzerfreundlichkeit. Wenn Sie den Trefferbereich mithilfe eines Umrisses oder einer Hintergrundfüllung definieren, ist die Wahrscheinlichkeit höher, dass Nutzer mit Ihrem Formular interagieren oder Textfelder in komplexeren Inhalten erkennen.
Textfeldstile ersetzen
Füge in shipping_info_activity.xml
allen TextInputLayout
-XML-Komponenten den folgenden Stil hinzu:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Jeder TextInputLayout
sollte so aussehen:
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
Erstellen Sie den folgenden Befehl und führen Sie ihn aus:
Die Textfelder wurden alle aktualisiert, um die neueren Designs in MDC zu verwenden.
Fehler hinzufügen
MDC-Textfelder verfügen über eine integrierte Fehlerdarstellung. Von MDC wird unter Ihrem Textfeld roter Text eingefügt und die Dekorationen werden ebenfalls rot dargestellt.
Aktualisieren Sie in ShippingInfoActivity.java
die Methode onCreate()
so:
ShippingInfoActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.shipping_info_activity);
View rootView = findViewById(android.R.id.content);
final List<TextInputLayout> textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout.class);
Button button = findViewById(R.id.save_button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
boolean noErrors = true;
for (TextInputLayout textInputLayout : textInputLayouts) {
String editTextString = textInputLayout.getEditText().getText().toString();
if (editTextString.isEmpty()) {
textInputLayout.setError(getResources().getString(R.string.error_string));
noErrors = false;
} else {
textInputLayout.setError(null);
}
}
if (noErrors) {
// All fields are valid!
}
}
});
}
Erstellen und ausführen. Klicken Sie auf SPEICHERN und lassen Sie mindestens ein Textfeld leer:
Die leeren Textfelder sind rot und darunter ein Fehlertext.
4. Schaltfläche aktualisieren
MDC verfügt über Schaltflächen mit:
- Tintenwellen
- Abgerundete Ecken
- Unterstützung von Designs
- Layout und Typografie: perfekt für Pixel
- Basiert auf AppCompatButton, der standardmäßigen Android-Schaltflächenklasse, damit Sie wissen, wie Sie diese in Ihrem Code verwenden.
Schaltflächenklasse ersetzen (optional)
Standardmäßig bläht die Material-Bibliothek automatisch normale Schaltflächen zu MDC-Schaltflächen auf. Sie können jedoch optional alle Verweise auf die Schaltfläche durch MaterialButton ersetzen, sodass Sie auf zusätzliche Methoden zugreifen können, die nur in MaterialButton verfügbar sind, wie zum Beispiel das Ändern des Eckenradius. Die MDC-Schaltflächen sind eine einfache Plug-and-Play-Komponente. Sie ersetzen einfach den Namen der XML-Komponente Button
durch MaterialButton
und wenden den Standardstil MaterialButton
auf MaterialButton
an.
Ändern Sie in shipping_info_activity.xml
die Schaltfläche von:
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
An:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Erstellen Sie den folgenden Befehl und führen Sie ihn aus:
5. Karte hinzufügen
MaterialCardView
ist eine Komponente, die auf CardView
basiert und Folgendes hat:
- Höhenangaben und Stile korrigieren
- Attribute für Strichbreite und -farbe
Karteninhalte in einer Karte zusammenfassen
Binde die LinearLayout
-Datei, die deine Inhalte enthält, in shipping_info_activity.xml
mit einer MaterialCardView
-Komponente ein:
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
Erstellen und ausführen. Das gesamte Formular sollte in eine Karte eingebunden sein:
Mit der Komponente „Material Card View“ können Sie Ihre Inhalte ganz einfach in einer Karte zusammenfassen.
6. Zusammenfassung
Sie haben einige gängige Komponenten ersetzt, die den sofortigen Nutzen zeigen: Textfelder, Schaltflächen und Karten, und Sie mussten Ihre App nicht komplett neu gestalten. Auch andere Komponenten wie die obere App-Leiste und das Tab-Layout können einen großen Unterschied machen.
Weiteres Vorgehen
Im Android Widgets Catalog finden Sie noch mehr Komponenten in MDC-Android.