Android lezione 9 Le listview

Transcript

1 Android lezione 9 Le listview In questa lezione introduciamo le ListView. Una listview ci permette di mostrare una serie di elementi all interno di una lista che puo anche essere scrollata. Ecco un esempio di una list view con 3 elementi Una delle comodità delle listview è che sono altamente customizzabili. In questa lezione vedremo come creare una semplice listview nella nostra applicazione. Questa operazione consiste fondamentalmente dei seguenti passi: Aggiungere una ListView al nostro layout Creare un layout per il singolo elemento della ListView Aggiungere listview alla nostra Activity Popolarla Come al solito queste lezioni sono basate sul progetto ItalialinuxExample reperibile su repository svn al seguente indirizzo: dove potrete scaricare i sorgenti del progetto eclipse. Quindi come detto la prima cosa da fare, e aggiungere una listview al nostro layout principale. Apriamo il file res/main.xml e aggiungiamo la view, ovviamente potete farlo anche tramite gui di eclipse (l oggetto si trova sotto la voce composite) altrimenti se volete editare direttamente l xml quello che dovrete inserire e simile al seguente: Come possiamo vedere questo passo è abbastanza semplice, non ci sta molto da spiegare. Come al solito gli elementi che lo

2 compongono sono: L id della listview Le informazioni sulla larghezza e la lunghezza. Una delle caratteristiche utili della listview é che il singolo item puó essere customizzato come vogliamo. Ovviamente per fare questo ci serve un layout che specifica come apparirá il singolo elemento della ListView. In questo esempio vedremo il caso piu semplice, quello di un elemento che contiene solo una casella di testo. Nelle prossime lezioni faremo anche una variante con l item composto da due caselle di testo una per il titolo dell oggetto e una per la descrizione. Alla selezione di un elemento verrá semplicemente mostrato un toast che stampera il nome dell oggetto selezionato. Quindi aggiungiamo un file xml per il layout dell elemento nella cartella res/ (il nome che gli ho dato nel progetto é list_item.xml). In questo caso dovremo aggiungere ina TextView. <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:textstyle="bold" android:textsize="18sp"> </TextView> Come possiamo vedere quello che stiamo facendo è qualcosa di gia noto e semplice, stiamo dichiarando un layout come tutti gli altri. In questo esempio la lista verrà inizializzata prendendo i valori da un file XML. Per fare questo dobbiamo creare (se gia non lo abbiamo fatto) un file xml contentente le stringhe,

3 normalmente lo si inserisce all interno della cartella values. Quindi creiamo prima di tutto la cartella values se non presente nel progetto e dopo di che creiamo il file strings.xml. Dal momento che una listview contiene sicuramente piu di un elemento, quello che andremo che ci servirà è un oggetto di tipo string-array. Ecco qui come andrà definito: <string-array name="listitems" > <item>item number one</item> <item>the second<item> <item>and the third<item> A questo punto passiamo alla fase di inizializzazione. Abbiamo due possibilitá, la prima é fare in modo che la nostra Activity estenda l oggetto ListAtctivity, altrimenti la si accede mediante il consueto findviewbyid. Noi opteremo per questo secondo metodo. Dopo di che andiamo a vedere cosa dobbiamo aggiungere all interno della nostra oncreate. Prima di tutto accediamo all oggetto ListView: ListView mylist = (ListView) findviewbyid(r.id.listview1); Ora dobbiamo prelevare dati da aggiungere nel nostro menu, per farlo prima di tutto preleviamo i dati contenuti nell array chiamato listitems, per farlo questo ci appoggiamo ovviamente ad un array di stringhe: String[] menuitems = getresources().getstringarray(r.array.listitems); La ListView per essere popolata ha bisogno di un ArrayAdapter, una classe che si occupa di gestire i dati, basati o su array o su liste, di tipo arbitrario. Quindi dichiariamo il nostro oggetto di tipo ArrayAdapter, che verrá popolato con gli elementi in menuitems, e prenderá inoltre come argomento un riferimento ad una TextView o un layout, e il contesto corrente.

4 ArrayAdapter<String> adapter = new ArrayAdapter(this, R.layout.list_item, menuitems); In questo modo ogni elemento dell arrayadapter verrá esploso all interno di una textview contenuta in list_view, il testo che verrá inserito sará quello ritornato dal metodo.tostring(). A questo punto dobbiamo semplicemente associare l adapter alla listview, questo si fa utilizzando il metodo setadapter per l oggetto di tipo ListView, nel nostro caso: mylist. mylist.setadapter(adapter) In questo modo se ora proviamo a lanciare la nostra applicazione gia possiamo vedere che la lista viene correttamente popolata. Il nostro prossimo passo é associare una azione (comparsa di un toast) alla selezione di un elemento della lista. Per fare questo dobbiamo utilizzare un Listener di tipo OnItemClickListener. Lasciamo che sia direttamente l activity a occuparsene, e che quindi deve implementare questo oggetto: public class FirstActivity extends Activity implements OnItemClickListener Questo richiede l implementazione del metodo: public abstract void onitemclick (AdapterView parent, View view, int position, long id) Dove: parent indica l adapterview che contiene l evento del click view indica la View sul quale é stato fatto il click (nel nostro caso é la textview del list_item) position indica la posizione dell elemento nell adapter id indica l id della linea ove l oggetto é stato clickato.

5 Quindi per mostrare la notifica Toast che stampa il contenuto dell elemento, all interno di onitemclick dobbiamo castare la variabile view a TextView e prenderne il contenuto: Toast.makeText(getApplicationContext(), ((TextView) view).gettext() + " " + position, Toast.LENGTH_SHORT).show(); Ora non ci resta che un ultimo passo, ovvero associare il listener alla lista, si fa semplicemente chiamanto il metodo setonitemclicklistener su mylist: mylist.setonitemclicklistener(this); E con questo abbiamo creato la nostra prima lista. Se ora lanciamo avremo un output simile al seguente: Vi ricordo che i sorgenti sono disponibili su In una delle prossime lezioni (non la prossima) vedremo come fare una listview con elementi personalizzati al 100%.