MDC-102 Android: struttura e layout dei materiali (Kotlin)

1. Introduzione

Material Components (MDC) consente agli sviluppatori di implementare Material Design. Creato da un team di ingegneri e designer UX di Google, MDC offre dozzine di componenti dell'interfaccia utente belli e funzionali ed è disponibile per Android, iOS, web e Flutter.material.io/develop

Nel codelab MDC-101, hai utilizzato due componenti materiali (MDC) per creare una pagina di accesso: campi di testo e pulsanti con onde di inchiostro. Ora espandiamo questa base aggiungendo navigazione, struttura e dati.

Cosa creerai

In questo codelab, creerai una schermata Home per un'app chiamata Shrine, un'app di e-commerce che vende abbigliamento e prodotti per la casa. Contiene:

• Una barra delle app in alto
• Un elenco a griglia pieno di prodotti

Questo è il secondo di quattro codelab che ti guideranno nella creazione di un'app per un prodotto chiamato Shrine. Ti consigliamo di eseguire tutti i codelab in sequenza man mano che le attività vengono eseguite passo passo.I codelab correlati sono disponibili all'indirizzo: MDC-101: Nozioni di base sui componenti Material (MDC) MDC-103: Material Design Theming with Color, Shape, Elevation and Type MDC-104: Componenti avanzati di Material Design.

Entro la fine del corso MDC-104, creerai un'app simile alla seguente:

Componenti MCD-Android in questo codelab

• AppBarLayout
• MaterialCardView

In questo codelab utilizzerai i componenti predefiniti forniti da MDC-Android. Imparerai a personalizzarli in MDC-103: Material Design Theming con Colore, Forma, Elevazione e Tipo.

Che cosa ti serve

• Conoscenza di base dello sviluppo di Android
• Android Studio (scaricalo qui se non l'hai ancora fatto)
• Un emulatore o un dispositivo Android (disponibile tramite Android Studio)
• Il codice di esempio (vedi il passaggio successivo)

Come valuteresti il tuo livello di esperienza nella creazione di app per Android?

Principiante Livello intermedio Livello avanzato

2. Configurazione dell'ambiente di sviluppo

Vuoi continuare da MDC-101?

Se hai completato MDC-101, il tuo codice dovrebbe essere preparato per questo codelab. Vai al passaggio 3: Aggiungi una barra delle app superiore.

Parti da zero?

Scarica l'app del codelab introduttivo

Scarica l'app iniziale

L'app iniziale si trova nella directory material-components-android-codelabs-102-starter/kotlin. Assicurati di cd in quella directory prima di iniziare.

…oppure clonalo da GitHub

Per clonare questo codelab da GitHub, esegui i seguenti comandi:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 102-starter

Per ulteriore assistenza: Clonare un repository da GitHub

Carica il codice di avvio in Android Studio

1. Al termine della configurazione guidata e visualizzata la finestra Ti diamo il benvenuto in Android Studio, fai clic su Apri un progetto Android Studio esistente. Passa alla directory in cui hai installato il codice di esempio e seleziona kotlin -> Sanctuary (o cerca shrine sul computer) per aprire il progetto Shipping.
2. Attendi un momento affinché Android Studio crei e sincronizzi il progetto, come mostrato dagli indicatori di attività nella parte inferiore della finestra di Android Studio.
3. A questo punto, Android Studio potrebbe generare alcuni errori di generazione perché non disponi dell'SDK Android o degli strumenti di sviluppo, come quello mostrato di seguito. Segui le istruzioni in Android Studio per installare/aggiornare questi componenti e sincronizzare il progetto.

Aggiungere dipendenze del progetto

Il progetto richiede una dipendenza dalla libreria di supporto Android MDC. Il codice di esempio che hai scaricato dovrebbe già avere questa dipendenza elencata, ma è buona norma seguire i passaggi che seguono per assicurarti.

1. Passa al file build.gradle del modulo app e assicurati che il blocco dependencies includa una dipendenza su MDC per Android:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (Facoltativo) Se necessario, modifica il file build.gradle per aggiungere le seguenti dipendenze e sincronizza il progetto.

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'
}

Esegui l'app iniziale

