1. Einführung
Mit Material Components (MDC) können Entwickler Material Design implementieren. MDC wurde von einem Team aus Ingenieuren 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 |
Im Codelab MDC-101 haben Sie zwei Material-Komponenten (MDC) verwendet, um eine Anmeldeseite zu erstellen: Textfelder und Schaltflächen mit Tintenwellen. Jetzt bauen wir auf dieser Grundlage auf und fügen Navigation, Struktur und Daten hinzu.
Was Sie erstellen
In diesem Codelab erstellen Sie einen Startbildschirm für eine App namens Shrine, eine E-Commerce-App, in der Kleidung und Haushaltswaren verkauft werden. Er enthält:
- Eine obere App-Leiste
- Eine Rasterliste mit Produkten
MDC-Android-Komponenten in diesem Codelab
- AppBarLayout
- MaterialCardView
Voraussetzungen
- Grundkenntnisse 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
Sie machen mit MDC-101 weiter?
Wenn Sie MDC-101 abgeschlossen haben, sollte Ihr Code für dieses Codelab vorbereitet sein. Fahren Sie mit Schritt 3 fort: Obere App-Leiste hinzufügen.
Sie fangen ganz von vorn an?
Starter-App für das Codelab herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-android-codelabs-102-starter/kotlin. Wechseln Sie vor Beginn mit cd in dieses Verzeichnis.
...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
Starter-Code in Android Studio laden
- Sobald der Einrichtungsassistent abgeschlossen ist und das Fenster Welcome to Android Studio (Willkommen bei Android Studio) angezeigt wird, klicken Sie auf Open an existing Android Studio project (Vorhandenes Android Studio-Projekt öffnen). Gehen Sie zu dem Verzeichnis, in dem Sie den Beispielcode installiert haben, und wählen Sie kotlin -> shrine aus. Alternativ können Sie auf Ihrem Computer nach shrine suchen, um das Projekt „Shipping“ zu öffnen.
- Warten Sie einen Moment, bis Android Studio das Projekt erstellt und synchronisiert hat. Dies wird durch Aktivitätsindikatoren unten im Android Studio-Fenster angezeigt.
- An dieser Stelle werden in Android Studio möglicherweise einige Build-Fehler angezeigt, weil das Android SDK oder Build-Tools fehlen, z. B. der unten gezeigte Fehler. Folgen Sie der Anleitung in Android Studio, um diese zu installieren oder zu aktualisieren, und synchronisieren Sie Ihr Projekt.
Projektabhängigkeiten hinzufügen
Für das Projekt ist eine Abhängigkeit von der MDC Android-Supportbibliothek erforderlich. Im heruntergeladenen Beispielcode sollte diese Abhängigkeit bereits aufgeführt sein. Es empfiehlt sich jedoch, die folgenden Schritte auszuführen, um sicherzugehen.
- Gehen Sie zur Datei
build.gradledes Modulsappund prüfen Sie, ob 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 das Projekt zu synchronisieren.
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! Sie sollten die Anmeldeseite von Shrine aus dem Codelab MDC-101 sehen.
Nachdem die Anmeldeseite jetzt gut aussieht, füllen wir die App mit einigen Produkten.
3. Obere App-Leiste hinzufügen
Der Startbildschirm wird angezeigt, wenn die Anmeldeseite geschlossen wird. Auf dem Bildschirm steht „You did it!“ (Sie haben es geschafft!). Sehr gut. Jetzt hat der Nutzer aber keine Aktionen zur Auswahl und weiß nicht, wo er sich in der App befindet. Um das zu ändern, fügen wir Navigation hinzu.
Material Design bietet Navigationsmuster, die ein hohes Maß an Nutzerfreundlichkeit gewährleisten. Eine der sichtbarsten Komponenten ist die obere App-Leiste.
Um Navigation zu ermöglichen und Nutzern schnellen Zugriff auf andere Aktionen zu geben, fügen wir eine obere App-Leiste hinzu.
AppBar-Widget hinzufügen
Löschen Sie in shr_product_grid_fragment.xml den Block <LinearLayout>, der den „You did it!“ 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 Datei 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. Wir fügen unserer ein Menüsymbol hinzu.
Navigationssymbol hinzufügen
Fügen Sie in shr_product_grid_fragment.xml der XML-Komponente Toolbar, die Sie gerade Ihrem Layout hinzugefügt haben, Folgendes hinzu:
shr_product_grid_fragment.xml
app:navigationIcon="@drawable/shr_menu"
Ihre Datei 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 Schaltflächen auf der Endseite der App-Leiste hinzufügen. In Android werden diese als Aktionsschaltflächen bezeichnet. Wir gestalten die obere App-Leiste und fügen ihrem Menü programmatisch Aktionsschaltflächen hinzu.
Legen Sie in der Funktion onCreateView von ProductGridFragment.kt fest, dass die Toolbar der activity mit setSupportActionBar als ActionBar verwendet werden soll. Sie können dies tun, 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;
}
Als Nächstes überschreiben wir direkt unter der Methode, die wir gerade geändert haben, um die Symbolleiste einzurichten, onCreateOptionsMenu, um den Inhalt von shr_toolbar_menu.xml in die Symbolleiste einzufügen:
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 super() setHasOptionMenu mit true auf:
ProductGridFragment.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setHasOptionsMenu(true)
}
Mit den obigen Code-Snippets wird die App-Leiste aus unserem XML-Layout als Aktionsleiste für diese Aktivität festgelegt. Der Callback onCreateOptionsMenu teilt der Aktivität mit, was als Menü verwendet werden soll. In diesem Fall werden die Menüelemente aus R.menu.shr_toolbar_menu in die App-Leiste eingefügt. Die Menüdatei enthält zwei Elemente: „Search“ (Suche) 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 Datei ProductGridFragment.kt 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 so aussehen:
Die Symbolleiste enthält jetzt ein Navigationssymbol, einen Titel und zwei Aktionssymbole auf der rechten Seite. Die Symbolleiste zeigt auch die Ebenentiefe mit einem dezenten Schatten an, der zeigt, dass sie sich auf einer anderen Ebene als der Inhalt befindet.
4. Karte hinzufügen
Nachdem unsere App nun eine Struktur hat, organisieren wir die Inhalte, indem wir sie auf Karten platzieren.
Karte hinzufügen
Fügen wir zuerst eine Karte unter der oberen App-Leiste hinzu. Eine Karte sollte einen Bereich für ein Bild, einen Titel und eine Beschriftung für sekundären Text haben. Fügen Sie in shr_product_grid_fragment.xml unter AppBarLayout 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 und ausführen:
In dieser Vorschau sehen Sie, dass die Karte vom linken Rand eingerückt ist. Sie hat abgerundete Ecken und einen Schatten, der die Ebenentiefe der Karte ausdrückt. Das gesamte Element wird als „Container“ bezeichnet. Abgesehen vom Container sind alle Elemente darin optional.
Sie können einem Container die folgenden Elemente hinzufügen: Überschrift, Miniaturansicht oder Avatar, Unterüberschrift, Trennlinien und sogar Schaltflächen und Symbole. Die Karte, die wir gerade erstellt haben, enthält beispielsweise zwei TextViews (einen für den Titel und einen für sekundären Text) in einem LinearLayout, die unten auf der Karte ausgerichtet sind.
Karten werden normalerweise in einer Sammlung mit anderen Karten angezeigt. Im nächsten Abschnitt dieses Codelabs werden wir sie als Sammlung in einem Raster anordnen.
5. Kartenraster erstellen
Wenn mehrere Karten auf einem Bildschirm vorhanden sind, werden sie zu einer oder mehreren Sammlungen zusammengefasst. Karten in einem Raster sind koplanar, d. h., sie haben dieselbe Ruheebene (es sei denn, sie werden aufgenommen oder gezogen, aber das wird in diesem Codelab nicht behandelt).
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 wir Bilder von einer URL laden und anzeigen können) und zwei TextViews.
Sehen Sie sich als Nächstes den ProductCardRecyclerViewAdapter an, den wir für Sie bereitgestellt haben. Er 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 Adapterklasse oben verwaltet den Inhalt unseres Rasters. Um festzulegen, was mit dem jeweiligen Inhalt in den einzelnen Ansichten geschehen soll, schreiben wir bald den Code für onBindViewHolder().
Im selben Paket finden Sie auch ProductCardViewHolder. 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)
Um unser Raster einzurichten, entfernen wir zuerst den Platzhalter MaterialCardView aus shr_product_grid_fragment.xml. Als Nächstes fügen Sie die Komponente hinzu, die unser Kartenraster darstellt. In diesem Fall verwenden wir eine RecyclerView. Fügen Sie die RecyclerView-Komponente in 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 Datei 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 für RecyclerView in ProductGridFragment.kt ein, nachdem Sie setUpToolbar(view) aufgerufen haben und vor der Anweisung return:
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 einer RecyclerView. Dazu gehört das Festlegen des Layoutmanagers der RecyclerView sowie das Initialisieren und Festlegen des Adapters der RecyclerView.
Ihre 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 und ausführen:
Die Karten sind jetzt da. Sie zeigen aber noch nichts an. Fügen wir also einige Produktdaten hinzu.
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 Ansichten für jede Karte. Fügen Sie in unserem ViewHolder die drei Ansichten wie folgt 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() im ProductCardRecyclerViewAdapter, um den Titel, den Preis und das Produktbild für jede Produktansicht wie unten gezeigt festzulegen:
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 obige Code teilt dem Adapter unserer RecyclerView mit, was mit jeder Karte geschehen soll, und verwendet dazu einen ViewHolder.
Hier werden die Textdaten für die einzelnen TextViews des ViewHolder festgelegt und ein ImageRequester aufgerufen, um ein Bild von einer URL abzurufen. Der ImageRequester ist eine Klasse, die wir für Sie bereitgestellt haben. Sie verwendet die Volley-Bibliothek. Das ist ein Thema, das den Rahmen dieses Codelabs sprengen würde, aber Sie können den Code gerne selbst erkunden.
Erstellen und ausführen:
Unsere Produkte werden jetzt in der App angezeigt.
6. Zusammenfassung
Unsere App hat einen einfachen Ablauf, der den Nutzer von der Anmeldeseite zu einem Startbildschirm führt, auf dem Produkte angezeigt werden können. Mit nur wenigen Codezeilen haben wir eine obere App-Leiste mit einem Titel und drei Schaltflächen sowie ein Kartenraster hinzugefügt, um die Inhalte unserer App zu präsentieren. Unser Startbildschirm ist jetzt einfach und funktional, mit einer grundlegenden Struktur und aktionsorientierten Inhalten.
Weiteres Vorgehen
Mit der oberen App-Leiste, der Karte, dem Textfeld und der Schaltfläche haben wir jetzt vier Kernkomponenten von Material Design aus der MDC-Android-Bibliothek verwendet. Weitere Komponenten finden Sie im MDC-Android-Katalog.
Unsere App ist zwar voll funktionsfähig, drückt aber noch keine bestimmte Marke oder keinen bestimmten Stil aus. In MDC-103: Material Design Theming mit Farbe, Form, Ebenentiefe und Typografie passen wir den Stil dieser Komponenten an, um eine lebendige, moderne Marke zu präsentieren.