Diese Seite wurde von der Cloud Translation API übersetzt.

MDC-102 Android: Material Structure and Layout (Kotlin)

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 mit Wellenwellen. 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 voller Produkte

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?

Fortgeschritten

Profi

Möchtest du vom MDC-101 fortfahren?

Wenn Sie MDC-101 abgeschlossen haben, sollte Ihr Code für dieses Codelab vorbereitet sein. Springen Sie zu Schritt 3: Top-App-Leiste hinzufügen.

Neu beginnen?

Start der Codelab-App herunterladen

Starter-App herunterladen

Die Starter-App befindet sich im Verzeichnis material-components-android-codelabs-102-starter/kotlin. 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 Kotlin -> Schrein aus(oder suchen Sie auf Ihrem Computer nach Schrein), um das Versandprojekt 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.gradle des app-Moduls auf und achten Sie darauf, dass der dependencies-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

Achten Sie darauf, dass die Build-Konfiguration links neben der Schaltfläche Ausführen / Wiedergeben app ist.
Klicken Sie auf die grüne Schaltfläche Ausführen/Wiedergeben, um die App zu erstellen und auszuführen.
Wenn im Fenster Bereitstellungsziel auswählen ein Android-Gerät aufgeführt ist, fahren Sie mit Schritt 8 fort. Andernfalls klicken Sie auf Neues virtuelles Gerät erstellen.
Wählen Sie auf dem Bildschirm Hardware auswählen ein Smartphone aus, z. B. Pixel 2, und klicken Sie dann auf Weiter.
Wählen Sie auf dem Bildschirm System Image eine aktuelle Android-Version aus, am besten das höchste API-Level. Sollte die App nicht installiert sein, klicken Sie auf den angezeigten Link Herunterladen und schließen Sie den Download ab.
Klicken Sie auf Weiter.
Übernehmen Sie auf dem Bildschirm Virtuelles Android-Gerät (AVD) die aktuellen Einstellungen und klicken Sie auf Fertigstellen.
Wählen Sie im Dialogfeld „Bereitstellungsziel“ ein Android-Gerät aus.
Klicke auf OK.
Die App wird mit Android Studio erstellt, bereitgestellt und automatisch auf dem Zielgerät geöffnet.

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 Handlungsmöglichkeit oder Informationen dazu, wo er sich in der App befindet. Daher ist es an der Zeit, die Navigation hinzuzufügen.

Material Design bietet Navigationsmuster, die für ein hohes Maß an Nutzerfreundlichkeit sorgen. Eine der auffälligsten Komponenten 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.

In shr_product_grid_fragment.xml löschen Sie den <LinearLayout>-Block, der &&t aus; 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>

Ihr 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. Hier können wir ein Menüsymbol hinzufügen.

Fügen Sie der Datei Toolbar, die Sie Ihrem Layout gerade 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. Wir gestalten die obere App-Leiste und gestalten ihre Aktionsmenüs programmatisch.

Legen Sie in der onCreateView-Funktion von ProductGridFragment.kt die Toolbar für activity so fest, dass sie mithilfe von setSupportActionBar als ActionBar verwendet werden. Das ist möglich, nachdem die Ansicht mit der inflater erstellt wurde.

ProductGridFragment.kt (in englischer Sprache)

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 für die Einrichtung der Symbolleiste geändert haben, kann onCreateOptionsMenu die Inhalte von shr_toolbar_menu.xml auf die Symbolleiste übertragen:

ProductGridFragment.kt (in englischer Sprache)

override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
   menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
   super.onCreateOptionsMenu(menu, menuInflater)
}

Überschreiben Sie onCreate() in ProductGridFragment.kt und rufen Sie nach dem Aufrufen von super() setHasOptionMenu mit true auf:

ProductGridFragment.kt (in englischer Sprache)

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setHasOptionsMenu(true)
}

Durch die oben angegebenen Code-Snippets 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&quot.

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.kt so aussehen:

ProductGridFragment.kt (in englischer Sprache)

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 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 auf einer anderen Ebene als dem Inhalt 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 Rand ausgerichtet ist, abgerundete Ecken und den Schatten hat (dies entspricht der Höhe der Karte). Das gesamte Element wird als &&t-Container bezeichnet. 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 (in diesem Fall ein NetworkImageView, mit dem wir Bilder aus einer URL laden und einblenden 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
   }
}

