Programmare su Android: Aggiungere un Menu alla tua applicazione

24 Febbraio 20094 commenti

Smanettando con l'sdk di android sui LocationProvider, Mi sono trovato difronte all'esigenza della creazione di un menù. Come potete vedere dallo screen in sinistra ( a parte l'enormita di scritte inutili ), in basso è presente un menu. Ma come si fa a creare un menu? Beh esiste una funzione che va ovveridata ( passatemi il termine ) e serve proprio allo scopo di creare il menu. Questa funzione è: public boolean onCreateOptionsMenu(Menu menu); La quale viene lanciata  automaticamente quando si preme il tasto Menu del nostro dispositivo android. All'interno di questo metodo dovremo specificare il codice per la creazione del menu. Ma come facciamo a creare questo codice? Come al solito abbiamo due opzioni:
  1. Per via dichiarativa;
  2. Per via procedurale;


Creiamo il Menu di Android per Via Procedurale

La via procedurale è abbastanza semplice da capire e bisogna solamente utilizzare un metodo della classe Menu. (in realtà ce ne sono molti altri ma non è lo scopo di questo tutorial ). Il metodo che andremo a prendere in considerazione è:

[JAVA] public MenuItem add(int groupId, int itemId, int order, CharSequence title)[/JAVA]

Riporto tale e quale la spiegazione degli argomenti dal manuale :

groupId The group identifier that this item should be part of. This can also be used to define groups of items for batch state changes. Normally use NONE if an item should not be in a group.
itemId Unique item ID. Use NONE if you do not need a unique ID.
order The order for the item. Use NONE if you do not care about the order. See getOrder().

Quindi, supponendo di voler creare un semplice menu il nostro codice assomiglierà a:

[JAVA]@Override
public boolean onCreateOptionsMenu(Menu menu) {
 super.onCreateOptionsMenu(menu);
 menu.add(0, 0, 1, “Aggiorna :)”);
 menu.add(0 , 1, 2, “Androidiani :)”);
}[/JAVA] 

A questo punto, se lanciamo il nostro programmino attraverso l’emulatore ( per i più fortunati sul g1), possiamo vedere il risultato semplicemente schiacciando il tasto menù.

Ma se volessimo inserire un tocco grafico come ad esempio associare un icona ad una voce di menu?

In questo caso dovremo far ricorso al metodo setIcon che in ingresso prende un Oggetto di tipo Drawable. Il codice quindi ( una volta inserita l’icona all’interno della cartella drawable del nostro progetto ) assomiglierà a :

[JAVA]@Override
public boolean onCreateOptionsMenu(Menu menu) {
 super.onCreateOptionsMenu(menu);
 menu.add(0, 0, 1, “Aggiorna :)”);
 menu.add(0 , 1, 2, “Androidiani :)”).setIcon(R.drawable.iconatest);
}[/JAVA] 

Otterremo cosi il medesimo risultato dell’immagine proposta in testata di quest’articolo.

Creiamo il menù di un activity per via dichiarativa

progetto-location
Dobbiamo inanzitutto creare una cartella nel nostro progetto di eclipse sotto “res”.

Solitamente dentro alla cartella res ( che sta per risorse ) ci sono altre tre cartelle:

  1. drawable: Che contiene tutte le cose “disegnabili” come immagini o altro;
  2. layout: che contiene i file .xml delle varie activity;
  3. values: che contiene i file xml di alcuni valori che solitamente possono essere decisi a priori.

Oltre a queste tre cartelle e il loro contenuto, dentro a res, possiamo trovare il file AndroidManifest.xml di cui Luca Nardelli ne ha dato gia una spiegazione qui.

L’unica cosa che manca (e che è presente nell’immagine a destra) è la cartella menu con il file menu.xml. Questa cartella e questo file sono necessari per creare un menu attraverso l’approccio dichiarativo… Ma vediamo come fare.

Per prima cosa dobbiamo creare la cartella e il file menu.xml ; Procediamo come segue:

  1. Click destro sopra “res” 
  2. Selezioniamo New
  3. Quindi Folder
  4. All’apertura della nuova finestra scriviamo, nel campo “Folder Name”, “menu”.
  5. Click su Finish. In questo passaggio noteremo che si creerà la cartella menu all’interno di res.
  6. Click Destro sopra menu;
  7. Selezioniamo New
  8. Quindi File
  9. Inseriamo all’interno del campo “File Name” un nome tipo “menu.xml”;
  10. Click su Finish

Adesso abbiamo creato, finalmente, la struttura per la creazione di un menu attraverso l’xml. Cominciamo ora a lavorare direttamente sull’xml. Perciò Facciamo doppio click su “menu.xml” e selezioniamo la vista che ci permette di editare il layout attraverso l’editor visuale.

attributi-voce-menu-androidFacciamo quindi click su Add e poi su Item. Immediatamente ci verrà data la possibilità di editare gli attributi di questa voce di menu .

In particolare, in questo mini (neanche tanto) tutorial, vi spiegherò come utilizzare due attributi:

  • Title
  • Icon

Come potrete intuire il primo serve a settare un titolo al menu ( che poi sarà la scritta che verrà visualizzata ) mentre icon serve a settare un eventuale icona.