Assicurati che la configurazione di build a sinistra del pulsante Esegui/Riproduci sia app. Premi il pulsante Esegui/Riproduci verde per compilare ed eseguire l'app. Nella finestra Seleziona destinazione di deployment, se hai già un dispositivo Android elencato tra i dispositivi disponibili, vai al passaggio 8. In caso contrario, fai clic su Crea nuovo dispositivo virtuale. Nella schermata Seleziona hardware, seleziona uno smartphone, ad esempio Pixel 2, quindi fai clic su Avanti. Nella schermata Immagine di sistema, seleziona una versione di Android recente, preferibilmente il livello API più elevato. Se non è installata, fai clic sul link Scarica visualizzato e completa il download. Fai clic su Avanti. Nella schermata Dispositivo virtuale Android (AVD), lascia le impostazioni invariate e fai clic su Fine. Seleziona un dispositivo Android dalla finestra di dialogo della destinazione dell'implementazione. Fai clic su Ok. Android Studio crea l'app, la distribuisce e la apre automaticamente sul dispositivo di destinazione.

Se non riesci ad aggiungere la dipendenza o a eseguire l'app correttamente, interrompi l'ambiente di sviluppo e risolvi i problemi.

Se ricevi un errore INSTALL_FAILED_INVALID_APK durante la creazione, prova a creare un'operazione "Build" -> "Clean Project" (Ripulisci il progetto) in Android Studio.

Operazione riuscita. Dovresti visualizzare la pagina di accesso al Santuario del codelab MDC-101.

Ora che la schermata di accesso ti sembra corretta, aggiungiamo alcuni prodotti all'app.

3. Aggiungi una barra delle app in alto

La schermata Home viene visualizzata quando la pagina di accesso viene chiusa, con il messaggio "Ce l'hai fatta!". Fantastico. Ora invece l'utente non ha azioni da intraprendere né ha la percezione di dove si trova nell'app. Per aiutarci, è il momento di aggiungere la navigazione.

Per navigazione si intendono i componenti, le interazioni, i segnali visivi e l'architettura delle informazioni che consentono agli utenti di spostarsi all'interno di un'app. Contribuisce a rendere rilevabili i contenuti e le funzionalità, in modo che le attività siano facili da completare.

Material Design offre pattern di navigazione che garantiscono un elevato grado di usabilità. Uno dei componenti più visibili è una barra delle app in alto.

La barra delle app in alto è nota come "barra di navigazione" su iOS o semplicemente come "barra delle app" o "intestazione".

Per fornire la navigazione e consentire agli utenti di accedere rapidamente ad altre azioni, aggiungiamo una barra delle app in alto.

Aggiungere un widget AppBar

In shr_product_grid_fragment.xml, elimina il blocco <LinearLayout> contenente il messaggio "Ce l'hai fatta!". TextView e sostituiscilo con quanto segue:

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>

Ora shr_product_grid_fragment.xml dovrebbe avere il seguente aspetto:

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>

Molte barre delle app hanno un pulsante accanto al titolo. Aggiungiamo un'icona del menu tra le nostre.

Aggiungere un'icona di navigazione

Quando ti trovi in shr_product_grid_fragment.xml, aggiungi quanto segue al componente XML Toolbar che hai appena aggiunto al layout:

shr_product_grid_fragment.xml

app:navigationIcon="@drawable/shr_menu"

shr_product_grid_fragment.xml dovrebbe avere il seguente aspetto:

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>

Aggiungere pulsanti di azione e personalizzare la barra delle app in alto

Puoi anche aggiungere pulsanti sul lato finale della barra delle app. In Android, questi pulsanti sono chiamati pulsanti di azione. Stileremo la barra delle app in alto e aggiungeremo i pulsanti di azione al relativo menu in modo programmatico.

Importante: quando importi la classe Toolbar, assicurati di importare androidx.appcompat.widget.Toolbar e non android.widget.Toolbar

Nella funzione onCreateView di ProductGridFragment.kt, imposta Toolbar di activity in modo che venga utilizzato come ActionBar utilizzando setSupportActionBar. Puoi farlo dopo aver creato la vista con inflater.

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;
}