Mit der oben angegebenen Adapterklasse wird der Inhalt unseres Rasters verwaltet. Wir werden demnächst den Code für onBindViewHolder() schreiben, um festzustellen, was mit den einzelnen Inhalten passieren soll.

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.kt

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)

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. In diesem Fall verwenden wir einen RecyclerView. Fügen Sie die RecyclerView-Komponente zu Ihrer shr_product_grid_fragment.xml unterhalb der AppBarLayout-XML-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.kt ein:

ProductGridFragment.kt (in englischer Sprache)

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 eines RecyclerView. Dazu gehören das Festlegen des RecyclerView-Layoutmanagers sowie das Initialisieren und Festlegen des RecyclerView-Adapters.

Die Datei ProductGridFragment.kt sollte nun so aussehen:

ProductGridFragment

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. 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ügen Sie in unserem ViewHolder drei Ansichten 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 onBindViewHolder()-Methode in der Datei ProductCardRecyclerViewAdapter, um Titel, Preis und Produktbild für jede Produktansicht 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)
   }
}

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 TextViews der ViewHolder 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. Im MDC-Android-Katalog stehen weitere Komponenten zur Verfügung.

Unsere App ist zwar voll funktionsfähig, hat aber noch keine bestimmte Marke oder einen bestimmten Stil zum Ausdruck. 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.

Ich konnte dieses Codelab mit angemessenem Zeitaufwand starten.

Stimme vollkommen zu

Stimme zu

Neutral

Stimme nicht zu

Stimme überhaupt nicht zu

Ich möchte Materialkomponenten weiterhin verwenden

Stimme vollkommen zu

Stimme zu

Neutral

Stimme überhaupt nicht zu

MDC-102 Android: Material Structure and Layout (Kotlin)

Inhalte, die Sie erstellen werden

MDC-Android-Komponenten in diesem Codelab

Voraussetzungen

Wie würdest du deine Erfahrung beim Erstellen von Android-Apps bewerten?

Möchtest du vom MDC-101 fortfahren?

Neu beginnen?

Start der Codelab-App herunterladen

...oder von GitHub klonen

Startcode in Android Studio laden

Projektabhängigkeiten hinzufügen

Starter-App ausführen

AppBar-Widget hinzufügen

shr_product_grid_fragment.xml

shr_product_grid_fragment.xml

Navigationssymbol hinzufügen

shr_product_grid_fragment.xml

shr_product_grid_fragment.xml

Aktionsschaltflächen hinzufügen und App-Leiste am oberen Bildschirmrand gestalten

ProductGridFragment.kt (in englischer Sprache)

ProductGridFragment.kt (in englischer Sprache)

ProductGridFragment.kt (in englischer Sprache)

shr_ Toolbar_Menü.xml

ProductGridFragment.kt (in englischer Sprache)

Karte hinzufügen

shr_product_grid_fragment.xml

Raster für die Karte einrichten

shr_product_card.xml

shr_product_grid_fragment.xml

shr_product_grid_fragment.xml

ProductGridFragment.kt (in englischer Sprache)

ProductGridFragment

Bilder und Text hinzufügen

ProductCardViewHolder.kt

ProductCardRecyclerViewAdapter.kt

Nächste Schritte

Ich konnte dieses Codelab mit angemessenem Zeitaufwand starten.

Ich möchte Materialkomponenten weiterhin verwenden

MDC-102 Android: Material Structure and Layout (Kotlin) Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Inhalte, die Sie erstellen werden

MDC-Android-Komponenten in diesem Codelab

Voraussetzungen

Wie würdest du deine Erfahrung beim Erstellen von Android-Apps bewerten?

Möchtest du vom MDC-101 fortfahren?

Neu beginnen?

Start der Codelab-App herunterladen

...oder von GitHub klonen

Startcode in Android Studio laden

Projektabhängigkeiten hinzufügen

Starter-App ausführen

AppBar-Widget hinzufügen

Navigationssymbol hinzufügen

Aktionsschaltflächen hinzufügen und App-Leiste am oberen Bildschirmrand gestalten

ProductGridFragment.kt (in englischer Sprache)

ProductGridFragment.kt (in englischer Sprache)

ProductGridFragment.kt (in englischer Sprache)

ProductGridFragment.kt (in englischer Sprache)

Karte hinzufügen

Raster für die Karte einrichten

ProductGridFragment.kt (in englischer Sprache)

Bilder und Text hinzufügen

Nächste Schritte

Ich konnte dieses Codelab mit angemessenem Zeitaufwand starten.

Ich möchte Materialkomponenten weiterhin verwenden

MDC-102 Android: Material Structure and Layout (Kotlin)