Android Kotlin Fundamentals 07.3: GridLayout con RecyclerView

Questo codelab fa parte del corso Android Kotlin Fundamentals. Per ottenere il massimo valore da questo corso, ti consigliamo di seguire le codelab in sequenza. Tutti i codelab del corso sono elencati nella pagina di destinazione dei codelab Android Kotlin Fundamentals.

Introduzione

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

RecyclerView è dotato di gestori di layout predefiniti per casi d'uso comuni. Ad esempio, puoi utilizzare LinearLayout per elenchi orizzontali e verticali o GridLayout per le griglie. Per i casi d'uso più complessi, devi implementare un LayoutManager personalizzato.

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

Cosa devi già sapere

Devi avere familiarità con:

  • Creazione di un'interfaccia utente di base utilizzando Activity, Fragments e Views
  • Navigazione tra i fragment e utilizzo di safeArgs per passare dati tra i fragment
  • Visualizzare modelli, fabbriche di modelli e trasformazioni
  • LiveData e i relativi 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, un ViewHolder e un layout degli elementi
  • Come implementare il data binding per RecyclerView
  • Come creare e utilizzare adattatori di binding per trasformare i dati

Obiettivi didattici

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

In questo lab proverai a:

  • Continua a sviluppare l'app per il monitoraggio del sonno del codelab precedente di questa serie.
  • Sostituisci l'elenco dei dati sul sonno visualizzati da RecyclerView nell'app con una griglia di dati sul sonno.

L'app per il monitoraggio del sonno ha due schermate, rappresentate da frammenti, come mostrato nella figura seguente.

La prima schermata, mostrata a sinistra, ha pulsanti per avviare e interrompere il monitoraggio. La schermata mostra alcuni dati sul sonno dell'utente. Il pulsante Cancella elimina definitivamente tutti i dati raccolti dall'app per l'utente. La seconda schermata, mostrata a destra, serve per selezionare una valutazione della qualità del sonno.

Questa app utilizza un'architettura semplificata con un controller UI, un modello di visualizzazione e LiveData e un database Room per archiviare i dati sul sonno.

I dati sul sonno vengono visualizzati in un RecyclerView. In questo codelab, modifichi l'app in modo che utilizzi un GridLayout. La schermata finale sarà simile allo screenshot riportato di seguito.

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

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

LinearLayoutManager è il gestore 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 orizzontalmente.

GridLayout

Un altro caso d'uso comune è la necessità di mostrare molti dati all'utente, cosa che puoi fare utilizzando GridLayout. Il GridLayoutManager per RecyclerView mostra i dati come una griglia scorrevole, come mostrato di seguito.

Dal punto di vista del design, GridLayout è ideale per gli elenchi che possono essere rappresentati come icone o immagini, ad esempio gli elenchi all'interno di un'app di navigazione tra le foto. Nell'app per il monitoraggio del sonno, potresti mostrare ogni notte di sonno come una griglia di icone grandi. Questo design offre all'utente una panoramica della qualità del sonno a colpo d'occhio.

Come GridLayout dispone gli elementi

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

Nei primi due esempi mostrati di seguito, ogni riga è composta da tre intervalli. Per impostazione predefinita, GridLayoutManager dispone ogni elemento in uno span fino al conteggio degli span specificato. Quando raggiunge il conteggio degli intervalli, va a capo nella riga successiva.

Per impostazione predefinita, ogni elemento occupa un intervallo, ma puoi renderlo più ampio specificando il numero di intervalli che deve occupare. Ad esempio, l'elemento in alto nella schermata più a destra (mostrata di seguito) occupa tre intervalli.

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

Passaggio 1: modifica 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 il gestore layout dalla definizione di sleep_list RecyclerView.

Codice da eliminare:

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

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

Passaggio 2: modifica il layout

Il layout attuale in list_item_sleep_night.xml mostra i dati utilizzando un'intera riga per notte. In questo passaggio, definisci un layout più compatto degli elementi quadrati per la griglia.

  1. Apri list_item_sleep_night.xml.
  2. Elimina sleep_length TextView perché non è necessario per il nuovo design.
  3. Sposta quality_string TextView in modo che venga visualizzato sotto ImageView. Per farlo, devi aggiornare diverse cose. Ecco il layout finale per 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. Nella visualizzazione Progettazione, verifica che quality_string TextView sia posizionato sotto ImageView.

Poiché hai utilizzato il data binding, non devi modificare nulla in Adapter. Il codice dovrebbe funzionare e l'elenco dovrebbe essere visualizzato come griglia.

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

    Tieni presente che ConstraintLayout occupa comunque l'intera larghezza. GridLayoutManager assegna alla visualizzazione una larghezza fissa, in base alla sua estensione. GridLayoutManager fa del suo meglio per rispettare tutti i vincoli durante la disposizione della griglia, aggiungendo spazi vuoti o ritagliando gli elementi.
  1. In SleepTrackerFragment, nel codice che crea GridLayoutManager, modifica il numero di intervalli per GridLayoutManger in modo che sia 1. Esegui l'app e visualizzerai un elenco.
val manager = GridLayoutManager(activity, 1)
  1. Modifica il numero di intervalli per GridLayoutManager in modo che sia 10 ed esegui l'app. Nota che GridLayoutManager conterrà 10 elementi in una riga, ma gli elementi ora sono troncati.
  2. Modifica il conteggio intervalli impostandolo su 5 e la direzione su GridLayoutManager.VERTICAL. Esegui l'app e nota come puoi scorrere orizzontalmente. Per ottenere un buon risultato, dovresti utilizzare un layout diverso.
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
  1. Non dimenticare di impostare di nuovo il numero di intervalli su 3 e l'orientamento su verticale.

Progetto Android Studio: RecyclerViewGridLayout
  • I gestori di layout gestiscono la disposizione degli elementi in RecyclerView.
  • RecyclerView include gestori di layout predefiniti per casi d'uso comuni come LinearLayout per elenchi orizzontali e verticali e GridLayout per griglie.
  • Per casi d'uso più complessi, implementa un LayoutManager personalizzato.
  • Dal punto di vista del design, 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 lo scorrimento verticale, ogni elemento di una riga occupa uno "spazio".
  • Puoi personalizzare il numero di intervalli occupati da un elemento, creando griglie più interessanti senza la necessità di un gestore di layout personalizzato.
  • Crea un layout per un elemento nella griglia e il gestore dei layout si occupa di disporre gli elementi.
  • Puoi impostare LayoutManager per RecyclerView nel file di layout XML che contiene l'elemento <RecyclerView> o in modo programmatico.

Corsi Udacity:

Documentazione per sviluppatori Android:

Questa sezione elenca i possibili compiti a casa per gli studenti che seguono questo codelab nell'ambito di un corso guidato da un insegnante. Spetta all'insegnante:

  • Assegna i compiti, se richiesto.
  • Comunica agli studenti come inviare i compiti.
  • Valuta i compiti a casa.

Gli insegnanti possono utilizzare questi suggerimenti nella misura che ritengono opportuna e sono liberi di assegnare qualsiasi altro compito a casa che ritengono appropriato.

Se stai seguendo questo codelab in autonomia, sentiti libero di utilizzare questi compiti per casa per mettere alla prova le tue conoscenze.

Rispondi a queste domande

Domanda 1

Quali dei seguenti sono gestori di layout forniti da Android? Seleziona tutte le opzioni pertinenti.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Domanda 2

Che cos'è un "intervallo"?

▢ Le dimensioni di una griglia creata da GridLayoutManager.

▢ La larghezza di una colonna nella 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: Interagire con gli elementi RecyclerView