Share
Vad du ska skapaMaterialkonstruktionslaget hos Google definierar funktionaliteten för en navigeringslåda i Android enligt följande:
Navigationslådan glider in från vänster och innehåller navigationsdestinationerna för din app.
Ett exempel på en populär Android-app som implementerar navigationslådan är Inkorgen-appen från Google, som använder en navigationslåda för att navigera till olika delar av programmet. Du kan själv kontrollera det genom att hämta Inbox-appen från Google Play Butik, om du inte redan har den på din enhet. Skärmbilden nedan visar Inkorgen med navigationslådan dras öppen.
Användaren kan se navigeringslådan när de sveper ett finger från aktivitets vänstra kant. De kan också hitta den från hemaktiviteten (den högsta nivån på appen) genom att knacka på appikonen (även kallad "hamburgare" -menyn) i handlingsfältet.
Observera att om du har många olika destinationer (mer än sex säger) i din app rekommenderas att du använder en navigeringslåda.
I det här inlägget lär du dig att visa navigeringsobjekt i en navigationslåda i Android. Vi kommer att täcka hur du använder DrawerLayout och NavigationView API för att utföra denna uppgift. För en bonus lär du dig också hur du använder Android Studio-mallar-funktionen för att snabbt starta ditt projekt med en navigationslåda.
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 NavigationDrawerDemo) med en tom aktivitet som heter Huvudaktivitet. Se till att du också kontrollerar Inkludera Kotlin support kryssrutan.
För att börja använda DrawerLayout och NavigationView I ditt projekt måste du importera 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' implementation 'com.android.support:support-v4:27.0.2'
Inkludera även både DrawerLayout widget och även NavigationView widget i din res / layout / activlty_main.xml fil.
Här skapade vi en DrawerLayout widget med id drawer_layout. De Verktyg: openDrawer Egenskapen används för att visa navigationslådan när XML-layouten är öppen i Android Studio-designvyn.
Den officiella dokumentationen säger följande om DrawerLayout:
DrawerLayoutfungerar som en toppnivåbehållare för fönsterhalt som tillåter att interaktiva "låd" -vyer utdrages från en eller båda vertikala kanterna av fönstret.
Efter att ha lagt till DrawerLayout widget, vi inkluderade en barnlayout som pekar på @ Layout / app_bar_main.
Här är min app_bar_main.xml resursfilen. Den här filen har bara en CoordinatorLayout, en AppBarLayout, och a Toolbar widget.
Slutligen skapade vi en NavigationView widget. Den officiella dokumentationen säger följande om NavigationView:
Accentsconagua
NavigationView representerar en standard navigationsmeny för applikation. Menyinnehållet kan fyllas i av en menyfunktionsfil.I NavigationView XML-widgeten kan du se att vi lagt till en android: layout_gravity attribut med värde Start. Detta används för att placera lådan - du vill att lådan ska komma ut från vänster eller höger (start eller slut på plattformsversioner som stöder layoutriktningen). I vårt eget fall kommer lådan att komma ut från vänster.
Vi inkluderade också en app: headerLayout attribut som pekar på @ Layout / nav_header_main. Detta lägger till en Se som en rubrik i navigeringsmenyn.
Här är min nav_header_main.xml layout resursfil:
Denna layoutfil har bara en Linear, en Imageview, och a Textview.
För att inkludera menyalternativen för navigeringslådan kan vi använda attributet app: menu med ett värde som pekar på en menyresursfil.
Här är res / meny / activity_main_drawer.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.
Vi definierade då vår första menygrupp med hjälp av
en element för att skapa en undermeny-vi gjorde just det här i vår sista
Observera att när vi visar navigationslistan från en menyresurs kan vi använda en Listvy istället. Men genom att konfigurera navigationslådan med en menyresurs, får vi gratis designdesignen på navigeringslådan gratis! Om du använde a Listvy, du måste behålla listan och även stile den för att uppfylla de rekommenderade materialdesignspecifikationerna för navigeringslådan.
Därefter kommer vi att initiera instanser av vår DrawerLayout och ActionBarDrawerToggle. Initialisering kommer att hända inuti onCreate () i MainActivity.kt.
importera android.content.res.Configuration import android.os.Bundle importera android.support.v4.widget.DrawerLayout importera android.support.v7.app.ActionBarDrawerToggle importera android.support.v7.app.AppCompatActivity import android.support.v7 .widget.Toolbar importera android.view.MenuItem class MainActivity: AppCompatActivity () privat lateinit var skuff: DrawerLayout privat lateinit var toggle: ActionBarDrawerToggle åsidosätta roligt onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) setContentView (R.layout .aktivitet_main) valverktygsfält: Verktygsfält = findViewById (R.id.toolbar_main) setSupportActionBar (verktygsfält) låda = findViewById (R.id.drawer_layout) toggle = ActionBarDrawerToggle (det här, lådan, verktygsfältet, R.string.navigation_drawer_open, R.string. navigation_drawer_close) drawer.addDrawerListener (switch) supportActionBar? .setDisplayHomeAsUpEnabled (true) supportActionBar? .setHomeButtonEnabled (true) // ...
De ActionBarDrawerToggle ställer in appikonen till vänster om aktivitetsfältet eller verktygsfältet för att öppna och stänga navigeringslådan. För att kunna skapa en instans av ActionBarDrawerToggle, vi måste tillhandahålla följande parametrar:
Aktivitet du använder detta, medan i a Fragment du ringer getActivity () DrawerLayout widget för att länka till aktiviteten Åtgärdsfältet Vi åberopade metoden addDrawerListener () på en DrawerLayout för att ansluta en ActionBarDrawerToggle med en DrawerLayout.
Observera att vi även aktiverar appikonen via setHomeButtonEnabled () och aktivera den för "upp" navigering via setDisplayHomeAsUpEnabled ().
Vi vidarebefordrar onPostCreate (), onConfigurationChanged (), och onOptionsItemSelected () aktivitets återkopplingsmetoder på växeln:
klassen MainActivity: AppCompatActivity () // ... åsidosätta roligt påPostCreate (savedInstanceState: Bundle?) super.onPostCreate (savedInstanceState) toggle.syncState () åsidosätta roligt påConfigurationChanged (newConfig: Configuration?) super.onConfigurationChanged (newConfig) växla. onConfigurationChanged (newConfig) åsidosätta roligt onOptionsItemSelected (item: MenuItem?): Boolean if (toggle.onOptionsItemSelected (item)) return true returnera super.onOptionsItemSelected (item)
Här är vad syncState () gör enligt den officiella dokumentationen:
Synkroniserar statusen för lådindikatorn / affordance med den länkade DrawerLayout ... Detta ska kallas från dinAktivitet'sonPostCreateMetod för att synkronisera efter att DrawerLayouts instansstatus har återställts och någon annan gång då staten kan ha avvikit på ett sådant sätt att ActionBarDrawerToggle inte anmäldes. (Till exempel om du slutar vidarebefordra lämpliga lånehändelser under en tidsperiod.)
Vid denna tidpunkt kan vi köra appen!
Som du kan se visas appen "Hamburger" navigeringslådan i aktivitetsfältet genom att starta appen. Prova att knacka på den här appikonen för att öppna lådan. Om du inte klickar på navigeringslådan kommer det inte att göra någonting. Vi kommer att hantera den delen i nästa avsnitt.
Låt oss nu se hur man hanterar klickhändelser för var och en av objekten i navigeringslådan. Observera att klick på något objekt ska ta dig till en ny aktivitet eller fragment - det är därför det kallas en navigeringslåda!
Först måste din verksamhet genomföra NavigationView.OnNavigationItemSelectedListener.
klass MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ...
Genom att genomföra detta kontrakt eller gränssnitt måste vi nu överväga den enda metoden: onNavigationItemSelected ().
klassen MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ... åsidosätta roligt påNavigationItemSelected (item: MenuItem): Boolean när (item.itemId) R.id.nav_item_one -> Toast.makeText (detta, "Clicked item one" , Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (detta, "Clicked item two", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText (detta " Clicked Item Three ", Toast.LENGTH_SHORT) .show () R.id.nav_item_four -> Toast.makeText (detta," Clicked item four ", Toast.LENGTH_SHORT) .show () returnera true
Denna metod aktiveras när ett objekt i navigeringsmenyn ä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.
Därefter måste vi initiera vår NavigationView och sätt in den här lyssnaren inuti onCreate () av vår verksamhet.
klassen MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ... åsidosätta roligt onCreate (savedInstanceState: Bundle?) // ... val navigationView: NavigationView = findViewById (R.id.nav_view) navigationView.setNavigationItemSelectedListener (this) // ... // ...
Kör projektet igen!
När du klickar på några föremål visas ett rostat bröd-precis vad vi förväntade oss. Men kom ihåg att klick på ett objekt borde ta användaren till en ny aktivitet eller fragment (vi ignorerade detta här för korthetens skull).
Du kommer märka att när du klickar på ett objekt kvarstår lådan fortfarande. Det skulle vara bättre om det stängdes automatiskt när som helst ett objekt klickades. Låt oss se hur du gör det.
åsidosätta roligt påNavigationItemSelected (item: MenuItem): Boolean när (item.itemId) R.id.nav_item_one -> Toast.makeText (detta, "Clicked item one", Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (detta, "Clicked item two", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText (detta, "Clicked item three", Toast.LENGTH_SHORT) .show () R .id.nav_item_four -> Toast.makeText (detta, "Clicked item four", Toast.LENGTH_SHORT) .show () låda.closeDrawer (GravityCompat.START) returnera true
För att stänga lådan efter att en länk har klickat, ringa bara på closeDrawer () i en instans av DrawerLayout och passera GravityCompat.START till metoden.
Kör projektet en gång till och se resultatet!
När lådan är öppen skulle det vara en bättre användarupplevelse att inte stänga hemaktiviteten om Tillbaka knappen trycks in. Så här fungerar populära appar som Google Inbox-app.
Så när lådan är öppen och Tillbaka knappen trycks ned, stäng endast lådan istället för den aktuella hemaktiviteten. Då, om användaren trycker på Tillbaka knappen igen ska hemaktiviteten vara stängd.
Så här kan vi uppnå detta:
åsidosätta roligt påBackPressed () om (drawer.isDrawerOpen (GravityCompat.START)) drawer.closeDrawer (GravityCompat.START) annars super.onBackPressed ()
Kör projektet igen och testa det!
Nu när du har lärt dig om de involverade API: erna för att skapa en navigationslåda, 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 navigationslåda Aktivitet 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 navigationslådaaktivitet.
Jag visar dig hur du använder den här praktiska funktionen i Android Studio.
För ett nytt projekt, skjut 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, bläddra ned och välj Navigationslådans aktivitet. Klicka på Nästa knappen efter det.
I den sista dialogrutan kan du byta namnet Aktivitetsnamn, 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 navigationslådaaktivitet. Väldigt coolt!
Du rekommenderas starkt att utforska den genererade koden.
Du kan också använda mallar för ett redan befintligt Android Studio-projekt. Helt enkelt gå till Arkiv> Ny> Aktivitet> Navigationslådans aktivitet.
Mallarna som följer med Android Studio är bra för enkla layouter och grundläggande apper, men om du vill starta din app ännu längre 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 denna handledning lärde du dig hur du skapar en navigationslåda i Android med hjälp av DrawerLayout och NavigationView API från början. Vi undersökte också hur du enkelt och snabbt använder Android Studio-mallarna för att skapa en navigationslåda.
Jag rekommenderar starkt att du tittar på de officiella riktlinjerna för materialdesign för navigationslådor för att lära dig mer om hur du konstruerar och använder navigationslådor på Android korrekt.
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+!
