Liste con Android (prima parte)

In questo articolo svilupperemo una semplice app Android per la creazione di liste. In particolare creeremo passo passo due liste, una semplice tramite array di stringhe, e un’altra con due campi per riga (item); in quest’ultima, gli item saranno aggiunti a una LinkedList e “adattati” alla parte grafica grazie a un CustomAdapter.
Nella seconda lista inseriremo anche la possibilità di modificare ed aggiungere item tramite Dialog.
Se volete già guardare l’effetto finale andate nelle figure dell’app finita.
Verrà spiegato come:

  • creare una lista semplice tramite array di Stringhe, ed ArrayAdapter
  • creare una lista un pò più complessa con due campi per item e per la quale serve anche
    • creare una classe per i dati di un singolo Item della lista
    • creare un CustomAdpater (adapter personalizzato) per una lista
  • aggiungere, modificare ed eliminare un Item dinamicamente tramite un Dialog


Per snellire il presente articolo il codice per la creazione della seconda lista sarà descritto in un altro articolo.

Contenuti (lista semplice)
Introduzione
File
Classi usate
Figure

Introduzione

L’ambiente di sviluppo usato è come sempre Android Studio.
All’inizio della creazione dell’app scegliamo quella con Blank Activity ( chi non ha mai creato un’app può far riferimento all’articolo Calcolatrice Android ), in modo da aver già molto codice scritto in automatico.
Creeremo

  • una prima lista con nomi di persona e un pulsante che porta alla seconda lista inserita in un’altra activity;
  • una seconda lista con nomi di città e voto assegnato (immaginando che un utente assegni un voto compreso tra 0 e 10 ad ogni città visitata).

Ogni Item della lista avrà un eventListener (ascoltatore di eventi) che all’onClick apre un Dialog (finestra di dialogo popup) che permette di:

  • modificare i dati
  • annullare (chiudere il Dialog)
  • eliminare l’Item

L’eventListener della lista si chiama in realtà onItemClickListener a differenza del listener di altri oggetti che si chiama: onClickListener.
Lo stesso Dialog (con le modifiche opportune) sarà usato per l’aggiunta di un nuovo Item.
La parte grafica prevede la prima lista con un pulsante sotto e la seconda con i pulsanti sopra.

Ecco i file della lista semplice

AndroidManifest.xml
simple_list.xml parte grafica della lista
row.xml per definire il contenuto di ogni Item o riga
MainActivity.java codice java della lista

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="yasb.listapaesi" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_title"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_title" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".RatedList"
            android:label="@string/app_title">
        </activity>
    </application>
</manifest>

su^

simple_list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="center_horizontal"
    android:background="@color/coloresfondo">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ELENCO TURISTI PER CASO"
        android:id="@+id/txtTitle"
        android:textColor="@color/coloretitolo"
        android:textSize="20dip"
        android:padding="5dip"
        android:layout_gravity="center_horizontal"
        />
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">
        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <ListView
                android:id="@+id/list"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                />
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_weight="0"
                >
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/btnViewRatedList"
                    android:text="LISTA VOTI"
                    android:layout_marginLeft="20dip"
                    />
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

Il codice della simple_list è complicato dal fatto di voler permettere lo scrolling implementato tramite ScrollView e di mettere un pulsante sotto la lista; per permettere la corretta visualizzazione e funzionamento si è usato l’opzione android:weigth che vale 0 (zero) per il LinearLayout contenente il Botton e 1 per la ListView.
Una spiegazione dell’attributo android:weight la trovate qui. In realtà, se qualcuno volesse semplicemente provare la lista, e magari pensare dopo a queste aggiunte potrebbe inserire solo la lista tramite l’elemento:

<ListView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/list"
/>

dentro il Layout opportuno.
su^

row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/txtViewList"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:padding="10dip"
        android:textSize="22dip"
        android:textColor="@color/colore1"
        />
</LinearLayout>

su^

MainActivity.java

package yasb.listapaesi;

import android.content.Intent;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;

public class MainActivity extends ActionBarActivity {

    private Button btnAdd;
    private Button btnViewRatedList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.simple_list);
        final ListView listView = (ListView)findViewById(R.id.list);
        final String [] elenco = {"Alessandro","Francesca",
                 "Michele","Ivonne", "Luigi", "Giusi"};
        ArrayAdapter<String> arrayAdapter =
           new ArrayAdapter<String>(this, R.layout.row, R.id.txtViewList, elenco);
        listView.setAdapter(arrayAdapter);

        //per aggiungere un elemento: elenco = append(elenco, "4");
        btnViewRatedList = (Button) findViewById(R.id.btnViewRatedList);
        btnViewRatedList.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = new Intent(getApplicationContext(),RatedList.class);
                startActivity(i);
            }
        });
    }
}

Come si vede la lista è stata creata semplicemente tramite un array di String e l’uso di un ArrayAdpater.
Per non appesantire l’app usiamo solo un array con valori predefiniti, ma se si volesse aggiungere un nuovo elemento basterà usare l’istruzione:

elenco = append(elenco, "4");

mentre per eliminare:

elenco[i] = null;//dove i è l'indice dell'elemento da eliminare

Attenzione però che con questo approccio nell’array rimangono dei “buchi” negli elementi null. Per evitare questo problema si dovrebbe creare un nuovo array solo con gli elementi voluti oppure usare un oggetto di tipo: Collection o di tipo List come vedremo nella seconda activity.
su^

Classi

Per creare una semplice lista di stringhe abbiamo usato

ListView
che rappresenta il widget della lista
ArrayAdpter
che è un oggetto che serve ad adattare il contenuto (inserito nell’Array di String in questa lista, in una LinkedList nell’altra activity) con la parte grafica (presente nel file row.xml). In particolare, il costruttore dell’adapter (che viene chiamato automaticamente quando scrivo “new ArrayAdapter”), vuole i seguenti parametri:
  • il Context corrente (nel nostro caso this)
  • il layout (cioè: R.layout.row) dove andare a cercare la TextView (R.id.txtViewList)
  • il nome dell’array di stringhe da visualizzare (nel nostro caso “elenco”).

Figure



Lista di turisti



Lista con nomi di città e voto

Come detto, il codice della seconda lista si trova qui.
su^