DevCorner: conosciamo il Navigation Drawer

Pochi giorni fa Google ha aggiornato gli strumenti di lavoro per gli sviluppatori, introducendo una funzionalità decisamente interessante che abbiamo già avuto modo di conoscere grazie all'app di Hangouts, ad esempio, ovvero il Navigation Drawer, la barra laterale che si avvia con uno swipe o tramite la pressione dell'icona dell'applicazione in alto a sinistra. Vediamo quindi subito come implementare questa feature.

Partiamo subito dal layout XML (non lo riportiamo per via della lunghezza, ma potete analizzarlo qui) dell'Activity nella quale vogliamo appaia la nostra barra laterale: la radice del nostro file (ovvero il suo elemento più esterno) dovrà essere un DrawerLayout, che accetta al suo interno due layout figli, il primo dei quali sarà il nostro contenuto principale, mentre il secondo sarà la barra laterale vera e propria; dalle linee guida, questo secondo layout potrà essere di qualsiasi tipo (Relative, Linear, ListView, quello che ci serve, insomma) ma, mentre la sua altezza dovrebbe essere match_parent, la sua larghezza non dovrebbe mai superare i 320dp, per dar modo all'utente di vedere cosa c'è al di sotto.

Di per se, l'implementazione di questo Navigation Drawer tramite il solo XML ci permette di avere una schermata che si apre e chiude grazie ad uno swipe, ma se volessimo utilizzare, ad esempio, l'ombra, l'animazione dell'icona all'apertura e il controllo tramite l'icona in alto a sinistra nella nostra applicazione?

Per eseguire queste operazioni, ci dobbiamo rivolgere al nostro fidato Java, dichiarando subito il nostro layout e assegnandogli l'ombra a lato, grazie alle risorse forniteci da Google nella relativa guida (che trovate in fondo all'articolo)

private DrawerLayout mDrawerLayout;
mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);

A questo punto, rendiamo cliccabile l'icona in alto a sinistra cliccabile con queste due righe

getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);

E la gestiamo nell'apposito metodo

@Override
public boolean onOptionsItemSelected(MenuItem item) {
	if (mDrawerToggle.onOptionsItemSelected(item)) {
    	return true;
    }
    return super.onOptionsItemSelected(item);
}

Ora, vogliamo gestire il cambiamento di stato del nostro NavigationDrawer e lo facciamo dichiarando un ActionBarToggle, che prende in ingresso ben 5 parametri: iniziamo con la nostra Activity, il DrawerLayout, l'immagine che useremo di fianco al toggle e le due stringhe per l'accessibilità per gli stati di apertura e chiusura.

A questo punto, dovremo soltanto implementare il comportamento del nostro toggle tramite le linee seguenti e assegnarlo al nostro Navigation Drawable come listener

ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(
	this, mDrawerLayout, R.drawable.ic_drawer,
	R.string.drawer_open, R.string.drawer_close){

    public void onDrawerClosed(View view) {
        getActionBar().setTitle(getString(R.string.drawer_close));}

    public void onDrawerOpened(View drawerView) {
        getActionBar().setTitle(getString(R.string.drawer_open));}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);

Per far funzionare tutto a dovere, dobbiamo quindi fare l'ovverride di due metodi, che servono per finalizzare il comportamento del nostro toggle

@Override
protected void onPostCreate(Bundle savedInstanceState) {
	super.onPostCreate(savedInstanceState);
	mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
	super.onConfigurationChanged(newConfig);
	mDrawerToggle.onConfigurationChanged(newConfig);
}

Siamo finalmente pronti per compilare il nostro programma e vedere la nostra barra laterale muoversi ad ogni input. Se volete provare la nostra applicazione o vederne i sorgenti, fate un salto sul nostro forum, dove troverete tutti i link necessari, mentre qui sotto vi lasciamo un paio di screenshot del risultato.

Buona programmazione a tutti!