[Facile] ListView con Custom Adapter

[Crotan]

Livello di difficoltà: facile.
Versione target SDK utilizzata: 19.
Versione minima SDK: 8.

In questo tutorial spiegherò come realizzare una ListView con un adattatore personalizzato, in base alle proprie esigenze. Per questa guida l'adapter sarà composto semplicemente da una ImageView e due TextView. Iniziamo!

Per prima cosa è necessario creare il layout collegato all'activity principale, che avrà come unico elemento una semplice ListView. Andiamo quindi in /res/layout/ apriamo il file activity_main.xml e inseriamo al suo interno:

<br /> <RelativeLayout xmlns:android="http://schemas.android.com/<span class="forTooltip">apk</span>/res/android"<br /> xmlns:tools="http://schemas.android.com/tools"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> tools:context=".MainActivity" ><br /> <br /> <ListView<br /> android:id="@+id/listView1"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> ><br /> <br /> </ListView><br /> <br /> </RelativeLayout><br />

 

1

​

2

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

3

    xmlns:tools="http://schemas.android.com/tools"

4

    android:layout_width="fill_parent"

5

    android:layout_height="fill_parent"

6

    tools:context=".MainActivity" >

7

​

8

    <ListView

9

        android:id="@+id/listView1"

10

        android:layout_width="fill_parent"

11

        android:layout_height="fill_parent"

12

        >

13

​

14

    </ListView>

15

​

16

</RelativeLayout>

17

​

Quindi rechiamoci nell'Activity principale in /src/ e apriamo MainActivity.java. Inseriamo:

