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-101 haben Sie zwei Material Components (MDC) zur Erstellung einer Anmeldeseite verwendet: Textfelder und Schaltflächen. Jetzt fügen wir Navigation, Struktur und Daten hinzu, um diese Grundlage zu erweitern.
Inhalte, die Sie erstellen werden
In diesem Codelab erstellen Sie einen Startbildschirm für eine App namens Shrine, eine E-Commerce-App, über die Kleidung und Haushaltswaren verkauft werden. Sie enthält:
- Eine App-Leiste oben
- Eine Rasterliste mit Produkten
MDC-Android-Komponenten in diesem Codelab
- Layout von AppBar
- MaterialCardView
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?
Möchtest du vom MDC-101 fortfahren?
Wenn Sie MDC-101 abgeschlossen haben, sollte Ihr Code für dieses Codelab bereit sein. Sie können mit Schritt 3 Untere App-Leiste hinzufügen fortfahren.
Neu beginnen?
Start der Codelab-App herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-android-codelabs-102-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 102-starter
Startcode in Android Studio laden
- 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.
- Warten Sie einen Moment, bis Android Studio das Projekt erstellt und synchronisiert hat. Dies wird durch Aktivitätsindikatoren unten im Android Studio-Fenster angezeigt.
- 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.
- Rufen Sie die Datei
build.gradledesapp-Moduls auf und achten Sie darauf, dass derdependencies-Block eine Abhängigkeit von MDC Android enthält:
api 'com.google.android.material:material:1.1.0-alpha06'
- 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
|
Fertig! Sie sollten die Schrein-Anmeldeseite des MDC-101-Codelabs sehen.
Auf dem Anmeldebildschirm sieht jetzt alles gut aus. Lass uns jetzt ein paar Produkte in die App einfügen.
Der Startbildschirm wird eingeblendet, wenn die Anmeldeseite geschlossen wird. Auf dem Bildschirm steht „Du hast es geschafft!“. Das ist großartig! Jetzt hat der Nutzer jedoch keine Aktionen mehr und kann noch nicht nachvollziehen, wo er sich in der App befindet. Hierfür ist Navigation erforderlich.
Material Design bietet Navigationsmuster, die für ein hohes Maß an Nutzerfreundlichkeit sorgen. Eine der wichtigsten Navigationskomponenten ist die oberste App-Leiste.
Fügen Sie oben eine App-Leiste hinzu, um die Navigation zu ermöglichen und Nutzern den Zugriff auf andere Aktionen zu ermöglichen.
AppBar-Widget hinzufügen
Löschen Sie in shr_product_grid_fragment.xml das <LinearLayout>-Tag, das das &&t enthält. Sie haben es geschafft! TextView und ersetzen Sie es 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>Dein 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:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
</FrameLayout>Viele App-Leisten haben eine Schaltfläche neben dem Titel. Lass uns ein Menüsymbol hochladen.
Navigationssymbol hinzufügen
Fügen Sie der Datei Toolbar, die Sie gerade dem Layout hinzugefügt haben, Folgendes hinzu, während Sie sich noch in shr_product_grid_fragment.xml befinden:
shr_product_grid_fragment.xml
app:navigationIcon="@drawable/shr_menu"Dein 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 App-Leiste am oberen Bildschirmrand gestalten
Sie können auch Schaltflächen am Ende der App-Leiste einfügen. In Android werden diese Aktionsschaltflächen genannt.
Verändern Sie die obere App-Leiste und fügen Sie dem Menü programmatisch Aktionsschaltflächen hinzu.
Zuerst erstellen wir eine Methode, um die Symbolleiste einzurichten. Die Methode sollte mithilfe der id einen Verweis auf die Symbolleiste und mithilfe von getActivity() einen Verweis auf die Aktivität abrufen. Wenn die Aktivität NULL ist, setze die Toolbar mithilfe von setSupportActionBar als ActionBar:
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);
}
}Als Nächstes fügen wir direkt unter der soeben hinzugefügten Methode setUpToolbar die Methode onCreateOptionsMenu hinzu, um den Inhalt von shr_toolbar_menu.xml auf die Symbolleiste zu erhöhen:
ProductGridFragment.java.
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
super.onCreateOptionsMenu(menu, menuInflater);
}Fügen Sie nun dem folgenden Befehl einen Aufruf der Methode setUpToolbar hinzu, die dem Inhalt der Methode onCreateView() hinzugefügt wurde:
ProductGridFragment.java.
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
return view;
}Fügen Sie abschließend eine onCreate()-Methode für ProductGridFragment.java hinzu. Setze im Parametertext den Parameter setHasOptionMenu auf true.
Die Methode sollte so aussehen:
ProductGridFragment.java.
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}Durch den Code oben wird die App-Leiste aus unserem XML-Layout als Aktionsleiste für diese Aktivität festgelegt. Der Callback onCreateOptionsMenu gibt der Aktivität an, was als Menü verwendet werden soll. In diesem Fall werden die Menüpunkte von R.menu.shr_toolbar_menu in die App-Leiste eingefügt.
Die Speisekarte enthält zwei Elemente: &Search;"Filter".
shr_ Toolbar_Menü.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 die Datei ProductGridFragment.java so aussehen:
ProductGridFragment.java.
package com.google.codelabs.mdc.java.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 android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
public class ProductGridFragment extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
return view;
}
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
}
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
super.onCreateOptionsMenu(menu, menuInflater);
}
}Erstellen und ausführen Der Startbildschirm sollte so aussehen:
Die Symbolleiste verfügt jetzt über ein Navigationssymbol, einen Titel und zwei Aktionssymbole auf der rechten Seite. Die Symbolleiste zeigt die Höhe mit einem subtilen Schatten an.
Nachdem unsere App jetzt etwas strukturiert hat, ordnen wir den Inhalt jetzt in Karten an.
Karte hinzufügen
Fügen Sie zuerst eine Karte unter der oberen App-Leiste hinzu. Auf einer Karte sollte es einen Bereich für ein Bild, einen Titel und ein Label für sekundären Text geben.
Füge 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 Bildschirmrand positioniert wurde. Sie hat abgerundete Ecken und einen Schatten, der die Höhe der Karte darstellt. Der gesamte Bereich wird als &Container;" Mit Ausnahme des Containers sind alle darin enthaltenen Elemente optional.
Sie können einem Container die folgenden Elemente hinzufügen: Überschrift, Thumbnail oder Avatar, Zwischenüberschrift, Trennlinien und sogar Schaltflächen und Symbole. Die soeben erstellte Karte enthält beispielsweise zwei TextView-Elemente (eines für den Titel und eine für sekundären Text) in einem LinearLayout-Element, das am unteren Rand der Karte ausgerichtet ist.
Die Karten werden normalerweise zusammen mit anderen Karten angezeigt. Im nächsten Abschnitt dieses Codelabs werden sie als Raster dargestellt.
Wenn mehrere Karten auf einem Bildschirm vorhanden sind, werden sie in einer oder mehreren Sammlungen gruppiert. Die Karten in einem Raster sind koplanar. Das heißt, sie teilen sich dieselbe Höhe aufeinander, wie sie sind – es sei denn, sie werden in dieses Codelab aufgenommen und werden nicht aufgenommen.
Raster für die Karte einrichten
Hier finden Sie eine shr_product_card.xml-Datei, 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 (hier ein NetworkImageView, mit dem wir Bilder aus einer URL hinzufügen 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.java
package com.google.codelabs.mdc.java.shrine;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.google.codelabs.mdc.java.shrine.network.ImageRequester;
import com.google.codelabs.mdc.java.shrine.network.ProductEntry;
import java.util.List;
/**
* Adapter used to show a simple grid of products.
*/
public class ProductCardRecyclerViewAdapter extends RecyclerView.Adapter<ProductCardViewHolder> {
private List<ProductEntry> productList;
private ImageRequester imageRequester;
ProductCardRecyclerViewAdapter(List<ProductEntry> productList) {
this.productList = productList;
imageRequester = ImageRequester.getInstance();
}
@NonNull
@Override
public ProductCardViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.shr_product_card, parent, false);
return new ProductCardViewHolder(layoutView);
}
@Override
public void onBindViewHolder(@NonNull ProductCardViewHolder holder, int position) {
// TODO: Put ViewHolder binding code here in MDC-102
}
@Override
public int getItemCount() {
return productList.size();
}
}Mit der oben angegebenen Adapterklasse wird der Inhalt unseres Rasters verwaltet. Um festzulegen, was die einzelnen Inhalte mit dem jeweiligen Inhalt tun sollen, werden wir demnächst den Code für onBindViewHolder() schreiben.
Du kannst dir im selben Paket auch ProductCardViewHolder ansehen. In dieser Klasse werden die Aufrufe gespeichert, die sich auf das Kartenlayout auswirken, sodass wir diese später ändern können.
ProductCardViewHolder.java (in englischer Sprache)
package com.google.codelabs.mdc.java.shrine;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import android.view.View;
public class ProductCardViewHolder extends RecyclerView.ViewHolder {
public ProductCardViewHolder(@NonNull View itemView) {
super(itemView);
// TODO: Find and store views from itemView
}
}Bevor wir das Raster einrichten können, müssen wir den Platzhalter „MaterialCardView“ aus „shr_product_grid_fragment.xml“ entfernen. Als Nächstes fügen Sie die Komponente hinzu, die unser Kartenraster darstellt. Fügen Sie in diesem Fall Ihrer shr_product_grid_fragment.xml-Komponente unter der XML-Komponente AppBarLayout eine RecyclerView-Komponente 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>Dein 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() nach dem Aufruf von setUpToolbar(view) und vor der return-Anweisung den RecyclerView-Initialisierungscode in ProductGridFragment.java ein:
ProductGridFragment.java.
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
...
setUpToolbar(view);
// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));
ProductCardRecyclerViewAdapter adapter = new ProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));
return view;
}Das obige Code-Snippet enthält die erforderlichen Initialisierungsschritte zum Einrichten eines RecyclerView. Dazu gehören das Festlegen des RecyclerView-Layoutmanagers sowie das Initialisieren und Festlegen des RecyclerView-Adapters.
Die Datei ProductGridFragment.java sollte nun so aussehen:
ProductGridFragment.java.
package com.google.codelabs.mdc.java.shrine;
import android.os.Bundle;
import androidx.recyclerview.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.GridLayoutManager;
import com.google.codelabs.mdc.java.shrine.network.ProductEntry;
public class ProductGridFragment extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));
ProductCardRecyclerViewAdapter adapter = new ProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));
return view;
}
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
}
@Override
public void 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. Da ihre Produkte noch nicht angezeigt werden, müssen Sie Produktdaten hinzufügen.
Bilder und Text hinzufügen
Geben Sie für jede Karte ein Bild, den Produktnamen und den Preis an. Unsere ViewHolder-Abstraktion enthält die Aufrufe für jede Karte. Füge in unserer ViewHolder die folgenden drei Ansichten hinzu:
ProductCardViewHolder.java (in englischer Sprache)
package com.google.codelabs.mdc.java.shrine;
import androidx.recyclerview.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import androidx.annotation.NonNull;
import com.android.volley.toolbox.NetworkImageView;
public class ProductCardViewHolder extends RecyclerView.ViewHolder {
public NetworkImageView productImage;
public TextView productTitle;
public TextView productPrice;
public ProductCardViewHolder(@NonNull View itemView) {
super(itemView);
productImage = itemView.findViewById(R.id.product_image);
productTitle = itemView.findViewById(R.id.product_title);
productPrice = itemView.findViewById(R.id.product_price);
}
}Aktualisieren Sie in unserem ViewHolder,-Adapter in der ViewHolder,-Methode die onBindViewHolder()-Methode, um die Informationen für jede Ansicht festzulegen:
ProductCardRecyclerViewAdapter.java
@Override
public void onBindViewHolder(@NonNull ProductCardViewHolder holder, int position) {
if (productList != null && position < productList.size()) {
ProductEntry product = productList.get(position);
holder.productTitle.setText(product.title);
holder.productPrice.setText(product.price);
imageRequester.setImageFromUrl(holder.productImage, product.url);
}
}Mit dem Code oben gibst du unserem RecyclerViewAdapter an, was mit der jeweiligen Karte passieren soll. Verwenden Sie dazu einen ViewHolder
Hier werden die Textdaten für alle ViewHolder-TextViews festgelegt und ein ImageRequester aufgerufen, um ein Bild aus einer URL zu erhalten. Die ImageRequester ist eine Klasse, die wir Ihnen zur Verfügung stellen. Sie verwendet die Volley-Bibliothek (das ist nur ein Thema dieses Codelabs, aber Sie können sich den Code gern selbst ansehen).
Erstellen und ausführen:
Unsere Produkte sind jetzt in der App zu sehen.
Unsere App verfügt über einen einfachen Ablauf, über den Nutzer vom Anmeldebildschirm zu einem Startbildschirm gelangen, auf dem die Produkte angezeigt werden. In nur wenigen Codezeilen haben wir eine App-Leiste mit einem Titel, drei Schaltflächen und einem Raster aus Karten hinzugefügt, um den Inhalt unserer App zu präsentieren. Der Startbildschirm ist jetzt einfach und funktional. Wir haben eine Grundstruktur und praktische Inhalte.
Nächste Schritte
Mit der oberen App-Leiste, der Karte, dem Textfeld und der Schaltfläche haben wir jetzt vier Material Design-Komponenten aus der MDC-Android-Bibliothek verwendet. In den Komponenten des MDC-Android-Katalogs im MDC für Android stehen noch mehr Komponenten zur Verfügung.
Unsere App ist zwar voll funktionsfähig, aber unsere App drückt noch keine bestimmte Marke aus. In MDC-103: Material Design Theming with Color, Shape, Elevation and Type passen wir den Stil dieser Komponenten an, um so eine lebhafte, moderne Marke auszudrücken.