Share
Vad du ska skapaMaterialkonstruktionsgruppen hos Google definierar funktionaliteten för nedre navigeringsfält i Android enligt följande:
Nedre navigeringsfält gör det enkelt att utforska och byta mellan toppnivån i en enda kran.
Genom att trycka på en nedre navigeringsikon tar du dig direkt till den associerade vyn eller uppdaterar den aktuella aktiva vyn.
Enligt de officiella riktlinjerna för materialdesign för den nedre navigeringsfältet ska den användas när din app har:
Ett exempel på en populär app som implementerar nedre navigeringsfältet är Google+ Android-appen från Google, som använder den för att navigera till olika destinationer i appen. Du kan se detta själv genom att ladda ner Google+ appen från Google Play Butik (om du inte redan har den på din enhet). Följande skärmdump är från Google+ appen som visar en nedre navigeringsfältet.
I det här inlägget lär du dig att visa menyalternativ i en nedre navigeringsfältet i Android. Vi använder BottomNavigationView API för att utföra uppgiften. För en extra bonus lär du dig också hur du använder Android Studio-mallar-funktionen för att snabbt starta upp ditt projekt med en nedre navigeringsfältet.
Ett provprojekt (i Kotlin) för denna handledning finns på vår GitHub repo så att du enkelt kan följa med.
För att kunna följa denna handledning behöver du:
Avfyra Android Studio och skapa ett nytt projekt (du kan namnge det BottomNavigationDemo) med en tom aktivitet som heter Huvudaktivitet. Se till att du också kontrollerar Inkludera Kotlin support kryssrutan.
För att börja använda BottomNavigationView i ditt projekt, se till att du importerar design support och även Android support artefakt. Lägg till dessa i modulen build.gradle fil för att importera dem.
beroenden implementation 'com.android.support:design:27.0.2'
Besök också din res / layout / activlty_main.xml fil att inkludera BottomNavigationView widget. Denna layoutfil innehåller också en ConstraintLayout och a FrameLayout. Observera att FrameLayout kommer att fungera som en behållare eller platshållare för de olika fragmenten som kommer att placeras på det när som helst ett menyalternativ klickas i nedre navigeringsfältet. (Vi kommer snart att få det.)
Här har vi skapat en BottomNavigationView widget med id navigationView. Den officiella dokumentationen säger att:
Accentsconagua
BottomNavigationView representerar en standard bottennavigationsfält för applikation. Det är en implementering av materialdesign bottennavigering.Nedre navigeringsfält gör det enkelt för användare att utforska och växla mellan toppnivån i en enda kran. Det ska användas när ansökan har tre till fem toppnivå destinationer.
De viktiga attribut som du bör notera är lagt till i vårt BottomNavigationView är:
app: itemBackground: Detta attribut sätter bakgrunden för våra menyalternativ till den givna resursen. I vårt fall gav vi det bara en bakgrundsfärg. app: itemIconTint: ställer in den nyans som tillämpas på ikonerna för menyalternativen.app: itemTextColor: ställer in färgerna för de olika tillstånden (normal, vald, fokuserad, etc.) i menyobjektet.För att inkludera menyalternativen för den nedre navigeringsfältet kan vi använda attributet app: menu med ett värde som pekar på en menyresursfil.
Här är res / meny / navigation.xml menyfunktionsfil:
Här har vi definierat a Meny använda som fungerar som en behållare för menyalternativ. En MENUITEM, som representerar ett enda objekt i en meny. Som du kan se, var och en
Därefter kommer vi att initiera en instans av BottomNavigationView. Initialisering kommer att hända inuti onCreate () i MainActivity.kt.
importera android.os.Bundle import android.support.design.widget.BottomNavigationView importera android.support.v7.app.AppCompatActivity class MainActivity: AppCompatActivity () lateinit var verktygsfält: ActionBar åsidosätta roligt onCreate (savedInstanceState: Bundle?) super. onCreate (savedInstanceState) setContentView (R.layout.activity_main) verktygsfält = supportActionBar !! val bottomNavigation: BottomNavigationView = findViewById (R.id.navigationView)
Nu kan vi köra appen!
Som du kan se visas vår nedre navigeringsfält längst ner på appskärmen. Inget kommer att hända om du klickar på någon av navigationsobjekten där-vi ska hantera den delen i nästa avsnitt.
Låt oss nu se hur du konfigurerar klickevenemang för var och en av objekten i nedre navigeringsfältet. Kom ihåg att klicka på något objekt där borde ta användaren till en ny destination i appen.
// ... privat val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener item -> när (item.itemId) R.id.navigation_songs -> return @ OnNavigationItemSelectedListener true R.id.navigation_albums -> return @ OnNavigationItemSelectedListener true R.id .navigation_artists -> return @ OnNavigationItemSelectedListener true false åsidosätta roligt onCreate (savedInstanceState: Bundle?) // ... bottomNavigation.setOnNavigationItemSelectedListener (mOnNavigationItemSelectedListener) // ...
Här kallade vi metoden setOnNavigationItemSelectedListener. Här är vad det gör enligt den officiella dokumentationen:
Ställ in en lyssnare som kommer att bli underrättad när ett undernavigationsobjekt är valt.
Vi använde när uttryck för att utföra olika åtgärder baserat på menyalternativet som klickades - menyalternativet ids fungerar som konstanter för när uttryck. I slutet av varje när gren, vi återvänder Sann.
Vi skickar sedan vår mOnNavigationItemSelectedListener lyssnare till setOnNavigationItemSelectedListener () som ett argument.
Var medveten om att det finns en annan liknande metod som heter setOnNavigationItemReselectedListener, som kommer att meddelas när det aktuella valda nedre navigeringsobjektet återvaliseras.
Därefter kommer vi att skapa de olika sidorna (eller fragmenten) för var och en av menyalternativen i navigeringslådan så att när ett menyalternativ klickas eller tappas visas det ett annat Android-fragment eller en sida.
Vi börjar med SongsFragment.kt klass, och du bör följa en liknande process för de återstående två fragmentsklasserna-AlbumsFragment.kt och ArtistsFragment.kt.
Här är min SongsFragment.kt:
importera android.os.Bundle import android.support.v4.app.Fragment import android.view.LayoutInflater importera android.view.View importera android.view.ViewGroup klass SongsFragment: Fragment () åsidosätta roligt påCreateView (inflater: LayoutInflater, container : ViewGroup ?, savedInstanceState: Bundle?): Visa? = inflater.inflate (R.layout.fragment_songs, container, false) companion object fun newInstance (): SongsFragment = SongsFragment ()
Här är också min R.layout.fragment_songs:
När någon av menyalternativen klickas öppnar vi motsvarande fragment och ändrar även aktivitetsfältets titel.
privat val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener item -> när (item.itemId) R.id.navigation_songs -> toolbar.title = "Songs" val songsFragment = SongsFragment.newInstance () openFragment (songsFragment) returnera @ OnNavigationItemSelectedListener true R.id.navigation_albums -> toolbar.title = "Album" val albumsFragment = AlbumsFragment.newInstance () openFragment (albumsFragment) returnera @ OnNavigationItemSelectedListener true R.id.navigation_artists -> toolbar.title = "Artister" val artistsFragment = ArtistsFragment.newInstance () openFragment (artistsFragment) returnera @ OnNavigationItemSelectedListener true false privata roliga openFragment (fragment: Fragment) val transaktion = supportFragmentManager.beginTransaction () transaction.replace (R.id.container, fragment) transaction.addToBackStack null) transaction.commit ()
Här använder vi en metod som heter openFragment () som helt enkelt använder FragmentTransaction att lägga till vårt fragment till användargränssnittet.
Kör nu projektet igen för att se hur allting fungerar!
Närhelst du klickar på något menyalternativ kommer det att ta användaren till ett nytt fragment.
Observera att när vi har mer än fyra menyalternativ i nedre navigeringsfältet, dvs. i BottomNavigationView-då aktiverar Android-systemet automatiskt växlingsläge. I det här läget, när någon av menyalternativen klickas, flyttas de andra objekten till höger eller vänster om det klickade objektet.
Nu när du har lärt dig om de involverade API: erna för att skapa en nedre navigeringsfält från början i Android, visar jag dig en genväg som gör det snabbare nästa gång. Du kan helt enkelt använda en mall istället för att koda en navigeringsfält från början.
Android Studio tillhandahåller kodmallar som följer de bästa metoderna för Android-design och utveckling. Dessa befintliga kodmallar (tillgängliga i Java och Kotlin) kan hjälpa dig att snabbt starta ditt projekt. En sådan mall kan användas för att skapa en nedre navigeringsfältet.
För att använda den här praktiska funktionen för ett nytt projekt ska du först skjuta upp Android Studio.
Ange programnamnet och klicka på Nästa knapp. Du kan lämna standardinställningarna som de är i Mål Android-enheter dialog.
Klicka på Nästa knappen igen.
I Lägg till en aktivitet till mobilen dialogrutan, välj Bottom Navigation Aktivitet. Klicka på Nästa knappen igen efter det.
I den sista dialogrutan kan du byta namn på aktiviteten eller ändra dess layoutnamn eller titel om du vill. Slutligen klickar du på Avsluta knappen för att acceptera alla konfigurationer.
Android Studio har nu hjälpt oss att skapa ett projekt med en nedre navigeringsaktivitet. Väldigt coolt!
Du rekommenderas starkt att utforska den genererade koden.
I ett befintligt Android Studio-projekt, för att använda denna mall, gå helt enkelt till Arkiv> Nytt> Aktivitet> Bottennavigationsaktivitet.
Observera att mallarna som följer med Android Studio är bra för enkla layouter och grundläggande apper, men om du verkligen vill starta din app kan du överväga några av de appmallar som finns tillgängliga från Envato Market.
De är en stor tidsbesparare för erfarna utvecklare, vilket hjälper dem att skära igenom sloget om att skapa en app från början och fokusera sina talanger istället på de unika och anpassade delarna av att skapa en ny app.
I den här handledningen lärde du dig hur du skapar en nedre navigeringsfält i Android med BottomNavigationView API från början. Vi undersökte också hur du enkelt och snabbt använder Android Studio-mallarna för att skapa en nedre navigeringsaktivitet.
Jag rekommenderar starkt att du tittar på de officiella riktlinjerna för materialdesign för nedre navigeringsfältet för att lära dig mer om hur du korrekt utformar och använder nedre navigeringsfältet i Android.
För mer information om kodning för Android, kolla in några av våra andra kurser och handledning här på Envato Tuts+!