<br /> public class MainActivity exten<span class="forTooltip">ds</span> Activity {<br /> <br /> String[] testi, s<span class="forTooltip">ot</span>t<span class="forTooltip">oT</span>esti;<br /> Adapter adapter;<br /> ListView lista;<br /> <br /> @Override<br /> protected void onCreate(Bundle savedInstanceState) {<br /> super.onCreate(savedInstanceState);<br /> setContentView(R.layout.activity_main);<br /> <br /> lista = (ListView)findViewById(R.id.listView1);<br /> lista.setFastScrollEnabled(true);<br /> testi = new String[] {"Prova", "Prova, "Prova"};<br /> <br /> sottoTesti = new String[] {"Sub", "Sub", "Sub"};<br /> adapter = new Adapter(this, testi, sottoTesti);<br /> lista.setAdapter(adapter);<br /> <br /> lista.setOnItemClickListener(new OnItemClickListener() {<br /> <br /> @Override<br /> public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {<br /> // TODO Auto-generated method stub<br /> Toast.makeText(getBaseContext(), "Hai cliccato "+arg2+" con id "+arg3, Toast.LENGTH_SHORT).show();<br /> }<br /> <br /> });<br /> }<br /> }<br />

32

 

1

​

2

public class MainActivity extends Activity {

3

​

4

    String[] testi, sottoTesti;

5

    Adapter adapter;

6

    ListView lista;

7

8

    @Override

9

    protected void onCreate(Bundle savedInstanceState) {

10

        super.onCreate(savedInstanceState);

11

        setContentView(R.layout.activity_main);

12

13

        lista = (ListView)findViewById(R.id.listView1);

14

        lista.setFastScrollEnabled(true);

15

        testi = new String[] {"Prova", "Prova, "Prova"};

16

​

17

sottoTesti = new String[] {"Sub", "Sub", "Sub"};

18

        adapter = new Adapter(this, testi, sottoTesti);

19

        lista.setAdapter(adapter);

20

21

        lista.setOnItemClickListener(new OnItemClickListener() {

22

​

23

            @Override

24

            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {

25

                // TODO Auto-generated method stub

26

                Toast.makeText(getBaseContext(), "Hai cliccato "+arg2+" con id "+arg3, Toast.LENGTH_SHORT).show();

27

            }

28

29

        });

30

    }

31

}

32

​

Le prime tre righe di codice prevedono la dichiarazione di due array di stringhe (String[]), l'Adapter (che creeremo tra poco) e la ListView. Per creare l'Adapter torniamo nuovamente in /res/layout/ e creiamo un nuovo file che chiameremo adapter.xml. Inseriamo:

<?xml version="1.0" encoding="utf-8"?><br /> <br /> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent" ><br /> <br /> <TextView<br /> android:id="@+id/textView1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentT<span class="forTooltip">op</span>="true"<br /> android:layout_toRightOf="@+id/imageView"<br /> android:textStyle="bold"<br /> /><br /> <br /> <TextView<br /> android:id="@+id/textView2"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_below="@+id/textView1"<br /> android:layout_toRightOf="@+id/imageView"<br /> android:textStyle="italic"<br /> /><br /> <br /> <ImageView<br /> android:id="@+id/imageView"<br /> android:layout_width="50dip"<br /> android:layout_height="50dip"<br /> android:layout_alignParentLeft="true"<br /> android:src="@drawable/ic_<span class="forTooltip">launcher</span>"<br /> /><br /> <br /> </RelativeLayout>

33

 

1

<?xml version="1.0" encoding="utf-8"?>

2

​

3

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

4

    android:layout_width="match_parent"

5

    android:layout_height="match_parent" >

6

​

7

    <TextView

8

        android:id="@+id/textView1"

9

        android:layout_width="wrap_content"

10

        android:layout_height="wrap_content"

11

        android:layout_alignParentTop="true"

12

        android:layout_toRightOf="@+id/imageView"

13

        android:textStyle="bold"

14

        />

15

​

16

    <TextView

17

        android:id="@+id/textView2"

18

        android:layout_width="wrap_content"

19

        android:layout_height="wrap_content"

20

        android:layout_below="@+id/textView1"

21

        android:layout_toRightOf="@+id/imageView"

22

        android:textStyle="italic"

23

        />

24

25

    <ImageView

26

        android:id="@+id/imageView"

27

        android:layout_width="50dip"

28

        android:layout_height="50dip"

29

        android:layout_alignParentLeft="true"

30

        android:src="@drawable/ic_launcher"

31

        />

32

​

33

</RelativeLayout>

Quindi, di nuovo in /src/ creiamo una classe che chiamiamo Adapter.java, nella quale inseriremo:

public class Adapter extends ArrayAdapter<String>{<br /> <br /> String[] testo, sottoTesto;<br /> Context context;<br /> Holder holder;<br /> <br /> public Adapter(Context context, String[] testo, String[] sottoTesto) {<br /> super(context, R.layout.adapter, testo);<br /> // TODO Auto-generated constructor stub<br /> this.testo = testo;<br /> this.sottoTesto = sottoTesto;<br /> this.context = context;<br /> }<br /> <br /> public View getView(int position, View view, ViewGroup parent) {<br /> if(view == null) {<br /> holder = new Holder();<br /> LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);<br /> view = inflater.inflate(R.layout.adapter, null, true);<br /> holder.textView = (TextView)view.findViewById(R.id.textView1);<br /> holder.textView2 = (TextView)view.findViewById(R.id.textView2);<br /> holder.textView.setText(testo[position]);<br /> holder.textView2.setText(sottoTesto[position]);<br /> view.setTag(holder);<br /> }<br /> else {<br /> holder = (Holder)view.getTag();<br /> }<br /> return view;<br /> }<br /> }<br /> <br /> class Holder {<br /> TextView textView, textView2;<br /> }

35

 

1

public class Adapter extends ArrayAdapter<String>{

2

​

3

    String[] testo, sottoTesto;

4

    Context context;

5

    Holder holder;

6

7

    public Adapter(Context context, String[] testo, String[] sottoTesto) {

8

        super(context, R.layout.adapter, testo);

9

        // TODO Auto-generated constructor stub

10

        this.testo = testo;

11

        this.sottoTesto = sottoTesto;

12

        this.context = context;

13

    }

14

15

    public View getView(int position, View view, ViewGroup parent) {

16

        if(view == null) {

17

        holder = new Holder();

18

        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

19

        view = inflater.inflate(R.layout.adapter, null, true);

20

        holder.textView = (TextView)view.findViewById(R.id.textView1);

21

        holder.textView2 = (TextView)view.findViewById(R.id.textView2);

22

        holder.textView.setText(testo[position]);

23

        holder.textView2.setText(sottoTesto[position]);

24

        view.setTag(holder);

25

        }

26

        else {

27

            holder = (Holder)view.getTag();

28

        }

29

        return view;

30

    }

31

}

32

​

33

class Holder {

34

    TextView textView, textView2;

35

}

Come vedete il costruttore prevede tre parametri: il contesto, l'array di stringhe dei testi e dei sotto-testi. Il metodo getView() è molto importante. Esso si occupa della gestione del singolo elemento dalla lista. I parametri al suo interno sono: la posizione, view e parent. Soffermiamoci su questi ultimi due: il parametro view, se opportunamente ottimizzato ci permette di rendere la lista molto fluida nello scroll ed evitare quindi i fastidiosi lag dovuti, appunto, alla mancata ottimizzazione. In maniera spicciola, view ci consente di riciclare l'eventuale View che anzichè essere "rigenerata" viene riciclata, ragion per cui viene fatto il controllo. Se è nulla, tramite l'operazione di Inflating la creiamo, altrimenti la ricicliamo. Il parametro parent è il contenitore avente il compito di raccogliere gli elementi generati dal metodo getView(). Generalmente è la ListView stessa. L'oggetto Holder consente di memorizzare il riferimento alle View in ogni singola riga della lista. Tramite il metodo setTag() associamo l'oggetto Holder alla View, per poi riottenerlo col getTag(). Questi piccoli accorgimenti nel complesso rendono la lista efficiente, evitando sprechi di risorse, di memoria, oltre che evitano il presentarsi di lag/impuntamenti.

Questo è tutto. Per ulteriori chiarimenti potete scrivere in questa discussione. Un ringraziamento speciale all'utente supertommino.

[Crotan]

Riservato per future aggiunte.

[sebastiano74]

Al click sulla riga non è chiaro però a quale activity della mia app si viene indirizzati. Come si può fare ciò ?

[giozh]

Il codice quando fai tap su una riga ti mostra in un Toast dice quale riga hai premuto, non viene lanciata nessuna activity.

[sebastiano74]

Per lanciare una activity specifica come faccio?
Ho inserito più Intent in corrispondenza di ogni activity da visitare ma mi visita sempre la medesima activity. Posso spostare il codice?

[sebastiano74]

Scusate postare...

[Crotan]

@sebastiano74, posta il codice.

[sebastiano74]

di seguito il codice Java:

All'interno del metodo OnCreate


String[] accessori = { "Wind.it", "Digital Store Wind", "Play Store", "eBay", "Amazon", "Samsung Store", "Apple Store", "Windows Store", "Disney Store"};

ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_ list_item_1,accessori);
ListView lv= (ListView) findViewById(R.id.elencoaccessori);
lv.setAdapter(adapter);

lv.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override
public void onItemClick(AdapterView<?> adattatore, final View componente, int pos, long id) {
//recupero il titolo memorizzato nella riga tramite l'ArrayAdapter
final String titolo = (String) adattatore.getItemAtPosition(pos);
//al click compare il testo del titolo della riga per qualche secondo
Toast.makeText(getApplicationContext(), titolo, Toast.LENGTH_SHORT).show();

Fino a qui tutto ok, funziona tutto
Adesso vorrei inserire su ogni riga visualizzata un link di collegamento ad un'altra MainActivity.
Dopo il Toast ho inserite il seguente codice:

Intent visit_wind = new Intent(MainActivity_3_canali.this, MainActivity_wind.class);
startActivity(visit_wind);

Ma ho notato che in questo modo tutte le righe della mia ListView mi portano sulla MainActivity_wind.
Come posso indirizzare ogni singola riga della LisView alla sua MainActivity specifica???

[xixieto]

Ma come fare se i valori che devo inserire nella listview sono dei dati presi nel DB?

[Crotan]

Basta avere un metodo che restituisce un Array con i valori recuperati dal Database SQLite e passare quello all'Adapter. Qui trovi istruzioni su come creare questo metodo: How to retrieve data from sqlite database in android and display it in TextView - Stack Overflow.