Android Lezione 8 – L’Options Menu

Dopo aver visto nella lezione 5 il context menu, che normalmente si utilizza quando vogliamo aprire un menu specifico per un oggetto (casella di testo, bottone, immagine, etc), ora introduciamo un nuovo tipo di menu che invece é piú legato all’applicazione, e si tratta per la precisione di quel menu che si ottiene premendo il pulsante del menu sul telefono. Un esempio e’ mostrato in figura:

Come stiamo per vedere la gestione di questo menu avviene in maniera molto simile a quella del context menu.  Come al solito procederemo continuando a sviluppare la nostra applicazione di esempio ItalialinuxExample.  Da questa lezione in poi i sorgenti saranno messi su un svn pubblico, cosi potrete importare direttamente i sorgenti nel vostro eclipse (utilizzando un plugin per l’svn) .

Come per il context menu, creiamo prima di tutto una file contenente le voci del menu’, la procedura e’ spiegata in dettaglio nella lezione 5, qui la richiameremo solo brevemente:

1. Create una cartella menu all’interno di res (Se non esiste gia)

2. Aggiungete una risorsa di tipo menu (New -> Android XML File -> Menu)

3. Inserire le voci del menu desiderate. In questa lezione aggiungeremo due voci del menu: About ed Exit, la prima mostrera’ una semplice dialogbox con le informazioni del programma, la seconda invece ci consentira’ di uscire dall’applicazione.

Come al solito queste lezioni si basano sul progetto ItalialinuxExample, quindi io assumo che stiate modificando quel progetto per i miei esempi. La prima cosa che facciamo é creare un nuovo file per il menu (io l’ho chiamato optionsmenu), con i seguenti valori:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="About" android:id="@+id/about"></item>
<item android:id="@+id/exit" android:title="Exit"></item>
</menu>

Ogni item come potete facilmente intuire indica una voce del menu. Ora dobbiamo far visualizzare questo menu al’interno dell’activity. La prima cosa da fare ovviamente e’ aggiungere l’options menu all’activity. Per farlo dobbiamo fare l’override del metodo onCreateOptionsMenu  e dirgli di caricare la risorsa menu appena creata:

    @Override
	public boolean onCreateOptionsMenu(Menu menu) {
    	MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.optionsmenu, menu);
		return true;
	}

Se confrontate con la lezione 5 noterete che il codice é uguale a quello della onCreateContextMenu in pratica all’interno del metodo stiamo semplicemente inizializzando il meno con i valori presi dall’XML del menu (optionsmenu.xml) appena creato. Come per il context menu anche l’options menu deve poter gestire le scelte dell’utente, per questo ci viene in aiuto un altro metodo chiamato onOptionsItemSelected, e anche questa volta il comportamento da intraprendere é simile a quello per il contextMenu (ove avevamo l’onContextItemSelected).

Quindi l’idea é all’interno di questo metodo di controllare a quale voce corrisponde l’oggetto selezionato e poi  intraprendere la relativa azione. Per fare questo possiamo ricorrere al costrutto switch/case.

Il metodo onOptionsItemSelected prende come argomento un oggetto di tipo MenuItem che quando viene chiamato dall’applicazione viene anche valorizzato con la voce del menú che é stata selezionata. Uno dei metodi che mette a disposizione é getItemId(). che restituisce appunto l’id dell’oggetto (quello creato automaticamente in R.id). A questo punto mediante questo metodo il controllo da fare é semplice il nostro switch avrá una forma simile alla seguente:

switch(item.getItemId()){
	case R.id.about:
                //Do Something 1
		break;
	case R.id.exit:
                //Do Something 2
		break;
	}

Partiamo dal caso piu semplice, l’uscita dal programma. In questo caso uno dei metodi disponibili per terminare l’activity si chiama finish, che dal nome capiamo facilmente cosa puo fare. Quindi nel case di exit metteremo la seguente linea di codice:

this.finish();

Mentre per l’about dovremo creare una dialogbox. Android mette a disposizione di default una serie di dialogbox “preconfezionate” che sono:

  1. AlertDialog
  2. ProgressDialog
  3. DatePickerDialog
  4. TimePickerDialog

Per tutto il resto ci sta la classe Dialog, che possiamo utilizzare con il nostro layout, o anche estendere se dobbiamo aggiungere altre funzionalitá. In questo caso a noi non serve di estendere la classe ma la utilizzeremo con un layout customizzato.

Per fare questo dovremo:

1. Creare un file XML di layout per il dialog box (in /res/layout)

2. Creare valorizzare i vari campi della dialog box.

3. Visualizzarlo quando viene scelta l’opzione about.