Importante: assicurati di import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*.. In questo modo potremo accedere alla visualizzazione con ID app_bar utilizzando le proprietà sintetiche di Kotlin anziché findViewById.

In tutti i codelab, puoi continuare ad aggiungere istruzioni di importazione quando richiesto da Android Studio.

Successivamente, direttamente sotto il metodo che abbiamo appena modificato per configurare la barra degli strumenti, sostituisci onCreateOptionsMenu per aumentare in modo artificioso i contenuti di shr_toolbar_menu.xml nella barra degli strumenti:

ProductGridFragment.kt

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

Nota: se Android Studio rileva errori Impossibile risolvere il simbolo durante la scrittura di questo codice, premi Alt + Invio o Opzione + Invio su Mac per importare i simboli mancanti.

Infine, esegui l'override di onCreate() in ProductGridFragment.kt e, dopo aver chiamato super(), chiama setHasOptionMenu con true:

ProductGridFragment.kt

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

Gli snippet di codice riportati sopra impostano la barra delle app del nostro layout XML come barra delle app per questa attività. Il callback onCreateOptionsMenu indica all'attività cosa usare come menu. In questo caso, le voci di menu di R.menu.shr_toolbar_menu verranno inserite nella barra delle app. Il file del menu contiene due voci: "Cerca" e "Filtra".

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>

Dopo queste modifiche, il file ProductGridFragment.kt dovrebbe avere il seguente aspetto:

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)
   }
}

Crea ed esegui. La schermata Home dovrebbe avere il seguente aspetto:

Ora la barra degli strumenti ha un'icona di navigazione, un titolo e due icone di azione sul lato destro. La barra degli strumenti mostra anche l'elevazione utilizzando un'ombra sottile che indica che si trova su un livello diverso rispetto ai contenuti.

La barra di stato in alto appare leggermente generica. Per il momento non ti preoccupare, perché lo correggeremo quando si applica il tema cromatico in MDC-103.

4. Aggiungi una carta

Ora che la nostra app ha una certa struttura, organizziamo i contenuti inserendoli nelle schede.

Carte

Le schede sono elementi indipendenti che mostrano contenuti e azioni su un singolo argomento. Sono un modo flessibile per presentare contenuti simili come una raccolta.

Aggiungere una carta

Iniziamo aggiungendo una scheda sotto la barra delle app in alto. Una scheda deve avere una regione per un'immagine, un titolo e un'etichetta per il testo secondario. Aggiungi quanto segue in shr_product_grid_fragment.xml sotto AppBarLayout.

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>

Crea ed esegui:

In questa anteprima, puoi vedere che la scheda è rientrata dal bordo sinistro e ha angoli arrotondati e un'ombra (che esprime l'elevazione della scheda). L'intero elemento è chiamato "contenitore". A parte il container, tutti gli elementi al suo interno sono facoltativi.

A un contenitore puoi aggiungere i seguenti elementi: testo dell'intestazione, miniatura o avatar, testo del sottotitolo, separatori e persino pulsanti e icone. La scheda che abbiamo appena creato, ad esempio, contiene due elementi TextView (uno per il titolo e uno per il testo secondario) in un LinearLayout, allineati nella parte inferiore della scheda.

In genere le schede vengono mostrate in una raccolta insieme ad altre schede. Nella sezione successiva di questo codelab, le mostreremo come una raccolta in una griglia.

5. Crea una griglia di schede

Quando in una schermata sono presenti più schede, queste vengono raggruppate in una o più raccolte. Le schede in una griglia sono complanari, ovvero condividono la stessa elevazione a riposo (a meno che non vengano selezionate o trascinate, ma non tratteremo in questo codelab).

Configurare la griglia di schede

Dai un'occhiata al file shr_product_card.xml che ti abbiamo fornito:

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>

Questo layout della scheda contiene una scheda con un'immagine (in questo caso un NetworkImageView, che ci consente di caricare e mostrare le immagini da un URL) e due TextViews.

Ora dai un'occhiata ai ProductCardRecyclerViewAdapter che ti abbiamo fornito. Si trova nello stesso pacchetto di 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
   }
}