Bene.. Adesso viene il bello.. Come potete vedere in parte al campo Title c’è un tastino Browse. Che se clicchiamo ci darà alcune voci selezionabili.. Ma da dove escono queste voci? E come ne aggiungo una?.

Ebbene.. Prima ho parlato della cartella values la quale contiene un file chiamato strings.xml. Apritelo con l’editor visuale e effettuate questi semplici passi:

  1. Click su “Add”;
  2. “String”;
  3. Nel campo “Name” inserire ad esempio “menu”;
  4. nel campo “Value” inserire “Voce di menu”;

Una volta usciti da questo file avremo completato le operazioni necessarie per creare una cosidetta stringa. Torniamo quindi al nostro campo Title da editare…

Adesso se facciamo click su Browse troveremo anche il valore “menu” facciamo quindi Click su questo. 

Bene. Adesso creiamo un altra voce di menu come spiegato poche righe sopra e rifacciamo gli stessi passi per creare un altra stringa e una volta completato questo ci concentriamo sul campo Icon.

Come spiegato per la versione procedurale Icon serve a definire un icona da utilizzare nel menu. Ma come facciamo a inserire l’indirizzo del “drawable” desiderato? Beh .. Dato che sappiamo ( vero ? :P ) che le nostre immagini vanno inserite dentro alla cartella drawable allora, supponendo che il nostro file di immagine si chiami iconatest.png, per far capire ad android che vogliamo proprio utilizzare iconatest.png per questa voce di menu, nel campo testuale di icon scriveremo “@drawable/iconatest“.

A questo punto, se switchiamo dalla vista “Layout” a quella xml, il codice dovrebbe essere simile a :

[XML]


[/XML]

 

Adesso che abbiamo completato la dichiarazione dell’xml mettiamo un attimo mano al codice java. In particolare dobbiamo modificare la funziona onCreateOptionsMenu indicandogli che il menu deve essere disegnato seguendo le direttive date via xml ( in particolare dal file menu.xml )

[JAVA]@Override
public boolean onCreateOptionsMenu(Menu menu) {
 super.onCreateOptionsMenu(menu);
 MenuInflater inflater = getMenuInflater();
 inflater.inflate(R.menu.menu, menu);
}[/JAVA] 

In questo modo diciamo al compilatore di prendersi R.menu.menu (Che fa riferimento al nostro file menu.xml ) e “assegnarlo” all’oggetto di tipo Menu passato come argomento al metodo.

Adesso, se lanciamo l’applicazione vedremo il risultato ottenuto.

Ma quindi .. Procedurale o Dichiarativa?

Dipende. Sebbene la mia spiegazione dell’utilizzo dei file xml per la specificazione dei menu sia lunghissima, è uno di quei casi che “sono piu facili a farsi che a dirsi“.. Inoltre per natura autodescrittiva dell’xml , scrivere un menu attraverso l’xml risulta molto più intuitivo che scrivere del codice java.

Tuttavia, non abbiamo ancora parlato dell’utilizzo del menù.. Ovvero abbiamo parlato solamente della creazione di questo ma non di effettuare delle azioni a seguito della selezione di una voce.

Come gestire le scelte

Per effettuare delle azioni (qualsiasi) quando una voce di menu viene selezionata dobbiamo ricorrere ad un altra funzione:

[JAVA]public boolean onOptionsItemSelected(MenuItem item)[/JAVA]

La quale va overridata all’interno dell’activity; proprio come abbiamo fatto per il metodo onCreateOptionsMenu.

Questa funzione, come potete vedere dalla firma, ha come argomento un oggetto di tipo MenuItem che rappresenta appunto la voce di menu selezionata dall’utente. In particolare a noi interesserà utilizzare il metodo “getItemId()” che non necessita di nessun argomento e ritorna, sotto forma di intero, l’id dell item.

Vediamo quindi come utilizzare questa funzione nel modo giusto.

[JAVA]
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case 0:
//Azioni da fare nel caso abbiamo clicckato l’item dall’id 0
break;
case 1:
//Azioni da fare nel caso abbiamo clicckato l’item dall’id 1
break;
}
return false;
}[/JAVA]

Quest’esempio va bene per la versione procedurale, che abbiamo dato alcune ( migliaia :P ) di righe sopra, dove diamo id 0 ed 1 alle due scelte possibili. Mentre per quanto riguarda la definizione del menu attraverso l’xml abbiamo qualche strumento più intuitivo per farlo .. Infatti il codice cambierà e diventerà simile a:

[JAVA]@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
    case R.id.aggiorna:
        // Azioni da fare
    … 
    }
    return false;
}[/JAVA]

attributo-menu-androidCome potete vedere adesso al posto di semplici numeri, che a volte possono sembrare privi di senso e necessitano di un commento per essere interpretati, abbiamo un “nome”.. Questo Nome viene preso direttamente dall’xml di menu.xml e in particolare dal valore che assume il campo “android:id” .. Per questo io consiglio caldamente di dare sempre nomi significativi agli id delle voci di menù.

Beh. Per adesso è tutto. Spero di essere stato chiaro e magari non troppo soporifero.. (Impossibile :P)

 

Alla prossima, Stay Androided :)

 

 

 

 

Loading...
Social Media Auto Publish Powered By : XYZScripts.com