Come codificare un cassetto di navigazione per un'applicazione Android

Si noti che quando si visualizzano gli elementi dell'elenco di navigazione da una risorsa di menu, è possibile utilizzare a Visualizzazione elenco anziché. Ma, configurando il cassetto di navigazione con una risorsa di menu, otteniamo gratuitamente lo stile di progettazione dei materiali nel cassetto di navigazione! Se hai usato un Visualizzazione elenco, si dovrebbe mantenere l'elenco e anche lo stile per soddisfare le specifiche di progettazione dei materiali raccomandate per il cassetto di navigazione. 

3. Inizializzazione di componenti

Successivamente, iniziamo a inizializzare le istanze del nostro DrawerLayout e ActionBarDrawerToggle. L'inizializzazione avverrà all'interno onCreate () nel MainActivity.kt.

import android.content.res.Configuration import android.os.Bundle import android.support.v4.widget.DrawerLayout import android.support.v7.app.ActionBarDrawerToggle import android.support.v7.app.AppCompatActivity import android.support.v7 .widget.Toolbar import android.view.MenuItem class MainActivity: AppCompatActivity () private lateinit var drawer: DrawerLayout private lateinit var toggle: ActionBarDrawerToggle override fun onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) setContentView (R.layout .activity_main) val toolbar: Toolbar = findViewById (R.id.toolbar_main) setSupportActionBar (toolbar) drawer = findViewById (R.id.drawer_layout) toggle = ActionBarDrawerToggle (questo, cassetto, barra degli strumenti, R.string.navigation_drawer_open, R.string. navigation_drawer_close) drawer.addDrawerListener (toggle) supportActionBar? .setDisplayHomeAsUpEnabled (true) supportActionBar? .setHomeButtonEnabled (true) // ...

Il ActionBarDrawerToggle imposta l'icona dell'app situata a sinistra della barra delle azioni o della barra degli strumenti per aprire e chiudere il cassetto di navigazione. Per essere in grado di creare un'istanza di ActionBarDrawerToggle, dobbiamo fornire i seguenti parametri: 

• un contesto genitore, ad esempio, in un Attività usate Questo, mentre in a Frammento chiami getActivity ()
• un'istanza del DrawerLayout widget per collegarsi alle attività Barra dell'azione
• l'icona da posizionare sopra l'icona dell'app per indicare che è presente un interruttore
• le risorse di stringa rispettivamente per le operazioni di apertura e chiusura (per l'accessibilità)

Abbiamo invocato il metodo addDrawerListener () a DrawerLayout in modo da collegare un ActionBarDrawerToggle con un DrawerLayout. 

Nota che abilitiamo anche l'icona dell'app tramite setHomeButtonEnabled () e abilitarlo per la navigazione "su" tramite setDisplayHomeAsUpEnabled (). 

Quindi inoltriamo il onPostCreate (), onConfigurationChanged (), e onOptionsItemSelected () metodi di callback delle attività sul commutatore:

class MainActivity: AppCompatActivity () // ... override fun onPostCreate (savedInstanceState: Bundle?) super.onPostCreate (savedInstanceState) toggle.syncState () override fun onConfigurationChanged (newConfig: Configuration?) super.onConfigurationChanged (newConfig) attiva / disattiva. onConfigurationChanged (newConfig) override fun onOptionsItemSelected (item: MenuItem?): Boolean if (toggle.onOptionsItemSelected (item)) return true return super.onOptionsItemSelected (item)

Ecco cosa è syncState () fa, secondo la documentazione ufficiale: 

Sincronizza lo stato dell'indicatore del cassetto / affordance con il DrawerLayout collegato ... Questo dovrebbe essere chiamato dal tuo Attività'S onPostCreate metodo da sincronizzare dopo che lo stato dell'istanza di DrawerLayout è stato ripristinato e in qualsiasi altro momento in cui lo stato potrebbe essere diverguto in modo tale che ActionBarDrawerToggle non fosse stato notificato. (Ad esempio, se si interrompe l'inoltro di eventi del cassetto appropriati per un periodo di tempo.)

4. Testare l'app

A questo punto, possiamo eseguire l'app!

Come puoi vedere, il lancio dell'app mostrerà l'icona del cassetto di navigazione "hamburger" nella barra delle azioni. Prova a toccare questa icona dell'app per aprire il cassetto. Inoltre, facendo clic sugli oggetti del carrello di navigazione non si farà nulla, manterremo quella parte nella prossima sezione. 

5. Gestione degli eventi click

Ora, vediamo come gestire gli eventi di clic per ciascuno degli elementi nel cassetto di navigazione. Nota che fare clic su qualsiasi elemento dovrebbe portarti a una nuova attività o frammento, ecco perché è chiamato un cassetto di navigazione!

Innanzitutto, la tua attività deve implementare il NavigationView.OnNavigationItemSelectedListener. 

class MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ...

Implementando questo contratto o interfaccia, ora dobbiamo sostituire l'unico metodo: onNavigationItemSelected (). 

class MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ... override fun onNavigationItemSelected (item: MenuItem): Boolean when (item.itemId) R.id.nav_item_one -> Toast.makeText (this, "Clicked item one" , Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (this, "Clicked item two", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText (questo, " Fatto clic sull'elemento tre ", Toast.LENGTH_SHORT) .show () R.id.nav_item_four -> Toast.makeText (questo," Elemento selezionato quattro ", Toast.LENGTH_SHORT) .show () restituisce true

Questo metodo viene richiamato quando viene selezionato un elemento nel menu di navigazione. Abbiamo usato il quando espressione per eseguire diverse azioni in base alla voce di menu su cui è stato fatto clic, gli ID delle voci di menu fungono da costanti per il quando espressione. 

Quindi, dobbiamo inizializzare il nostro NavigationView e metti dentro questo ascoltatore onCreate () della nostra attività. 

class MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ... override fun onCreate (savedInstanceState: Bundle?) // ... val navigationView: NavigationView = findViewById (R.id.nav_view) navigationView.setNavigationItemSelectedListener (this) // ... // ... 

Esegui nuovamente il progetto!

Quando fai clic su alcuni elementi, viene visualizzato un messaggio di brindisi, proprio quello che ci aspettavamo. Ma ricorda che facendo clic su un oggetto dovrebbe portare l'utente a una nuova attività o frammento (l'abbiamo ignorato qui per brevità). 

Noterai che quando fai clic su un oggetto, il cassetto rimane ancora. Sarebbe meglio se si chiudesse automaticamente ogni volta che si fa clic su un elemento. Vediamo come farlo. 

override fun onNavigationItemSelected (item: MenuItem): Boolean when (item.itemId) R.id.nav_item_one -> Toast.makeText (this, "Articolo selezionato uno", Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (this, "Clicked item two", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText (this, "Oggetto selezionato su tre", Toast.LENGTH_SHORT) .show () R .id.nav_item_four -> Toast.makeText (this, "Clicked item four", Toast.LENGTH_SHORT) .show () drawer.closeDrawer (GravityCompat.START) restituisce true

Per chiudere il cassetto dopo aver fatto clic su un collegamento, è sufficiente richiamarlo closeDrawer () su un'istanza di DrawerLayout e passare GravityCompat.START al metodo. 

Esegui il progetto ancora una volta e vedi il risultato! 

6. Gestione del pulsante Indietro premuto

Quando il cassetto è aperto, sarebbe una migliore esperienza utente non chiudere l'attività di casa se il Indietro pulsante viene premuto. Questo è il modo in cui funzionano le app popolari come l'app Inbox di Google. 

Quindi, quando il cassetto è aperto e il Indietro il pulsante è premuto, solo chiudere il cassetto anziché l'attività corrente. Quindi, se l'utente preme il tasto Indietro pulsante di nuovo, l'attività di casa dovrebbe essere chiusa. 

Ecco come possiamo ottenere questo: 

override fun onBackPressed () if (drawer.isDrawerOpen (GravityCompat.START)) drawer.closeDrawer (GravityCompat.START) else super.onBackPressed ()

Esegui nuovamente il progetto e provalo! 

7. Bonus: utilizzando i modelli di Android Studio

Ora che hai imparato a conoscere le API coinvolte per creare un cassetto di navigazione, ti mostrerò una scorciatoia che renderà più veloce la prossima volta. Puoi semplicemente utilizzare un modello invece di codificare un cassetto di navigazione Attività da zero. 

Android Studio fornisce modelli di codice che seguono le best practice di progettazione e sviluppo di Android. Questi modelli di codice esistenti (disponibili in Java e Kotlin) possono aiutarti a avviare rapidamente il tuo progetto. Uno di questi modelli può essere utilizzato per creare un'attività del cassetto di navigazione. 

Ti mostrerò come utilizzare questa comoda funzionalità in Android Studio. 

Per un nuovo progetto, avvia Android Studio. 

Immettere il nome dell'applicazione e fare clic su Il prossimo pulsante. 

Puoi lasciare i valori predefiniti così come sono nel Target dispositivi Android dialogo. Clicca il Il prossimo pulsante di nuovo. 

Nel Inserisci un'attività al cellulare finestra di dialogo, scorrere verso il basso e selezionare Attività del cassetto di navigazione. Clicca il Il prossimo pulsante dopo. 

Nell'ultima finestra di dialogo, puoi rinominare il nome dell'attività, il nome del layout o il titolo se lo desideri. Infine, fai clic sul finire pulsante per accettare tutte le configurazioni. 

Android Studio ci ha ora aiutato a creare un progetto con un'attività del cassetto di navigazione. Veramente cool!

Si consiglia vivamente di esplorare il codice generato. 

Puoi anche utilizzare i modelli per un progetto Android Studio già esistente. Semplicemente vai File> Nuovo> Attività> Attività del cassetto di navigazione.  

I modelli inclusi in Android Studio sono adatti per layout semplici e applicazioni di base, ma se desideri avviare ulteriormente la tua app, potresti prendere in considerazione alcuni dei modelli di app disponibili su Envato Market. 

Sono un enorme risparmio di tempo per gli sviluppatori esperti, aiutandoli a tagliare la barra della creazione di un'app da zero e concentrare i loro talenti invece sulle parti uniche e personalizzate della creazione di una nuova app.

Conclusione

In questo tutorial, hai imparato come creare un cassetto di navigazione in Android usando il DrawerLayout e NavigationView API da zero. Abbiamo anche esplorato come utilizzare facilmente e rapidamente i modelli di Android Studio per creare un cassetto di navigazione. 

Consiglio vivamente di verificare le linee guida ufficiali sulla progettazione dei materiali per i cassetti di navigazione per ulteriori informazioni su come progettare e utilizzare correttamente i cassetti di navigazione in Android.   

Per ulteriori informazioni sulla codifica per Android, consulta alcuni dei nostri altri corsi e tutorial qui su Envato Tuts+!