Quindi prima di tutto creiamo il file per il layout (nell’esempio é chiamato aboutdialog.xml), la nostra aboutbox conterrá 2 elementi: una ImageView e una TextView.  Ovviamente con questa metodologia potremo aggiungere tutti gli elementi che vogliamo alla nostra dialogbox. Quindi il nostro file di layout conterrá il seguente codice:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <ImageView android:id="@+id/image"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginRight="10dp"
               />
    <TextView android:id="@+id/nameandversion"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textColor="#FFF"
              />
</LinearLayout>

Che come possiamo vedere é molto simile ai layout delle activity. Come possiamo vedere questo layout contiene appunto 2 componenti l’ImageView che ha come id image e la TextView che ha come id nameandversion.

Ora dobbiamo inizializzare la nostra dialogbox . Quello che dobbiamo fare é:

1. Importare la classe Dialog nel nostro sorgente:

import android.app.Dialog;

2. Creare una variabile di classe (o anche all’interno della onCreate) di tipo Dialog:

private Dialog aboutDialog;

3. A questo punto portiamoci nel metodo onCreate e creiamo una istanza della classe Dialog:

aboutDialog = new AboutDialog(this);

4. Ora dobbiamo settare la contentView della dialogbox appena creata, che sará appunto quello del layout appena creato.

aboutDialog.setContentView(R.layout.aboutdialog);

5. Il passo successivo e’ quello di da un titolo alla nostra box utilizzando il metodo setTitle(…):

aboutDialog.setTitle("Italialinux About");

6. Ora dobbiamo valorizzare la casella di testo e la imageView.

Partiamo dalla ImageView Le immagini per le nostre applicazioni vengono messe sempre all’interno della cartella res, all-interno di drawable*. Vi possono essere piu cartelle drawable, normalmente per ogni tipologia di densita di schermo disponibile (ldpi, mdpi, hdpi, etc. Per maggiori informazioni sugli schermi android vi suggerisco di leggere questa pagina: http://developer.android.com/guide/practices/screens_support.html) eventualmente se vogliamo usare la stessa immagine senza curarci delle densita’ dello schermo ci basta metterle dentro la cartella drawable. Se si usa eclipse per sviluppare (o se avete scaaricato il progetto da svn) allora in drawable ci sta l’icona di default per i progetti android. Per il nostro esempio useremo quell’immagine (il nome del file é icon.png).

Per aggiungere l’immagine alla ImageView dobbiamo innanzitutto inizializzare una variabile con il riferimento all’oggetto definito nel layout. Questo si fa come di consueto mediante il metodo findViewById dell’activity:

        ImageView aboutImage = (ImageView) aboutDialog.findViewById(R.id.image);

A questo punto utilizzando il metodo setImageResource dell’oggetto ImageView possiamo rendere visibile l’immagine. Come spesso accade in android questo metodo prende come argomento l’id della risorsa (quello di R per intenderci). L’id delle risorse nella cartella drawable si trova all’interno della sottoclasse di R “drawable”. Quindi in questo caso avreomo:

aboutImage.setImageResource(R.drawable.icon);

Infine non ci resta che settare il contenuto della casella di testo con il nome dell’applicazione. Come per le altre volte (e anche per la imageView) prima creaiamo una variabile che contiene il riferimento alla TextView e dopo ne settiamo il testo:

TextView aboutText = (TextView) aboutDialog.findViewById(R.id.nameandversion);
aboutText.setText("Italialinux Example Lessons");

7. A questo punto possiamo passare alla visualizzazione della DialogBox. Che si fa mediante l’override del metodo onCreateDialog(int id).

Prima di tutto creiamo una costante che identifichi l’about dialog all’interno della nostra classe (insieme alle altre variabili):

static final int ABOUT_DIALOG_ID = 0;

Con questa tecnica permettiamo al metodo onCreateDialog di poter gestire le varie Dialog assegnando ad ognuna un diverso id. A questo punto il codice risulta molto semplice, con l’utilizzo ancora una volta di uno switch statement:

	protected Dialog onCreateDialog(int id) {
        switch(id) {
        case ABOUT_DIALOG_ID:
        	aboutDialog.show();
            break;
        default:
            aboutDialog = null;
        }
        return aboutDialog;
	}

Nelle prossime lezioni vi spiegheró meglio come gestire i dialog.

8. Ora possiamo completare il metodo onOptionItemSelected aggiungendo il codice da eseguire nel caso l’opzione about viene selezionata:

onCreateDialog(ABOUT_DIALOG_ID);

Quindi il codice finale di onOptionItemSelected é:

public boolean onOptionsItemSelected(MenuItem item) {
		switch(item.getItemId()){
			case R.id.about:
				onCreateDialog(ABOUT_DIALOG_ID);
				break;
			case R.id.exit:
				this.finish();
				break;
		}
		return true;
	}

Con questo é tutto.
I sorgenti da questa lezione saranno distribuiti tramite SVN. L’indirizzo per questa lezione é: http://www.osdev.it/public/ItalialinuxExample/Lezioni/Lezione8
Alla prossima 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.