Android: GridView

GridView è un oggetto ViewGroup, come ListView. La particolarità di questo componente è ovviamente il layout applicato agli elementi di una sorgente di dati. GridView, infatti, dispone i dati all'interno di una griglia scorrevole. L'oggetto può essere dichiarato all'interno dei file xml, attraverso l'omonimo tag GridView, che all'interno del codice Java, attraverso l'omonima classe del package android.widget. GridView dispone di diversi attributi per la regolazione delle proprietà di layout:

• android:columnWidth specifica la larghezza delle colonne, la stessa cosa viene fatta all'interno del codice con il metodo setColumnWidth(int);
• android:horizontalSpacing specifica lo spazio vuoto fra le righe della griglia, nel codice Java va usato il metodo setHorizontalSpacing(int);
• android:verticalSpacing specifica lo spazio vuoto fra le colonne della griglia, nel codice Java va usato il metodo setVerticalSpacing(int);
• android:stretchMode specifica come gli oggetti devono occupare lo spazio messo a disposizione dalla griglia, nel codice Java va usato il metodo setStretchMode(int) a cui va passata una delle possibili costanti definite all'interno della classe (come ad esempio NO_STRETCH e STRETCH_COLUMN_WIDTH);

Trovate altre informazioni nella guida in linea per Android. Nell'esempio che vi propongo l'oggetto GridView viene utilizzato per la raccolta di immagini che compongono un puzzle. Il click su una immagine riassegna all'oggetto nella griglia una nuova immagine, prendendola dal set di pezzi che compone il puzzle.

Il layout principale dell'activity descrive un bottone per il reset (che riassegna nuovi tasselli alla griglia) e la griglia per le immagini. Vi riporto il pezzo di codice che descrive l'oggetto GridView:

xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/PuzzleGridView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="62dp"
android:numColumns="3"
android:verticalSpacing="2dp"
android:horizontalSpacing="2dp"
android:stretchMode="columnWidth"
android:gravity="center"

Trovate il codice sorgente dell'intera applicazione a questo indirizzo. Il codice del metodo onCreate() è il seguente:

public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 GridView gridview=(GridView) findViewById(R.id.PuzzleGridView);
 adapterForImage=new ImageAdapter(this);
 gridview.setAdapter(adapterForImage);
 gridview.setOnItemClickListener(new OnItemClickListener() {
  public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
   adapterForImage.moveImage(position);
   adapterForImage.notifyDataSetChanged();
  }
 });
}

Dopo l'assegnazione del layout principale (con setContentView()) il codice procede con la ricerca della view dell'oggetto GridView, a cui viene assegnato l'Adapter per la sorgente di dati. Viene, poi, descritto il gestore per gli eventi (che in questo esempio viene chiamato al tocco della View, metodo onItemClickListener()). Particolarmente importante è il metodo getView() della classe ImageAdapter (che estende BaseAdapter, una classe astratta che è alla base di altri Adapter). Il compito di questo metodo è la restituzione della View da inserire nella griglia.

public View getView(int position, View convertView, ViewGroup parent) {
 ImageView imageViewOfPiece;
 if (convertView==null) { 
  imageViewOfPiece=new ImageView(mContext);
  imageViewOfPiece.setLayoutParams(new GridView.LayoutParams(100,100));
  imageViewOfPiece.setScaleType(ImageView.ScaleType.FIT_XY);
  imageViewOfPiece.setPadding(1,1,1,1);
 } else imageViewOfPiece=(ImageView)convertView;
 imageViewOfPiece.setImageResource(table[position]);
 return imageViewOfPiece;
}

Per far avanzare le immagini toccate a quelle successive (in modo pseudo-casuale) ho scritto il seguente metodo:

public void moveImage(int position) {
 if(i==pieces.length-1) i=0;
 else i++;
 table[position]=pieces[i];
 nClick++;
 if(nClick==3) {
  i=(int)(Math.random()*(pieces.length-1));
  nClick=0;
 }
}

I primi tre click spostano di una posizione l'indice che punta alla successiva immagine dell'array. Dopo il terzo click l'indice assume un valore casuale, incrementato di una posizione per i nuovi prossimi tre click e così via... Viene effettuato anche un controllo ciclico sull'indice che non deve mai superare la capacità dell'array (diminuita di uno). Questo il puzzle completo:

Potete installare l'applicazione vista in questo esempio attraverso il seguente codice QR: