Android Kotlin Fundamentals 07.3: GridLayout con RecyclerView

Questo codelab fa parte del corso Android Kotlin Fundamentals. Otterrai il massimo valore da questo corso se lavori in sequenza nei codelab. Tutti i codelab del corso sono elencati nella pagina di destinazione di Android Kotlin Fundamentals.

Introduzione

Uno dei principali punti di forza di RecyclerView è che consente di utilizzare i gestori del layout per controllare e modificare la strategia di layout. Una LayoutManager gestisce la disposizione degli elementi in RecyclerView.

RecyclerView è dotata di layout preconfigurati e pronti all'uso per i casi d'uso più comuni. Ad esempio, puoi utilizzare LinearLayout per gli elenchi orizzontali e verticali o GridLayout per le griglie. Per casi d'uso più complicati, è necessario implementare un LayoutManager personalizzato.

In questo codelab, imparerai a visualizzare i dati utilizzando un layout a griglia anziché un elenco, a partire dall'app di monitoraggio del sonno del codelab precedente. Se non hai l'app del codelab precedente, puoi scaricare il codice di avvio per questo codelab.

Informazioni importanti

Dovresti acquisire familiarità con:

  • Creare un'interfaccia utente di base con Activity, Fragments e Views
  • Spostamento tra frammenti e utilizzo di safeArgs per trasmettere dati tra frammenti
  • Visualizzare modelli, fabbriche di modelli e trasformazioni
  • LiveData e i suoi osservatori
  • Come creare un database Room, creare un DAO e definire le entità
  • Come utilizzare le coroutine per le attività di database e altre attività di lunga durata
  • Come implementare un RecyclerView di base con un Adapter, ViewHolder e un layout degli elementi
  • Come implementare l'associazione di dati per RecyclerView
  • Come creare e utilizzare adattatori di associazione per trasformare i dati

Obiettivi didattici

  • Come utilizzare un LayoutManager diverso per modificare la modalità di visualizzazione dei tuoi dati nel RecyclerView
  • Come creare un layout a griglia per i dati relativi al sonno

In questo lab proverai a:

  • Crea nel tracker l'app di monitoraggio del sonno del codelab precedente di questa serie.
  • Sostituisci l'elenco di dati sul sonno visualizzati da RecyclerView nell'app con una griglia di dati sul sonno.

L'app di monitoraggio del sonno è composta da due schermate, rappresentate da frammenti, come mostrato nella figura che segue.

La prima schermata, mostrata a sinistra, contiene pulsanti per avviare e interrompere il monitoraggio. Sullo schermo sono visualizzati alcuni dati del sonno dell'utente. Il pulsante Cancella elimina definitivamente tutti i dati raccolti dall'app per l'utente. La seconda schermata, mostrata a destra, consente di selezionare una valutazione della qualità del sonno.

Questa app utilizza un'architettura semplificata con un controller UI, un modello vista e LiveData, oltre a un database Room per conservare i dati relativi al sonno.

I dati relativi al sonno vengono mostrati in un elemento RecyclerView. In questo codelab, modificherai l'app in modo che utilizzi un GridLayout. La schermata finale sarà simile allo screenshot di seguito.

In un codelab precedente, quando hai aggiunto RecyclerView a fragment_sleep_tracker.xml, hai aggiunto LinearLayoutManager senza personalizzazioni. Questo codice mostra i dati sotto forma di elenco verticale.

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

LinearLayoutManager è il gestore di layout più comune e semplice per RecyclerView e supporta il posizionamento orizzontale e verticale delle visualizzazioni secondarie. Ad esempio, puoi utilizzare LinearLayoutManager per creare un carosello di immagini che l'utente scorre in orizzontale.

Layout griglia

Un altro caso di utilizzo comune è la necessità di mostrare all'utente una grande quantità di dati, operazione che puoi effettuare utilizzando GridLayout. GridLayoutManager per RecyclerView definisce i dati come griglia scorrevole, come mostrato di seguito.

Dal punto di vista della progettazione, GridLayout è ideale per elenchi che possono essere rappresentati come icone o immagini, come elenchi all'interno di un'app di navigazione fotografica. Nell'app del monitoraggio del sonno, potresti mostrare ogni notte di sonno come una griglia di icone di grandi dimensioni. Questo design fornirebbe all'utente una panoramica della sua qualità del sonno a colpo d'occhio.

In che modo GridLayout struttura gli elementi

GridLayout dispone gli elementi in una griglia di righe e colonne. Supponendo che lo scorrimento verticale, per impostazione predefinita, ogni elemento di una riga occupi un'unica riga." In questo caso, una sezione equivale alla larghezza di una colonna.

Nei primi due esempi mostrati di seguito, ogni riga è composta da tre sezioni. Per impostazione predefinita, GridLayoutManager definisce ogni elemento in un intervallo fino al numero di intervalli specificato. Quando raggiunge il numero di intervalli, va a capo nella riga successiva.

Per impostazione predefinita, ogni elemento occupa un periodo, ma puoi ampliarlo specificando il numero di sezioni da occupare. Ad esempio, l'elemento più in alto nella schermata più a destra (mostrata di seguito) occupa tre sezioni.

In questa attività, prendi l'RecyclerView che hai completato nell'ultimo esercizio e lo aggiorni per visualizzare i dati utilizzando un GridLayoutManager. Puoi continuare a utilizzare l'app del monitoraggio del sonno dal codelab precedente oppure puoi scaricare l'app RecyclerViewGridLayout-Starter da GitHub.

