Come codificare una barra di navigazione in basso per un'applicazione Android

3. Inizializzazione di componenti

Quindi, inizializzeremo un'istanza di BottomNavigationView. L'inizializzazione avverrà all'interno onCreate () nel MainActivity.kt.

import android.os.Bundle import android.support.design.widget.BottomNavigationView import android.support.v7.app.AppCompatActivity class MainActivity: AppCompatActivity () lateinit var toolbar: ActionBar sovrascrive fun onCreate (savedInstanceState: Bundle?) super. onCreate (savedInstanceState) setContentView (R.layout.activity_main) toolbar = supportActionBar !! val bottomNavigation: BottomNavigationView = findViewById (R.id.navigationView)

4. Testare l'app

Ora possiamo eseguire l'app!

Come puoi vedere, la nostra barra di navigazione in basso è visualizzata nella parte inferiore della schermata dell'app. Non succederà nulla se si fa clic su uno degli elementi di navigazione in quella posizione; gestiremo quella parte nella sezione successiva. 

5. Configurazione degli eventi click

Ora, vediamo come configurare gli eventi di clic per ciascuno degli elementi nella barra di navigazione in basso. Ricorda che facendo clic su qualsiasi elemento in esso dovrebbe portare l'utente a una nuova destinazione nell'app.

// ... private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener item -> when (item.itemId) R.id.navigation_songs -> return @ OnNavigationItemSelectedListener true R.id.navigation_albums -> return @ OnNavigationItemSelectedListener true R.id .navigation_artists -> return @ OnNavigationItemSelectedListener true false override fun onCreate (savedInstanceState: Bundle?) // ... bottomNavigation.setOnNavigationItemSelectedListener (mOnNavigationItemSelectedListener) // ... 

Qui abbiamo chiamato il metodo setOnNavigationItemSelectedListener. Ecco cosa fa secondo la documentazione ufficiale:

Imposta un listener che verrà avvisato quando viene selezionato un oggetto di navigazione in basso.

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. Alla fine di ciascuno quando ramo, torniamo vero.

Quindi passiamo il nostro mOnNavigationItemSelectedListener ascoltatore a setOnNavigationItemSelectedListener () come argomento. 

Essere consapevoli del fatto che esiste un altro metodo simile chiamato setOnNavigationItemReselectedListener, che verrà notificato quando l'elemento di navigazione in basso attualmente selezionato viene riselezionato.

Successivamente, creeremo le diverse pagine (o frammenti) per ciascuna voce di menu nel cassetto di navigazione in modo che quando si fa clic o si tocchi una voce di menu, venga visualizzato un diverso frammento o pagina Android. 

6. Creazione dei frammenti (pagine)

Inizieremo con il SongsFragment.kt classe, e dovresti seguire un processo simile per le restanti due classi di frammenti-AlbumsFragment.kt e ArtistsFragment.kt.

Ecco il mio SongsFragment.kt:

import android.os.Bundle import android.support.v4.app.Fragment import android.view.LayoutInflater import android.view.View import android.view.ViewGroup class SongsFragment: Fragment () override fun onCreateView (inflater: LayoutInflater, container : ViewGroup ?, savedInstanceState: Bundle?): View? = inflater.inflate (R.layout.fragment_songs, container, false) oggetto companion fun newInstance (): SongsFragment = SongsFragment ()

Inoltre, ecco il mio R.layout.fragment_songs: 

7. Lancio dei frammenti

Quando viene cliccato uno qualsiasi degli elementi del menu, apriamo il frammento corrispondente e cambiamo anche il titolo della barra di azione. 

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener item -> when (item.itemId) R.id.navigation_songs -> toolbar.title = "Songs" val songsFragment = SongsFragment.newInstance () openFragment (songsFragment) return @ OnNavigationItemSelectedListener true R.id.navigation_albums -> toolbar.title = "Album" val albumsFragment = AlbumsFragment.newInstance () openFragment (albumsFragment) return @ OnNavigationItemSelectedListener true R.id.navigation_artists -> toolbar.title = "Artists" val artistsFragment = ArtistsFragment.newInstance () openFragment (artistsFragment) return @ OnNavigationItemSelectedListener true false private fun openFragment (framment: Fragment) val transaction = supportFragmentManager.beginTransaction () transaction.replace (R.id.container, fragment) transaction.addToBackStack ( null) transaction.commit ()

Qui stiamo usando un metodo chiamato openFragment () che semplicemente usa il FragmentTransaction per aggiungere il nostro frammento all'interfaccia utente. 

Ora esegui di nuovo il progetto per vedere come funziona!

Ogni volta che si fa clic su qualsiasi voce di menu, l'utente verrà portato a un nuovo frammento. 

Nota che quando abbiamo più di quattro voci di menu nella barra di navigazione in basso, vale a dire. nel BottomNavigationView-quindi il sistema Android attiva automaticamente la modalità Shift. In questa modalità, quando si fa clic su una qualsiasi delle voci di menu, gli altri elementi a destra o a sinistra dell'elemento selezionato vengono spostati. 

8. Bonus: utilizzando i modelli di Android Studio

Ora che hai imparato a conoscere le API coinvolte per creare una barra di navigazione in basso da zero in Android, ti mostrerò un collegamento che renderà più veloce la prossima volta. Puoi semplicemente usare un modello invece di codificare una barra di navigazione 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 una barra di navigazione in basso. 

Per utilizzare questa comoda funzionalità per un nuovo progetto, innanzitutto avviare 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, selezionare Attività di navigazione in basso. Clicca il Il prossimo pulsante di nuovo dopo. 

Nell'ultima finestra di dialogo è possibile rinominare l'attività o modificarne il nome o il titolo del layout, se lo si desidera. Infine, fai clic sul finire pulsante per accettare tutte le configurazioni. 

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

Si consiglia vivamente di esplorare il codice generato. 

In un progetto Android Studio esistente, per utilizzare questo modello, basta andare su File> Nuovo> Attività> Attività di navigazione in basso.

Tieni presente che i modelli inclusi in Android Studio sono adatti per layout semplici e applicazioni di base, ma se vuoi davvero avviare la tua app, potresti prendere in considerazione alcuni dei modelli di app disponibili da 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 una barra di navigazione in basso in Android utilizzando il BottomNavigationView API da zero. Abbiamo anche esplorato come utilizzare facilmente e rapidamente i modelli di Android Studio per creare un'attività di navigazione in basso. 

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

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