Hoe een onderste navigatiebalk coderen voor een Android-app

3. Initialisatie van componenten

Vervolgens gaan we een instantie van initialiseren BottomNavigationView. Initialisatie zal binnen gebeuren onCreate () in MainActivity.kt.

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

4. Testen van de app

Nu kunnen we de app uitvoeren!

Zoals u kunt zien, wordt onze onderste navigatiebalk onder aan het app-scherm weergegeven. Er gebeurt niets als u op een van de navigatie-items klikt - we gaan dat deel in de volgende sectie behandelen. 

5. Click Events configureren

Laten we nu eens kijken hoe we klikgebeurtenissen configureren voor elk item in de navigatiebalk onderaan. Vergeet niet dat als u op een item in de app klikt, de gebruiker naar een nieuwe bestemming in de app moet gaan.

// ... 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) // ... 

Hier hebben we de methode genoemd setOnNavigationItemSelectedListener. Dit is wat het doet volgens de officiële documentatie:

Stel een listener in die op de hoogte wordt gebracht wanneer een navigatie-item aan de onderkant is geselecteerd.

We gebruikten de wanneer expressie om verschillende acties uit te voeren op basis van het menu-item waarop werd geklikt - de menu-item-id's dienen als constanten voor de wanneer uitdrukking. Aan het einde van elk wanneer tak, keren we terug waar.

We passeren dan onze mOnNavigationItemSelectedListener luisteraar setOnNavigationItemSelectedListener () als een argument. 

Houd er rekening mee dat er een andere soortgelijke methode wordt genoemd setOnNavigationItemReselectedListener, die op de hoogte wordt gebracht wanneer het momenteel geselecteerde onderste navigatie-item opnieuw wordt geselecteerd.

Vervolgens gaan we de verschillende pagina's (of fragmenten) maken voor elk van de menu-items in de navigatielade, zodat wanneer op een menu-item wordt geklikt of er op wordt getikt, het een ander Android-fragment of een andere pagina weergeeft.. 

6. De fragmenten maken (pagina's)

We beginnen met de SongsFragment.kt klasse, en u moet een vergelijkbaar proces volgen voor de resterende twee fragmentklassen-AlbumsFragment.kt en ArtistsFragment.kt.

Hier is mijn SongsFragment.kt:

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

Ook hier is mijn R.layout.fragment_songs: 

7. Fragmenten starten

Wanneer op een van de menu-items wordt geklikt, openen we het bijbehorende fragment en wijzigen we ook de titel van de actiebalk. 

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 = "Albums" val albumsFragment = AlbumsFragment.newInstance () openFragment (albumsFragment) return @ OnNavigationItemSelectedListener true R.id.navigation_artists -> workbar.title = "Artiesten" val artistsFragment = ArtistsFragment.newInstance () openFragment (artistsFragment) return @ OnNavigationItemSelectedListener true false private fun openFragment (fragment: Fragment) val transaction = supportFragmentManager.beginTransaction () transaction.replace (R.id.container, fragment) transaction.addToBackStack ( null) transaction.commit ()

Hier gebruiken we een methode genaamd openFragment () die gewoon de FragmentTransaction om ons fragment toe te voegen aan de gebruikersinterface. 

Voer het project opnieuw uit om te zien hoe het allemaal werkt!

Telkens wanneer u op een menu-item klikt, wordt de gebruiker naar een nieuw fragment geleid. 

Merk op dat wanneer we meer dan vier menu-items hebben in de onderste navigatiebalk, d.w.z. in BottomNavigationView-dan schakelt het Android-systeem automatisch de schakelmodus in. In deze modus, wanneer op een van de menu-items wordt geklikt, worden de andere items aan de linker- of rechterkant van het aangeklikte item verschoven. 

8. Bonus: Android Studio-sjablonen gebruiken

Nu je hebt geleerd over de betrokken API's om vanuit Android een bottom-navigatiebalk helemaal zelf te maken, laat ik je een snelkoppeling zien die hem de volgende keer sneller maakt. U kunt eenvoudig een sjabloon gebruiken in plaats van een navigatiebalk vanuit het niets te coderen. 

Android Studio biedt codesjablonen die de best practices voor het ontwerpen en ontwikkelen van Android volgen. Deze bestaande codesjablonen (beschikbaar in Java en Kotlin) kunnen u helpen bij het snel opstarten van uw project. Eén zo'n sjabloon kan worden gebruikt om een ​​onderste navigatiebalk te maken. 

Als u deze handige functie voor een nieuw project wilt gebruiken, start u eerst Android Studio. 

Voer de naam van de toepassing in en klik op de volgende knop. U kunt de standaardinstellingen laten zoals ze zijn in de Target Android-apparaten dialoog. 

Klik op de volgende knop opnieuw. 

In de Toevoegen een activiteit naar mobiel dialoogvenster, selecteer Bottom Navigation Activity. Klik op de volgende knop daarna opnieuw. 

In het laatste dialoogvenster kunt u de activiteit hernoemen of de lay-outnaam of titel wijzigen als u dat wilt. Klik ten slotte op Af hebben om alle configuraties te accepteren. 

Android Studio heeft ons nu geholpen bij het maken van een project met een bottom-navigatie-activiteit. Echt cool!

U wordt dringend geadviseerd om de gegenereerde code te verkennen. 

Als u in een bestaand Android Studio-project deze sjabloon wilt gebruiken, gaat u gewoon naar Bestand> Nieuw> Activiteit> Onderste navigatie-activiteit.

Houd er rekening mee dat de sjablonen die bij Android Studio worden meegeleverd, goed zijn voor eenvoudige lay-outs en het maken van eenvoudige apps, maar als u uw app echt wilt starten, kunt u enkele app-sjablonen overwegen die verkrijgbaar zijn bij Envato Market.. 

Ze zijn een enorme tijdbesparing voor ervaren ontwikkelaars, waardoor ze de hele klus van het maken van een nieuwe app kunnen doorbreken en hun talenten kunnen richten op de unieke en aangepaste onderdelen van het maken van een nieuwe app.

Conclusie

In deze zelfstudie leer je hoe je een onderste navigatiebalk in Android maakt met behulp van de BottomNavigationView API helemaal opnieuw. We hebben ook onderzocht hoe je de Android Studio-sjablonen eenvoudig en snel kunt gebruiken om een ​​navigatie-activiteit op de bodem te maken. 

Ik raad ten zeerste aan om de officiële richtlijnen voor materiaalontwerp voor de navigatiebalk onderin te lezen voor meer informatie over het correct ontwerpen en gebruiken van de onderste navigatiebalk in Android.   

Voor meer informatie over codering voor Android, bekijk enkele van onze andere cursussen en tutorials hier op Envato Tuts+!