Passaggio 1: cambia il LayoutManager

  1. Se necessario, scarica l'app RecyclerViewGridLayout-Starter per questo codelab da GitHub e apri il progetto in Android Studio.
  2. Apri il file di layout fragment_sleep_tracker.xml.
  3. Rimuovi Gestione layout dalla definizione di RecyclerView sleep_list.

Codice da eliminare:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager
  1. Apri SleepTrackerFragment.kt.
  2. In OnCreateView(), poco prima dell'istruzione return, crea un nuovo verticale, dall'alto verso il basso, con 3 sezioni.

    Il costruttore GridLayoutManager prende in considerazione fino a quattro argomenti: un contesto, ovvero activity, le cifre (colonne, nel layout verticale predefinito), un orientamento (per impostazione predefinita è verticale) e un layout inverso (il valore predefinito è false). 
val manager = GridLayoutManager(activity, 3)
  1. Sotto questa riga, chiedi a RecyclerView di utilizzare questo GridLayoutManager. RecyclerView si trova nell'oggetto binding e si chiama sleepList. Vedi fragment_sleep_tracker.xml.
binding.sleepList.layoutManager = manager

Passaggio 2: modifica il layout

Il layout corrente in list_item_sleep_night.xml mostra i dati utilizzando un'intera riga per notte. In questo passaggio devi definire un layout a elementi quadrati più compatto per la griglia.

  1. Apri list_item_sleep_night.xml.
  2. Elimina TextView sleep_length perché il nuovo design non è necessario.
  3. Sposta quality_string TextView in modo che venga visualizzato sotto il ImageView. Per farlo, devi aggiornare diversi elementi. Ecco il layout finale della quality_string TextView:
<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />
  1. Verifica nella visualizzazione Design che la TextView di quality_string sia posizionata sotto a ImageView.

Poiché hai utilizzato l'associazione di dati, non devi modificare nessuno in Adapter. Il codice dovrebbe funzionare e l'elenco dovrebbe essere visualizzato come una griglia.

  1. Esegui l'app e osserva come vengono visualizzati i dati relativi al sonno in una griglia.

    Tieni presente che ConstraintLayout utilizza ancora l'intera larghezza. GridLayoutManager imposta una larghezza fissa in base alla sua vista. GridLayoutManager si impegna al massimo per rispettare tutti i vincoli quando si applica la griglia, quando si aggiungono spazi vuoti o vengono ritagliati gli elementi.
  1. In SleepTrackerFragment, nel codice che crea il valore GridLayoutManager, modifica il numero di sezioni per GridLayoutManger impostandolo su 1. Esegui l'app e vedrai un elenco.
val manager = GridLayoutManager(activity, 1)
  1. Modifica il numero di intervalli per GridLayoutManager in 10 ed esegui l'app. Noterai che GridLayoutManager adatterà 10 elementi di seguito, ma gli elementi verranno ora ritagliati.
  2. Modifica il numero di intervalli su 5 e la direzione su GridLayoutManager.VERTICAL. Esegui l'app e osserva come puoi scorrere in orizzontale. Devi avere un layout diverso per migliorare l'aspetto.
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
  1. Non dimenticare di impostare il conteggio dello span su 3 e l'orientamento su verticale.

Progetto Android Studio: RecyclerViewGridLayout
  • I gestori del layout gestiscono la disposizione degli elementi in RecyclerView.
  • RecyclerView è dotato di layout preconfigurati per i casi d'uso più comuni, come LinearLayout per gli elenchi orizzontali e verticali e GridLayout per le griglie.
  • Per casi d'uso più complicati, implementa un elemento LayoutManager personalizzato.
  • Dal punto di vista della progettazione, GridLayout è ideale per gli elenchi di elementi che possono essere rappresentati come icone o immagini.
  • GridLayout dispone gli elementi in una griglia di righe e colonne. Supponendo che lo scorrimento sia verticale, ciascun elemento di una riga occupa un elemento chiamato &spant;span."
  • Puoi personalizzare il numero di sezioni occupate da un elemento, creando griglie più interessanti senza dover utilizzare un gestore di layout personalizzato.
  • Viene creato un layout di elemento per una griglia e il gestore di layout si occupa di organizzarli.
  • Puoi impostare LayoutManager per RecyclerView nel file di layout XML contenente l'elemento <RecyclerView> oppure in modo programmatico.

Corsi Udacity:

Documentazione per gli sviluppatori Android:

In questa sezione sono elencati i possibili compiti per gli studenti che lavorano attraverso questo codelab nell'ambito di un corso tenuto da un insegnante. Spetta all'insegnante fare quanto segue:

  • Assegna i compiti, se necessario.
  • Comunica agli studenti come inviare compiti.
  • Valuta i compiti.

Gli insegnanti possono utilizzare i suggerimenti solo quanto e come vogliono e dovrebbero assegnare i compiti che ritengono appropriati.

Se stai lavorando da solo a questo codelab, puoi utilizzare questi compiti per mettere alla prova le tue conoscenze.

Rispondi a queste domande

Domanda 1

Quali dei seguenti strumenti di layout sono forniti da Android? Seleziona tutte le risposte pertinenti.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Domanda 2

Che cos'è un &spant;span"?

▢ Le dimensioni di una griglia creata da GridLayoutManager.

▢ La larghezza di una colonna della griglia.

▢ Le dimensioni di un elemento in una griglia.

▢ Il numero di colonne in una griglia con orientamento verticale.

Inizia la lezione successiva: 7.4: Interazione con gli elementi di RecyclerView