9.13: Sviluppiamo un’app per la gestione della lista della spesa: la RecyclerView pt. 1

Condividi su:

Passo dopo passo stiamo sviluppando una vera e propria app completa di tutto per riepilogare quanto appreso finora. Negli articoli precedenti abbiamo preparato il progetto e ci siamo focalizzati sull’handler del database. Con quest’ultimo abbiamo finito, quindi possiamo passare ad altro. Dovremo servirci necessariamente di una RecyclerView per visualizzare gli item memorizzati, quindi iniziamo ad implementarla.




Sappiamo che una RecyclerView è un widget che permette di visualizzare una lista di elementi in modo efficiente, riciclando di volta in volta le view destinate alla visualizzazione degli item e riducendo così le chiamate al metodo “findViewById().

Questa da sola serve a poco e nulla, poiché non è direttamente utilizzabile. Avremo bisogno infatti di un adapter che farà da ponte tra gli elementi prelevati dal database e la RecyclerView e un ViewHolder che si occuperà della gestione delle view per gli item. Infine bisogna predisporre anche un layout proprio per questi item.

Avendo già trattato le RecyclerView, come per i database, non ci soffermeremo in modo dettagliato sui punti già trattati, ma ci limiteremo al ripassare il tutto. Se non ricordate qualcosa, o avete dubbi rivedetevi gli articoli dedicati.

L’activity dedicata

In questo primo articolo ci focalizzeremo sui layout necessari all’utilizzo della RecyclerView. Per il suo utilizzo creeremo una nuova activity: ListActivity.

Anche per questa sfruttiamo il template basic activity. Il widget della RecyclerView andrà quindi posto all’interno del layout “content_list.xml” che è quello dedicato al contenuto  della seconda activity, a sua volta richiamato all’interno del layout “activity_list.xml” che invece contiene solo i widget per la toolbar e il FAB.

Questo è ciò che avremo all’interno di “content_list.xml” dopo aver aggiunto la RecyclerView e sistemato le ancore:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.decodexlab.shoppinglist.Activities.ListActivity"
    tools:showIn="@layout/activity_list">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerViewID"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Il layout degli item della RecyclerView

Sappiamo che questo non è sufficiente, poiché abbiamo bisogno anche del layout dedicato alle view di ogni singolo item, quindi procediamo col creare il file “list_row.xml”. L’elemento radice sarà sempre un linear layout, poiché al suo interno conterrà solo una CardView (avendo un solo elemento figlio, non avremo bisogno di particolari disposizioni), che a sua volta conterrà i vari widget, disposti attraverso un relative layout.

Ricapitolando, in “list_row.xml” abbiamo un linear layout come elemento radice, contenente una CardView, che a sua volta contiene un relative layout, all’interno del quale posizioneremo i vari elementi da visualizzare.

Questo annidamento ci permette di ottenere una lista col classico stile a card, tipico del Material Design e ogni card avrà al suo interno elementi disposti in maniera relativa tra loro.
Quando ci siamo dedicati alle RecyclerView, all’interno della CardView posizionammo un linear layout per avere le varie TextView in esso contenute allineate l’una sotto l’altra. In questo caso ci avvaliamo di un relative layout poiché oltre alle varie TextView contenenti le informazioni prelevate da database inseriremo anche due pulsanti: il primo dedicato alla modifica dell’item, il secondo alla cancellazione dell’item.
Per sfruttare tutto lo spazio questi pulsanti li posizioneremo all’estrema destra della card. Quindi sulla sinistra avremo le varie TextView allineate verticalmente; alla destra i due pulsanti. Per migliorare ulteriormente la resa, i due pulsanti li inseriamo in una TableRow, così da averli entrambi su una riga. Infine sfrutteremo le proprietà del relative layout per tenere tutto allineato secondo ciò che vogliamo ottenere.

Questo vi aiuta a capire che combinando vari widget e layout potete ottenere l’aspetto e l’allineamento che volete, quindi non dovete necessariamente rispettare questa disposizione, ma creare quella che più vi piace, l’importante è che siano presenti tutti gli elementi di cui necessitiamo, cioè tre TextView, una per il nome dell’item, la seconda per la quantità e la terza per la data di salvataggio e i due pulsanti.

Vediamo l’intero file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="5dp">

    <android.support.v7.widget.CardView
        android:id="@+id/cardViewID"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="15dp">

            <TextView
                android:id="@+id/nameID"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/quantityID"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/nameID"
                android:paddingTop="5dp"
                android:textStyle="italic" />

            <TextView
                android:id="@+id/dateID"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/quantityID"
                android:paddingTop="5dp"
                android:textStyle="italic" />

            <TableRow
                android:layout_alignParentRight="true"
                android:layout_alignBottom="@id/dateID"
                android:layout_marginTop="15dp"
                android:orientation="horizontal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <Button
                    android:id="@+id/editButtonID"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_marginRight="15dp"
                    android:background="@drawable/ic_edit_black_24dp"/>
                <Button
                    android:id="@+id/deleteButtonID"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:background="@drawable/ic_delete_black_24dp"/>


            </TableRow>


        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

A parte le varie personalizzazioni come stili, margini, padding, ecc, degne di nota sono le proprietà: “layout_below” della seconda e terza TextView che in pratica le allinea sotto quella superiore; “layout_alignParentRight” e “layout_alignBottom” della TableRow che la allineano sulla destra del genitore (quindi nella parte destra della CardView) e la parte inferiore di questa con quella dell’elemento indicato. Queste sono proprietà tipiche del relative layout.
“orientation” della TableRow stabilisce l’orientamento della riga, con “horizontal” avremo praticamente i due pulsanti su una riga orizzontale.
Per questi due sono state scelte due icone caricate all’interno della cartella drawable. Potete sfruttare tranquillamente quelle rese disponibili dal framework, crearne di vostre o scaricarne di apposite.



Questo è ciò che otteniamo:

RecyclerView Card

Possiamo fermarci qui, con prossimo articolo ci dedicheremo all’adapter.

Condividi su:

label, , , , ,

About the author