Questa pagina è stata tradotta dall'API Cloud Translation.

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

Material Components (MDC) aiuta gli sviluppatori a implementare Material Design. Creato da un team di ingegneri e progettisti UX di Google, MDC include decine di componenti UI belli e funzionali ed è disponibile per Android, iOS, web e Flutter.

material.io/develop

Nel codelab MDC-101, hai utilizzato due componenti Material (MDC) per creare una pagina di accesso: campi di testo e pulsanti con increspature di inchiostro. Ora ampliamo 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 dell'app in alto
Un elenco a griglia pieno di prodotti

Componenti MDC-Android in questo codelab

AppBarLayout
MaterialCardView

Che cosa ti serve

Conoscenza di base dello sviluppo Android
Android Studio (scaricalo qui se non lo hai già)
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

Intermedio

Avanzato

Hai seguito il corso MDC-101?

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

Parti da zero?

Scarica l'app codelab iniziale

Scaricare l'app iniziale

L'app iniziale si trova nella directory material-components-android-codelabs-102-starter/kotlin. Assicurati di cd in questa 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

Carica il codice di avvio in Android Studio

Al termine della configurazione guidata e alla visualizzazione della finestra Benvenuto in Android Studio, fai clic su Apri un progetto Android Studio esistente. Vai alla directory in cui hai installato il codice di esempio e seleziona kotlin -> shrine (o cerca shrine sul computer) per aprire il progetto Shipping.
Attendi un attimo che Android Studio crei e sincronizzi il progetto, come indicato dagli indicatori di attività nella parte inferiore della finestra di Android Studio.
A questo punto, Android Studio potrebbe generare alcuni errori di build perché mancano l'SDK Android o gli strumenti di build, come quello mostrato di seguito. Segui le istruzioni in Android Studio per installare/aggiornare questi elementi e sincronizzare il progetto.

Aggiungere le dipendenze del progetto

Il progetto richiede una dipendenza dalla libreria di supporto MDC Android. Il codice campione che hai scaricato dovrebbe già avere questa dipendenza elencata, ma è buona norma eseguire i seguenti passaggi per assicurarsi.

Vai al file build.gradle del modulo app e assicurati che il blocco dependencies includa una dipendenza da MDC Android:

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

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

Eseguire l'app iniziale

Assicurati che la configurazione della build a sinistra del pulsante Esegui / Riproduci sia app.
Premi il pulsante verde Esegui / Riproduci per creare ed eseguire l'app.
Nella finestra Seleziona destinazione di distribuzione, se hai già un dispositivo Android elencato nei 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, e poi fai clic su Avanti.
Nella schermata Immagine di sistema, seleziona una versione recente di Android, preferibilmente il livello API più alto. Se non è installato, fai clic sul link Scarica mostrato e completa il download.
Fai clic su Avanti.
Nella schermata Android Virtual Device (AVD), lascia le impostazioni invariate e fai clic su Fine.
Seleziona un dispositivo Android dalla finestra di dialogo Destinazione di deployment.
Fai clic su Ok.
Android Studio crea l'app, la esegue il deployment e la apre automaticamente sul dispositivo di destinazione.

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

Ora che la schermata di accesso è a posto, inseriamo alcuni prodotti nell'app.

La schermata Home viene visualizzata quando la pagina di accesso viene chiusa, con un messaggio che dice "Hai fatto tutto!". Fantastico. Ora, però, l'utente non ha azioni da intraprendere e non sa dove si trova nell'app. Per risolvere questo problema, è il momento di aggiungere la navigazione.

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

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

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>

Il tuo shr_product_grid_fragment.xml ora 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.

Mentre ti trovi ancora 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"

Il tuo 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 definire lo stile della barra delle app superiore

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

Nella funzione onCreateView di ProductGridFragment.kt, imposta Toolbar di activity da utilizzare 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;
}

Successivamente, direttamente sotto il metodo che abbiamo appena modificato per configurare la barra degli strumenti, eseguiamo l'override di onCreateOptionsMenu per inserire 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)
}

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 dell'app dal layout XML in modo che sia la barra delle azioni per questa attività. Il callback onCreateOptionsMenu indica all'attività cosa utilizzare come menu. In questo caso, inserirà le voci di menu di R.menu.shr_toolbar_menu nella barra delle app. Il file di menu contiene due elementi: "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 essere simile a questa:

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 leggera che indica che si trova su un livello diverso rispetto ai contenuti.

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

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, ha angoli arrotondati e un'ombra (che esprime l'elevazione della scheda). L'intero elemento è chiamato "contenitore". A parte il contenitore, tutti gli elementi al suo interno sono facoltativi.

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

Le carte vengono solitamente mostrate in una raccolta con altre carte. Nella sezione successiva di questo codelab, li disporremo come una raccolta in una griglia.