La classe adattatrice sopra indicata gestisce i contenuti della griglia. Per determinare cosa deve fare ogni visualizzazione con i contenuti che le sono stati assegnati, a breve scriveremo il codice per onBindViewHolder().

Nello stesso pacchetto, puoi anche dare un'occhiata a ProductCardViewHolder. Questo corso memorizza le visualizzazioni che influiscono sul layout delle schede, in modo da poterle modificare in un secondo momento.

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)

Per configurare la griglia, dobbiamo prima rimuovere il segnaposto MaterialCardView da shr_product_grid_fragment.xml. A questo punto, devi aggiungere il componente che rappresenta la nostra griglia di schede. In questo caso, utilizzeremo RecyclerView. Aggiungi il componente RecyclerView a shr_product_grid_fragment.xml sotto il componente XML AppBarLayout:

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>

shr_product_grid_fragment.xml dovrebbe avere il seguente aspetto:

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>

Infine, in onCreateView(), aggiungi il codice di inizializzazione RecyclerView in ProductGridFragment.kt dopo aver chiamato setUpToolbar(view) e prima dell'istruzione 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;
}

Lo snippet di codice riportato sopra contiene i passaggi di inizializzazione necessari per configurare un RecyclerView. Ciò include l'impostazione del gestore del layout di RecyclerView, nonché l'inizializzazione e l'impostazione dell'adattatore di RecyclerView.

Il file ProductGridFragment.kt ora dovrebbe avere il seguente aspetto:

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)
   }
}

Crea ed esegui:

Le schede sono ora disponibili. Non mostrano ancora nulla, quindi aggiungiamo alcuni dati di prodotto.

Aggiungere immagini e testo

Per ogni scheda, aggiungi un'immagine, il nome del prodotto e il prezzo. La nostra ViewHolder astrazione contiene le visualizzazioni di ogni scheda. Nel nostro ViewHolder, aggiungi le tre visualizzazioni come segue.

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)
}

Aggiorna il metodo onBindViewHolder() in ProductCardRecyclerViewAdapter per impostare il titolo, il prezzo e l'immagine del prodotto per ogni visualizzazione del prodotto, come mostrato di seguito:

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)
   }
}

Il codice riportato sopra indica all'adattatore di RecyclerView cosa fare con ogni carta utilizzando un ViewHolder.

In questo caso, imposta i dati di testo su ciascuno dei valori TextView di ViewHolder e chiama ImageRequester per recuperare un'immagine da un URL. ImageRequester è un corso che abbiamo fornito per tua comodità e utilizza la libreria Volley (questo è un argomento che non rientra nell'ambito di questo codelab, ma puoi esplorare il codice autonomamente).

Crea ed esegui:

I nostri prodotti vengono ora visualizzati nell'app.

6. Riepilogo

La nostra app prevede un flusso di base che porta l'utente dalla schermata di accesso a una schermata Home in cui è possibile visualizzare i prodotti. In poche righe di codice, abbiamo aggiunto una barra superiore delle app con un titolo e tre pulsanti e una griglia di schede per presentare i contenuti della nostra app. La nostra home page è ora semplice e funzionale, con una struttura di base e contenuti utili.

L'app MDC 102 completata è disponibile scaricando il codelab completo o eseguendo il check out di 102-complete con git: git checkout 102-complete.

Puoi testare la tua versione dell'app confrontandola con quella del ramo.

Passaggi successivi

Con la barra delle app in alto, la scheda, il campo di testo e il pulsante, abbiamo utilizzato quattro componenti di base di Material Design della libreria MDC-Android. Puoi esplorare altri componenti visitando il catalogo MDC-Android.

Sebbene sia completamente funzionale, la nostra app non esprime ancora un brand o uno stile particolare. In MDC-103: Tema di Material Design con colore, forma, elevazione e tipo, personalizzeremo lo stile di questi componenti per esprimere un brand vivace e moderno.

Ho completato questo codelab con una quantità di tempo e di sforzi ragionevoli

Totalmente d'accordo D'accordo Neutrale In disaccordo Totalmente in disaccordo

Vorrei continuare a utilizzare Material Components in futuro

Totalmente d'accordo D'accordo Neutrale In disaccordo Totalmente in disaccordo