Il Navigation Drawer, in molte occasioni definito come
Sliding Menu, è utile per visualizzare le sezioni principali di navigazione
della nostra applicazione sulla parte sinistra dello schermo. Due esempi
tipici sono il Play Store o l’applicazione di Facebook che riescono ad
offrire una grande semplicità di navigazione grazie a questo elemento.
In genere, il Navigation Drawer è sempre nascosto e viene
visualizzato quando l’utente esegue uno swipe dalla parte sinistra alla parte
destra dello schermo. In alternativa, viene visualizzato quando si seleziona
l’icona dell’applicazione nella Action Bar. E’ altamente consigliato utilizzarlo
sia quando si hanno parecchie sezioni top-level sia quando si ha una
applicazione con parecchie viste in profondità poichè permette di accedere alle
principali sezioni della propria applicazione in maniera diretta. Per implementare questo componente, la Support Library di
Android ci mette a disposizione un layout chiamato DrawerLayout dalla revisione
13 (Maggio 2013).
Andiamo a vedere come si riesce a creare una navigazione
davvero efficiente per la nostra applicazione grazie all’utilizzo di questo
componente. Il tutto in pochissimi minuti.
Supponiamo di voler realizzare una applicazione con un Main
e tre sezioni principali. Il tutto codificato come quattro Activity. Vogliamo
fare in modo che l’utente possa navigare queste sezioni attraverso il
Navigation Drawer dalla sola Main Activity. Le altre tre sezioni saranno figlie
di quest’ultima.
La prima operazione da eseguire è quella di creare un
oggetto DrawerLayout come elemento root del layout della nostra Main Activity.
All’interno di questo layout bisogna aggiungere due view: una che contiene il
contenuto principale da mostrare nello schermo quando il drawer è nascosto e
un’altra che rappresenta il contenuto del navigation drawer. E’ importante tenere presente che il
contenuto principale deve essere il primo elemento figlio dell’elemento root.
Per quanto riguarda il drawer view è necessario specificare l’attributo
layout_gravity, che in genere è settato a “start” per supportare sia il LTR che
i RTL. A questo punto, per inizializzare il Navigation Drawer con
una lista delle tre sezioni basta popolare la ListView attraverso un generico
Adapter. Nel caso specifico utilizzeremo un array di stringhe.
mDrawerLayout = (DrawerLayout)
findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
mDrawerList.setAdapter(new
ArrayAdapter<String>(this,
R.layout.drawer_list_item, arrayListaSezioni));
Dove la risorsa R.layout.drawer_list_item è una semplice
TextView:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:textColor="#fff"
android:background="?android:attr/activatedBackgroundIndicator"
android:minHeight="?android:attr/listPreferredItemHeightSmall"/>
Adesso andiamo a codificare il comportamento dei singoli
elementi quando l’utente li seleziona. Dalle specifiche vogliamo che, una volta
selezionato l’elemento, venga visualizzata l’Activity relativa. Questa
implementazione è piuttosto banale e riportiamo il solo codice del
comportamento. Per i dettagli vi consiglio di scaricare il codice sorgente
allegato alla fine di questa guida.
mDrawerList.setOnItemClickListener(new
OnItemClickListener() {
@Override
public void
onItemClick(AdapterView<?> parent, View view, int position, long id) {
int index=position+1;
Intent
intent=null;
switch(index) {
case 1: intent = new
Intent(getApplicationContext(), Sezione1Activity.class);
break;
case 2: intent = new
Intent(getApplicationContext(), Sezione2Activity.class);
break;
case 3: intent = new
Intent(getApplicationContext(), Sezione3Activity.class);
break;
default:
intent =
new Intent(getApplicationContext(), MainActivity.class);
}
getActionBar().setTitle(R.string.app_name);
mDrawerLayout.closeDrawer(mDrawerList);
startActivity(intent);
}
});
Una volta implementato questo codice, avremo la
visualizzazione del menù ogni volta che l’utente si troverà nella Main Activity
e eseguirà uno swipe da sinistra verso destra. Per completare il codice andiamo
ad implementare la possibilità di aprire il menù selezionando l’App Icon posta
sull’Action Bar. Per fare ciò abbiamo bisogno dell’icona tipica dell’apertura
del Menù, cioè quella con le tre linee orizzontali. Potete recuperarla dal
codice sorgente allegato al termine della guida.
Il comportamento sarà codificato grazie all’oggetto
mDrawerToggle dichiarato di questo tipo: ActionBarDrawerToggle. Esso avrà
bisogno dei parametri seguenti:
- activity: L’Activity che contiene il drawer
- drawerLayout: Il DrawerLayout da collegare all’Action Bar
- drawerImageRes: Una risorsa da aggiungere all’icona per evidenziare la presenza del Navigation Drawer
- openDrawerContentDescRes: Una stringa per descrivere l’azione di apertura del drawer. Utilizzata per accessibilità.
- closeDrawerContentDescRes: Una stringa per descrivere l’azione di chiusura del drawer. Utilizzata per accessibilità.
Una volta creato l’oggetto andremo a ridefinire il
comportamento di default aggiungendo un cambiamento al titolo dell’Action Bar
ogni volta che il menù viene visualizzato o chiuso.
mDrawerToggle = new ActionBarDrawerToggle(
this,
mDrawerLayout,
R.drawable.ic_drawer,
R.string.open_drawer,
R.string.close_drawer
) {
public void onDrawerClosed(View
view) {
super.onDrawerClosed(view);
getActionBar().setTitle(R.string.app_name);
}
public void onDrawerOpened(View
drawerView) {
super.onDrawerOpened(drawerView);
getActionBar().setTitle(R.string.titoloDrawer);
}
};
L’ultima operazione necessaria per la visualizzazione del
Navigation Drawer è quella di ridefinire tre metodi dell’Activity. Il primo è
onPostCreate, dove è necessario richiamare il metodo syncState() dell’oggetto
mDrawerToggle. Questo per sincronizzare l’indicatore con lo stato del
DrawerLayout annesso dopo l’esecuzione dell’onRestoreInstanceState, altrimenti
non avremo l’immagine aggiornata affianco dell’App Icon. Il secondo metodo è l’onOptionsItemSelected
utilizzato per intercettare l’azione dell’utente. Infine, l’onConfigurationChanged
che deve semplice richiamare quello del nostro mDrawerToggle.
@Override
protected void onPostCreate(Bundle
savedInstanceState) {
super.onPostCreate(savedInstanceState);
mDrawerToggle.syncState();
}
@Override
public boolean onOptionsItemSelected(MenuItem
item) {
if (mDrawerToggle.onOptionsItemSelected(item))
{
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public void
onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}
Il codice sorgente potete scaricarlo direttamente da qui
0 commenti:
Posta un commento