Quando in una schermata sono presenti più schede, queste vengono raggruppate in una o più raccolte. Le schede in una griglia sono complanari, il che significa che condividono la stessa elevazione di riposo (a meno che non vengano sollevate o trascinate, ma non tratteremo questo argomento 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 immagini da un URL) e due TextViews.

Dopodiché, dai un'occhiata ai ProductCardRecyclerViewAdapter che 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 adattatore riportata sopra gestisce i contenuti della nostra griglia. Per determinare cosa deve fare ogni visualizzazione con i contenuti forniti, a breve scriveremo il codice per onBindViewHolder().

Nello stesso pacchetto, puoi anche dare un'occhiata a ProductCardViewHolder. Questa classe memorizza le visualizzazioni che influiscono sul layout della scheda, 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, aggiungi il componente che rappresenta la griglia di schede. In questo caso, utilizzeremo un RecyclerView. Aggiungi il componente RecyclerView al tuo 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>

Il tuo 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 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:

Ora le schede sono 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 astrazione ViewHolder contiene le visualizzazioni per ogni scheda. Nel nostro ViewHolder, aggiungi le tre viste nel seguente modo.

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 scheda, utilizzando un ViewHolder.

Qui imposta i dati di testo su ciascun ViewHolder TextView e chiama un ImageRequester per ottenere un'immagine da un URL. ImageRequester è una classe che abbiamo fornito per comodità e utilizza la libreria Volley (questo argomento non rientra nell'ambito di questo codelab, ma puoi esplorare il codice in autonomia).

Crea ed esegui:

Ora i nostri prodotti vengono visualizzati nell'app.

La nostra app ha un flusso di base che porta l'utente dalla schermata di accesso a una schermata Home, dove è possibile visualizzare i prodotti. Con poche righe di codice, abbiamo aggiunto una barra dell'app superiore con un titolo e tre pulsanti, nonché una griglia di schede per presentare i contenuti della nostra app. La nostra schermata Home è ora semplice e funzionale, con una struttura di base e contenuti su cui è possibile intervenire.

Passaggi successivi

Con la barra delle app superiore, la scheda, il campo di testo e il pulsante, ora abbiamo utilizzato quattro componenti principali 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: Material Design Theming with Color, Shape, Elevation and Type, personalizzeremo lo stile di questi componenti per esprimere un brand vivace e moderno.

Sono riuscito a completare questo codelab con un ragionevole dispendio di tempo e impegno

Totalmente d'accordo

D'accordo

Indifferente

In disaccordo

Totalmente in disaccordo

Vorrei continuare a utilizzare i componenti Material in futuro

Totalmente d'accordo

D'accordo

Indifferente

In disaccordo

Totalmente in disaccordo

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

Cosa creerai

Componenti MDC-Android in questo codelab

Che cosa ti serve

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

Hai seguito il corso MDC-101?

Parti da zero?

Scarica l'app codelab iniziale

… oppure clonalo da GitHub

Carica il codice di avvio in Android Studio

Aggiungere le dipendenze del progetto

Eseguire l'app iniziale

Aggiungere un widget AppBar

shr_product_grid_fragment.xml

shr_product_grid_fragment.xml

Aggiungere un'icona di navigazione

shr_product_grid_fragment.xml

shr_product_grid_fragment.xml

Aggiungere pulsanti di azione e definire lo stile della barra delle app superiore

ProductGridFragment.kt

ProductGridFragment.kt

ProductGridFragment.kt

shr_toolbar_menu.xml

ProductGridFragment.kt

Aggiungere una carta

shr_product_grid_fragment.xml

Configurare la griglia di schede

shr_product_card.xml

shr_product_grid_fragment.xml

shr_product_grid_fragment.xml

ProductGridFragment.kt

ProductGridFragment .kt

Aggiungere immagini e testo

ProductCardViewHolder.kt

ProductCardRecyclerViewAdapter.kt

Passaggi successivi

Sono riuscito a completare questo codelab con un ragionevole dispendio di tempo e impegno

Vorrei continuare a utilizzare i componenti Material in futuro

MDC-102 Android: struttura e layout dei materiali (Kotlin) Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Cosa creerai

Componenti MDC-Android in questo codelab

Che cosa ti serve

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

Hai seguito il corso MDC-101?

Parti da zero?

Scarica l'app codelab iniziale

… oppure clonalo da GitHub

Carica il codice di avvio in Android Studio

Aggiungere le dipendenze del progetto

Eseguire l'app iniziale

Aggiungere un widget AppBar

Aggiungere un'icona di navigazione

Aggiungere pulsanti di azione e definire lo stile della barra delle app superiore

Aggiungere una carta

Configurare la griglia di schede

Aggiungere immagini e testo

Passaggi successivi

Sono riuscito a completare questo codelab con un ragionevole dispendio di tempo e impegno

Vorrei continuare a utilizzare i componenti Material in futuro

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