Creare app con menù laterale stile Facebook con swipe

Android Sliding Menù

In questo articolo vedremo come inserire nella nostra app un menu con sliding orizzontale in stile Facebook completo anche delle gesture per aprirlo attraverso lo Swipe.

Per inserire il menù sfruttiamo una libreria molto interessante resa disponibile su github da gitgrimgo. Scarichiamo l’intera libreria cliccando sul bottone a destra (“Download ZIP”). Il file scaricato è un’applicazione già funzionante quindi possiamo lanciarla e testare le varie funzionalità per scegliere quella che vogliamo.

In questa guida tratterò esclusivamente il menù a scorrimento orizzontale che si apre da sinistra e l’applicazione avviene ad un progetto nuovo e vuoto.

Android Slider Menu

Android Slider Menu

I componenti

Creiamo come prima cosa un nuovo progetto vuoto con Eclipse nel nostro workspace.

Analizzando le Activity e le classi del progetto scaricato precedentemente ne vediamo una dal nome MyHorizontalScrollView.java che è il componente fondamentale della libreria e modella una scrollview orizzontale personalizzata. Individuiamo quindi la classe HorzScrollWithListMenu che modella l’esempio. Copiamole entrambe nella cartella src del nuovo progetto ovviamente modificando il package e correggendo i vari errori sollevati da eclipse. Il codice seguente mostra come è strutturata la classe HorzScrollWithListMenu

Le due classi statiche innestate nell’activity (SizeCallbackForMenu e ClickListenerForScrolling) regolano il comportamento e le dimensioni del menù laterale (non bisogna modificarle se non si intende inserire le gesture a seguire).

Copiamo ed incolliamo la classe ViewUtils.java che contiene metodi usati dal creatore del plugin per popolare e gestire gli adapter delle varie liste (non è obbligatorio usare questa classe per gestirle).

All’interno della cartella res/layout individuiamo questi tre file:

  1. horz_scroll_with_list_menu.xml – al cui interno è presente il componente MyHorizontalScrollView (bisognerà cambiare il package)
  2. horz_scroll_menu.xml – modella il menù che si aprirà
  3. horz_scroll_app.xml – modella la prima activity che la nostra applicazione mostrerà

Ora bisogna impostare nel manifest del nuovo progetto la classe HorzScrollWithListMenu come main Activity. Quindi modificare il manifest come segue

Adesso possiamo lanciare l’applicazione e il tutto dovrebbe funzionare correttamente. Ora per aprire il menù dovete cliccare sull’iconcina in alto a destra (per chiudere dovete fare la stessa opreazione).

Implementazione delle Gesture

Qualcuno può trovare scomodo l’obbligo del clicl sul bottone per aprire il menù e quindi sarebbe opportuno aggiungere il supporto per le gesture (Swipe). Vediamo quindi come integrarle nell’applicazione vista sopra.

Innanzitutto abbiamo bisogno di una classe che consente di interagire con i movimenti dell’utente, quella seguente è un piccolo esempio di GestureDetector. Quindi copiare ed incollare nell’Activity principale questo codice

Inseriamo anche queste proprietà in aggiunta a quelle presenti che consentono di stabilire velocità e distanza dello swipe per essere considerato tale

Abbiamo ora bisogno di metodi che, a seconda del movimento tracciato, aprono e chiudono il menù. Creiamo i seguenti metodi alla classe innestata ClickListenerForScrolling dopo il metodo onClick

Ricordate anche di far implementare all’activity HorzScrollWithListMenu l’interfaccia View.OnClickListener quindi

Ora bisogna aggiungere al contenitore principale l’ascoltatore per l’evento delle gesture. Quindi nel metodo onCreate dell’activity principale aggiungere alla fine del metodo le seguenti righe

Ho aggiunto l’ascoltatore alla risorsa app che sostanzialmente rappresenta tutta l’interfaccia, menù escluso, dell’acvitity in modo tale da intercettare l’evento in qualsiasi punto dello schermo si tocchi. Adesso quando si effettua uno swipe da destra a sinistra viene eseguita la funzione closeMenu() mentre quando si effettua da sinistra a destra viene chiamato openMenu().

La classe ViewUtils.java

Questa classe è compresa nel progetto di esempio e, come già detto, consente di instanziare, popolare e gestire le liste in una classe separata. Questa operazione può risultare un vantaggio nel momento in cui il menù deve comparire in Activity differenti evitando la  duplicazione di codice.

Nell’esempio, le due liste che compongono i layout sono inizializzate con gli stessi valori utilizzando il metodo initListView(…). Per caricare contenuti personalizzati bisogna modificare questo metodo e inserire i contenuti personalizzati. Di seguito un esempio base di modifica di questo metodo

Questo ovviamente è solo un piccolo esempio ma potete fare tutte le modifiche che volete.

Il menù con swipe a scorrimento orizzontale è ora pronto per l’utilizzo nella vostra applicazione android. Nel caso avete problemi postate pure un commento qui sotto!

TizianoZullo.it

Informazioni sull'autore

Laureato nel 2012 in informatica ho maturato qualche anno di esperienza sullo sviluppo di applicativi per il web e applicativi per Android. Grande appassionato di informatica in generale, di ciclismo e di fotografia, dedico gran parte del mio tempo a queste attività.

Rispondi

*

Questo sito raccoglie dati statistici anonimi sulla navigazione, mediante cookie installati da terze parti autorizzate, rispettando la privacy dei tuoi dati personali e secondo le norme previste dalla legge. Continuando a navigare su questo sito, cliccando sui link al suo interno o semplicemente scrollando la pagina verso il basso, accetti il servizio e gli stessi cookie.
Leggi informativa