1. Einführung
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, das Web und Flutter verfügbar.material.io/develop |
Material Components for Android (MDC Android) ist kein neues System oder Framework, das einen Paradigmenwechsel in Ihrer App erfordert. MDC Android basiert auf denselben Klassen und APIs, die Sie bereits in Android kennen, z. B. AppCompat-Schaltflächen und ‑Textfelder. Die von MDC Android bereitgestellten Komponenten können nach Bedarf verwendet werden und führen zu einer sofortigen Designverbesserung Ihrer vorhandenen App.
Umfang
In diesem Codelab ersetzen Sie einige vorhandene Komponenten in einem Formular durch neue Komponenten von MDC.
MDC-Android-Komponenten in diesem Codelab
- Textfelder
- Schaltflächen
- Menus
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?
2. Entwicklungsumgebung einrichten
Starter-App für das Codelab herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-android-codelabs-111-starter/kotlin. 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 111-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 kotlin -> shipping aus (oder suchen Sie auf Ihrem Computer nach shipping), um das Versandprojekt 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 dieser Stelle 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.
Start-App ausführen
|
|
Fertig! Sie sollten die App und ihr Formular sehen.
3. Textfelder aktualisieren
Material Design-Textfelder bieten einen großen Vorteil in Bezug auf die Nutzerfreundlichkeit gegenüber einfachen Textfeldern. Wenn Sie die Trefferzone mit einer Umrisslinie oder einer Hintergrundfüllung definieren, ist es wahrscheinlicher, dass Nutzer mit Ihrem Formular interagieren oder Textfelder in komplexeren Inhalten erkennen.
MDC-Android importieren
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-alpha05'
Textfeldstile ersetzen
Fügen Sie in shipping_info_activity.xml allen TextInputLayout-XML-Komponenten den folgenden Stil hinzu:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Jedes 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.TextInputEditText
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 und ausführen:
Die Textfelder wurden alle aktualisiert, um die neueren Designs in MDC zu verwenden.
Fehler hinzufügen
MDC-Textfelder haben eine integrierte Fehlerdarstellung. Bei MDC wird roter Text unter dem Textfeld angezeigt und die Dekorationen werden ebenfalls rot.
Aktualisieren Sie in ShippingInfoActivity.kt onCreate(), um die Texteingabe zu prüfen und Fehler entsprechend festzulegen. Das sollte ungefähr so aussehen:
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
Erstellen und ausführen Klicken Sie auf „SPEICHERN“, lassen Sie aber mindestens ein Textfeld leer:
Die leeren Textfelder sind rot und darunter befindet sich ein Fehlertext.
4. Schaltfläche aktualisieren
MDC bietet Schaltflächen mit:
- Tintenwellen
- Abgerundete Ecken
- Unterstützung von Designs
- Pixelgenaues Layout und Typografie
- Sie basieren auf AppCompatButton (der Standard-Android-Schaltflächenklasse), sodass Sie wissen, wie Sie sie in Ihrem Code verwenden.
Schaltflächenklasse optional ersetzen
Standardmäßig werden reguläre Schaltflächen in der Material-Bibliothek automatisch in MDC-Schaltflächen umgewandelt. Sie können jedoch optional alle Verweise auf „Button“ durch „MaterialButton“ ersetzen, um auf zusätzliche Methoden zuzugreifen, die nur in einem „MaterialButton“ verfügbar sind, z. B. das Ändern des Eckenradius. MDC-Schaltflächen sind eine einfache Plug-and-Play-Komponente. Ersetzen Sie einfach den XML-Komponentennamen Button durch MaterialButton und wenden Sie 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 und ausführen:
5. Karte hinzufügen
MaterialCardView ist eine Komponente, die auf CardView basiert und Folgendes bietet:
- Höhe und Stil korrigieren
- Attribute für Strichbreite und -farbe
Inhalte in einer Karte zusammenfassen
Schließen Sie das LinearLayout mit Ihren Inhalten 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 einer Karte eingeschlossen sein:
Die Komponente „Material Card View“ ist eine vertraute, aber moderne Möglichkeit, Inhalte einfach in einer Karte zu präsentieren.
6. Zusammenfassung
Sie haben einige gängige Komponenten ersetzt, um sofortigen Mehrwert zu schaffen: Textfelder, Schaltflächen und Karten. Dabei mussten Sie Ihre App nicht komplett neu gestalten. Auch andere Komponenten können einen großen Unterschied machen, z. B. die obere App-Leiste und TabLayout.
Weiteres Vorgehen
Weitere Komponenten in MDC-Android finden Sie im Android Widgets Catalog.