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. |
Im Codelab MDC-101 haben Sie zwei Material Components (MDC) verwendet, um eine Anmeldeseite zu erstellen: Textfelder und Schaltflächen mit Tintenwellen. Erweitern wir nun diese Grundlage, indem wir Navigation, Struktur und Daten hinzufügen.
Inhalt
In diesem Codelab erstellen Sie einen Startbildschirm für eine App namens Shrine, eine E-Commerce-App für Kleidung und Haushaltswaren. Sie enthält Folgendes:
- Obere App-Leiste
- Eine Rasterliste mit Produkten
MDC-Android-Komponenten in diesem Codelab
- AppBarLayout
- MaterialCardView
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?
<ph type="x-smartling-placeholder">2. Entwicklungsumgebung einrichten
Weiter von MDC-101?
Wenn du MDC-101 abgeschlossen hast, sollte dein Code für dieses Codelab vorbereitet sein. Fahren Sie mit Schritt 3 fort: Obere App-Leiste hinzufügen.
Neu beginnen?
Starter-Codelab-App herunterladen
Die Start-App befindet sich im Verzeichnis material-components-android-codelabs-102-starter/kotlin. 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 102-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 kötlin -> Shin (Schrein) hinzu (oder suchen Sie auf Ihrem Computer nach Schrein), 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.
Projektabhängigkeiten hinzufügen
Für das Projekt ist eine Abhängigkeit von der MDC-Android-Supportbibliothek erforderlich. Im Beispielcode, den Sie heruntergeladen haben, sollte diese Abhängigkeit bereits aufgeführt sein. Es empfiehlt sich jedoch, die folgenden Schritte durchzuführen, um sicherzugehen.
- Gehen Sie zur Datei
build.gradledes Modulsappund achten Sie darauf, dass der Blockdependencieseine 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'
}
Starter-App ausführen
|
Fertig! Die Anmeldeseite von Shrine im Codelab „MDC-101“ sollte angezeigt werden.
Jetzt, da der Anmeldebildschirm gut aussieht, fügen wir einige Produkte in die App ein.
3. App-Leiste oben hinzufügen
Der Startbildschirm wird angezeigt, wenn die Anmeldeseite geschlossen wird. Der Bildschirm zeigt die Meldung „Du hast es geschafft!“. Sehr gut. Jetzt haben die Nutzenden jedoch keine Aktionen mehr zu tun und sie haben auch kein Gefühl dafür, wo sie sich in der App befinden. Dazu ist es an der Zeit, die Navigation hinzuzufügen.
Material Design bietet Navigationsmuster, die ein hohes Maß an Nutzungsfreundlichkeit gewährleisten. Eine der sichtbarsten Komponenten ist die obere App-Leiste.
Fügen Sie eine obere App-Leiste hinzu, um die Navigation zu ermöglichen und Nutzern schnellen Zugriff auf andere Aktionen zu ermöglichen.
AppBar-Widget hinzufügen
Löschen Sie in shr_product_grid_fragment.xml den <LinearLayout>-Block mit der Meldung „Du hast es geschafft! TextView und ersetzen Sie ihn durch Folgendes:
shr_product_grid_fragment.xml
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/app_bar"
style="@style/Widget.Shrine.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
Ihre shr_product_grid_fragment.xml sollte jetzt so aussehen:
shr_product_grid_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProductGridFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/app_bar"
style="@style/Widget.Shrine.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
</FrameLayout>
Viele App-Leisten haben eine Schaltfläche neben dem Titel. Fügen wir unserem ein Menüsymbol hinzu.
Navigationssymbol hinzufügen
Bleiben Sie im shr_product_grid_fragment.xml und fügen Sie der XML-Komponente Toolbar, die Sie gerade zu Ihrem Layout hinzugefügt haben, Folgendes hinzu:
shr_product_grid_fragment.xml
app:navigationIcon="@drawable/shr_menu"
Ihre shr_product_grid_fragment.xml sollte so aussehen:
shr_product_grid_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProductGridFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/app_bar"
style="@style/Widget.Shrine.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="@drawable/shr_menu"
app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
</FrameLayout>
Aktionsschaltflächen hinzufügen und obere App-Leiste gestalten
Sie können auch am Ende der App-Leiste Schaltflächen hinzufügen. In Android werden diese Schaltflächen als Aktionsschaltflächen bezeichnet. Wir gestalten die obere App-Leiste programmatisch und fügen dem Menü Aktionsschaltflächen hinzu.
Legen Sie in der Funktion onCreateView von ProductGridFragment.kt mithilfe von setSupportActionBar die Toolbar der activity fest, die als ActionBar verwendet werden soll. Das ist möglich, nachdem die Ansicht mit dem inflater erstellt wurde.
ProductGridFragment.kt
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment with the ProductGrid theme
val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
return view;
}
Direkt unter der Methode, die wir gerade geändert haben, um die Symbolleiste einzurichten, überschreiben wir als Nächstes onCreateOptionsMenu, um den Inhalt von shr_toolbar_menu.xml in die Symbolleiste zu übertragen:
ProductGridFragment.kt
override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
super.onCreateOptionsMenu(menu, menuInflater)
}
Überschreiben Sie schließlich onCreate() in ProductGridFragment.kt und rufen Sie nach dem Aufrufen von super() setHasOptionMenu mit true auf:
ProductGridFragment.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setHasOptionsMenu(true)
}
Durch die obigen Code-Snippets wird die App-Leiste aus unserem XML-Layout zur Aktionsleiste für diese Aktivität. Der Callback onCreateOptionsMenu teilt der Aktivität mit, was als Menü verwendet werden soll. In diesem Fall werden die Menüpunkte von R.menu.shr_toolbar_menu in der App-Leiste platziert. Die Menüdatei enthält zwei Elemente: „Search“. und "Filter".
shr_toolbar_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/search"
android:icon="@drawable/shr_search"
android:title="@string/shr_search_title"
app:showAsAction="always" />
<item
android:id="@+id/filter"
android:icon="@drawable/shr_filter"
android:title="@string/shr_filter_title"
app:showAsAction="always" />
</menu>
Nach diesen Änderungen sollte Ihre ProductGridFragment.kt-Datei so aussehen:
ProductGridFragment.kt
package com.google.codelabs.mdc.kotlin.shrine
import android.os.Bundle
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*
class ProductGridFragment : Fragment() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setHasOptionsMenu(true)
}
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment with the ProductGrid theme
val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)
// Set up the tool bar
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
return view;
}
override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
super.onCreateOptionsMenu(menu, menuInflater)
}
}
Erstellen und ausführen. Ihr Startbildschirm sollte nun so aussehen:
Die Symbolleiste enthält jetzt auf der rechten Seite ein Navigationssymbol, einen Titel und zwei Aktionssymbole. Die Symbolleiste zeigt auch Höhendaten mithilfe eines dezenten Schattens an, der darauf hinweist, dass sich die Ebene auf einer anderen Ebene als der Inhalt befindet.
4. Karte hinzufügen
Unsere App ist jetzt strukturiert. Organisieren Sie die Inhalte, indem Sie sie in Karten platzieren.
Karte hinzufügen
Fügen wir zunächst eine Karte unter der oberen App-Leiste hinzu. Eine Karte sollte einen Bereich für ein Bild, einen Titel und ein Label für Sekundärtext haben. Fügen Sie unter AppBarLayout in shr_product_grid_fragment.xml Folgendes hinzu:
shr_product_grid_fragment.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="160dp"
android:layout_height="180dp"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="70dp"
app:cardBackgroundColor="?attr/colorPrimaryDark"
app:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#FFFFFF"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="@string/shr_product_title"
android:textAppearance="?attr/textAppearanceHeadline6" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="@string/shr_product_description"
android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
Erstellen Sie den folgenden Befehl und führen Sie ihn aus:
In dieser Vorschau sehen Sie, dass die Karte vom linken Rand aus platziert ist und abgerundete Ecken und einen Schatten hat, der die Höhe der Karte zum Ausdruck bringt. Das gesamte Element wird als „Container“ bezeichnet. Mit Ausnahme des Containers sind alle darin enthaltenen Elemente optional.
Sie können einem Container folgende Elemente hinzufügen: Überschrift, Miniaturansicht oder Avatar, Zwischenüberschrift, Trennlinien und sogar Schaltflächen und Symbole. Die soeben erstellte Karte enthält beispielsweise zwei TextViews (eine für den Titel und eine für sekundären Text) in einem LinearLayout, die am unteren Rand der Karte ausgerichtet sind.
Karten werden normalerweise zusammen mit anderen Karten in einer Sammlung angezeigt. Im nächsten Abschnitt dieses Codelabs legen wir sie als Sammlung in einem Raster dar.
5. Kartenraster erstellen
Wenn auf einem Bildschirm mehrere Karten angezeigt werden, werden sie in einer oder mehreren Sammlungen gruppiert. Karten in einem Raster sind koplanar, d. h. sie haben dieselbe Ruhehöhe wie einander (es sei denn, sie wurden ausgewählt oder gezogen, aber wir werden in diesem Codelab nicht darauf eingehen).
Kartenraster einrichten
Sehen Sie sich die Datei shr_product_card.xml an, die wir für Sie bereitgestellt haben:
shr_product_card.xml
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="@android:color/white"
app:cardElevation="2dp"
app:cardPreventCornerOverlap="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.android.volley.toolbox.NetworkImageView
android:id="@+id/product_image"
android:layout_width="match_parent"
android:layout_height="@dimen/shr_product_card_image_height"
android:background="?attr/colorPrimaryDark"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/product_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/shr_product_title"
android:textAppearance="?attr/textAppearanceHeadline6" />
<TextView
android:id="@+id/product_price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/shr_product_description"
android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
Dieses Kartenlayout enthält eine Karte mit einem Bild (in diesem Fall ein NetworkImageView, mit dem Bilder über eine URL geladen und angezeigt werden können) und zwei TextViews.
Sehen Sie sich als Nächstes die ProductCardRecyclerViewAdapter an, die wir für Sie bereitgestellt haben. Es befindet sich im selben Paket wie ProductGridFragment.
ProductCardRecyclerViewAdapter.kt
package com.google.codelabs.mdc.kotlin.shrine
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
/**
* Adapter used to show a simple grid of products.
*/
class ProductCardRecyclerViewAdapter(private val productList: List<ProductEntry>) : RecyclerView.Adapter<ProductCardViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ProductCardViewHolder {
val layoutView = LayoutInflater.from(parent.context).inflate(R.layout.shr_product_card, parent, false)
return ProductCardViewHolder(layoutView)
}
override fun onBindViewHolder(holder: ProductCardViewHolder, position: Int) {
// TODO: Put ViewHolder binding code here in MDC-102
}
override fun getItemCount(): Int {
return productList.size
}
}
Die obige Adapterklasse verwaltet den Inhalt des Rasters. Um festzulegen, was jede Ansicht mit dem jeweiligen Inhalt tun soll, schreiben wir demnächst den Code für onBindViewHolder().
Im selben Paket kannst du dir auch ProductCardViewHolder ansehen. Diese Klasse speichert die Ansichten, die sich auf unser Kartenlayout auswirken, damit wir sie später ändern können.
package com.google.codelabs.mdc.kotlin.shrine
import android.view.View
import androidx.recyclerview.widget.RecyclerView
class ProductCardViewHolder(itemView: View) //TODO: Find and store views from itemView
: RecyclerView.ViewHolder(itemView)
Zum Einrichten des Rasters entfernen wir zuerst den Platzhalter MaterialCardView aus shr_product_grid_fragment.xml. Als Nächstes sollten Sie die Komponente hinzufügen, die unser Kartenraster darstellt. In diesem Fall verwenden wir RecyclerView. Füge die RecyclerView-Komponente unter shr_product_grid_fragment.xml unter der XML-Komponente AppBarLayout hinzu:
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:paddingStart="@dimen/shr_product_grid_spacing"
android:paddingEnd="@dimen/shr_product_grid_spacing"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.core.widget.NestedScrollView>
Ihre shr_product_grid_fragment.xml sollte so aussehen:
shr_product_grid_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProductGridFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/app_bar"
style="@style/Widget.Shrine.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="@drawable/shr_menu"
app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:paddingStart="@dimen/shr_product_grid_spacing"
android:paddingEnd="@dimen/shr_product_grid_spacing"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.core.widget.NestedScrollView>
</FrameLayout>
Fügen Sie schließlich in onCreateView() den Initialisierungscode RecyclerView in ProductGridFragment.kt ein, nachdem Sie setUpToolbar(view) aufgerufen haben, und vor der return-Anweisung:
ProductGridFragment.kt
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment with the ProductGrid theme
val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
view.recycler_view.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
val adapter = ProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))
return view;
}
Das obige Code-Snippet enthält die erforderlichen Initialisierungsschritte zum Einrichten von RecyclerView. Dazu gehören das Festlegen des Layoutmanagers von RecyclerView sowie das Initialisieren und Festlegen des Adapters von RecyclerView.
Die Datei ProductGridFragment.kt sollte jetzt so aussehen:
ProductGridFragment .kt
package com.google.codelabs.mdc.kotlin.shrine
import android.os.Bundle
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*
class ProductGridFragment : Fragment() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setHasOptionsMenu(true)
}
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment with the ProductGrid theme
val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
view.recycler_view.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
val adapter = ProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))
return view;
}
override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
super.onCreateOptionsMenu(menu, menuInflater)
}
}
Erstellen Sie den folgenden Befehl und führen Sie ihn aus:
Die Karten sind da! Es werden noch nichts angezeigt, also lassen Sie uns einige Produktdaten hinzufügen.
Bilder und Text hinzufügen
Fügen Sie für jede Karte ein Bild, einen Produktnamen und einen Preis hinzu. Unsere ViewHolder-Abstraktion enthält die Aufrufe für jede Karte. Fügen Sie die drei Ansichten in der ViewHolder so hinzu:
ProductCardViewHolder.kt
package com.google.codelabs.mdc.kotlin.shrine
import android.view.View
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.android.volley.toolbox.NetworkImageView
class ProductCardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
var productImage: NetworkImageView = itemView.findViewById(R.id.product_image)
var productTitle: TextView = itemView.findViewById(R.id.product_title)
var productPrice: TextView = itemView.findViewById(R.id.product_price)
}
Aktualisieren Sie die Methode onBindViewHolder() in ProductCardRecyclerViewAdapter, um für jede Produktansicht den Titel, den Preis und das Produktbild festzulegen (siehe unten):
ProductCardRecyclerViewAdapter.kt
override fun onBindViewHolder(holder: ProductCardViewHolder, position: Int) {
if (position < productList.size) {
val product = productList[position]
holder.productTitle.text = product.title
holder.productPrice.text = product.price
ImageRequester.setImageFromUrl(holder.productImage, product.url)
}
}
Der Code oben teilt dem Adapter des RecyclerView mit, was mit der jeweiligen Karte zu tun ist. Dazu wird ein ViewHolder verwendet.
Hier werden die Textdaten für jedes TextViews der ViewHolder festgelegt und ein ImageRequester aufgerufen, um ein Bild von einer URL abzurufen. Wir haben den ImageRequester-Kurs für Sie bereitgestellt. Er basiert auf der Volley-Bibliothek und kann in diesem Codelab nicht behandelt werden. Sie können sich den Code aber auch eigenständig ansehen.
Erstellen Sie den folgenden Befehl und führen Sie ihn aus:
Unsere Produkte werden jetzt in der App angezeigt.
6. Zusammenfassung
Unsere App hat einen grundlegenden Ablauf, der den Nutzer vom Anmeldebildschirm zu einem Startbildschirm bringt, auf dem die Produkte angezeigt werden können. Mit nur wenigen Codezeilen fügten wir eine obere App-Leiste mit einem Titel und drei Schaltflächen sowie ein Raster aus Karten hinzu, um den Inhalt unserer App zu präsentieren. Unser Startbildschirm ist jetzt einfach und funktional, mit einer grundlegenden Struktur und umsetzbaren Inhalten.
Weiteres Vorgehen
Mit der oberen App-Leiste, der Karte, dem Textfeld und der Schaltfläche haben wir nun vier Kernkomponenten von Material Design aus der MDC-Android-Bibliothek verwendet. Weitere Komponenten finden Sie im MDC-Android-Katalog.
Sie ist zwar voll funktionsfähig, aber unsere App drückt noch keine bestimmte Marke oder keinen bestimmten Stil aus. In MDC-103: Material Design Theming with Color, Shape, Elevation and Type passen wir den Stil dieser Komponenten an, um eine lebendige, moderne Marke auszudrücken.