Share
Hva du skal skapeMaterielldesignteamet på Google definerer funksjonaliteten til en navigasjonsskuff i Android som følger:
Navigeringsskuffen glir inn fra venstre og inneholder navigasjonsdestinasjonene for appen din.
Et eksempel på en populær Android-app som implementerer navigasjonsskuffen, er Inbox-appen fra Google, som bruker en navigasjonsskuff for å navigere til forskjellige deler av programmet. Du kan sjekke det selv ved å laste ned Inbox-appen fra Google Play-butikken, hvis du ikke allerede har den på enheten din. Skjermbildet nedenfor viser Innboks med navigasjonsskuffen åpnet.
Brukeren kan se navigasjonsskuffen når de sveiper en finger fra aktiviteten til venstre. De kan også finne den fra hjemmeaktiviteten (toppnivået av appen) ved å trykke på appikonet (også kjent som "hamburger" -menyen) i handlingslinjen.
Merk at hvis du har mange forskjellige destinasjoner (mer enn seks, sier) i appen din, anbefales det at du bruker en navigasjonsskuff.
I dette innlegget lærer du hvordan du viser navigasjonselementer i en navigasjonsskuff i Android. Vi vil dekke hvordan du bruker DrawerLayout og NavigationView API for å utføre denne oppgaven. For en bonus, lærer du også hvordan du bruker Android Studio-malerfunksjonen for å raskt starte opp prosjektet ditt med en navigasjonsskuff.
Et prøveprosjekt (i Kotlin) for denne opplæringen finner du på vår GitHub repo, slik at du enkelt kan følge med.
For å kunne følge denne opplæringen må du:
Brann opp Android Studio og opprett et nytt prosjekt (du kan nevne det NavigationDrawerDemo) med en tom aktivitet som heter Hoved aktivitet. Pass på at du også sjekker Inkluder Kotlin-støtte merk av i boksen.
For å begynne å bruke DrawerLayout og NavigationView i prosjektet ditt må du importere designstøtten og også Android-støtteartefakten. Så legg disse til modulens build.gradle fil for å importere dem.
avhengigheter implementering 'com.android.support:design:27.0.2' implementering 'com.android.support:support-v4:27.0.2'
Inkluder også begge DrawerLayout widget og også NavigationView widget i din res / layout / activlty_main.xml fil.
Her opprettet vi en DrawerLayout widget med id drawer_layout. De verktøy: openDrawer Egenskapen brukes til å vise navigasjonsskuffen når XML-oppsettet er åpent i Android Studio-designvisning.
Den offisielle dokumentasjonen sier følgende om DrawerLayout:
DrawerLayoutfungerer som en toppnivåbeholder for vindusinnhold som gjør at interaktive "skuff" -visninger kan trekkes ut fra en eller begge vertikale kanter av vinduet.
Etter å ha lagt til DrawerLayout widget, vi inkluderte et barnoppsett som peker på @ Oppsett / app_bar_main.
Her er min app_bar_main.xml ressursfilen. Denne filen har bare en CoordinatorLayout, en AppBarLayout, og a verktøylinje widget.
Endelig opprettet vi en NavigationView widget. Den offisielle dokumentasjonen sier følgende om NavigationView:
Accentsconagua
NavigationView representerer en standard navigasjonsmeny for søknad. Menyinnholdet kan fylles av en menyressursfil.I NavigationView XML-widget, kan du se at vi har lagt til en android: layout_gravity attributt med verdi start. Dette brukes til å plassere skuffen - du vil at skuffen skal komme ut fra venstre eller høyre (start eller slutt på plattformversjoner som støtter oppsettretning). I vårt eget tilfelle kommer skuffen ut fra venstre.
Vi inkluderte også en app: headerLayout attributt som peker på @ Oppsett / nav_header_main. Dette vil legge til en Utsikt som en header på navigasjonsmenyen.
Her er min nav_header_main.xml layout ressursfil:
Denne layoutfilen har bare en LinearLayout, en Imageview, og a TextView.
For å inkludere menypunktene for navigasjonsskuffen, kan vi bruke attributtet app: menu med en verdi som peker på en meny ressursfil.
Her er res / meny / activity_main_drawer.xml menyen ressursfil:
Her har vi definert a Meny bruker som tjener som en beholder for menyelementer. en MENUITEM, som representerer et enkelt element i en meny.
Vi definerte da vår første menygruppe ved hjelp av
EN element for å lage en undermeny-vi gjorde nettopp dette i vår siste
Vær oppmerksom på at når du viser navigasjonslisteelementene fra en menyressurs, kan vi bruke en Listevisning i stedet. Men ved å konfigurere navigasjonsskuffen med en menyressurs, får vi gratis designdesign på navigasjonsskuffen gratis! Hvis du brukte en Listevisning, du må opprettholde listen og også utforme den for å møte de anbefalte materialdesignspesifikasjonene for navigasjonsskuffen.
Deretter skal vi initialisere forekomster av vår DrawerLayout og ActionBarDrawerToggle. Initialisering skal skje inni onCreate () i MainActivity.kt.
importer 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 importere android.view.MenuItem class MainActivity: AppCompatActivity () private lateinit var skuff: DrawerLayout Private Lateinit var toggle: ActionBarDrawerToggle overstyr moro onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) setContentView (R.layout .activity_main) val verktøylinje: Toolbar = findViewById (R.id.toolbar_main) setSupportActionBar (verktøylinje) skuff = findViewById (R.id.drawer_layout) toggle = ActionBarDrawerToggle (dette, skuff, verktøylinje, R.string.navigation_drawer_open, R.string. navigation_drawer_close) skuff.addDrawerListener (swap) supportActionBar? .setDisplayHomeAsUpEnabled (true) supportActionBar? .setHomeButtonEnabled (true) // ...
De ActionBarDrawerToggle setter opp appikonet til venstre for handlingslinjen eller verktøylinjen for å åpne og lukke navigasjonsskuffen. For å kunne opprette en forekomst av ActionBarDrawerToggle, vi må gi følgende parametere:
Aktivitet du bruker dette, mens i a Fragment du ringer getActivity () DrawerLayout widget for å koble til aktiviteten ActionBar Vi påkalte metoden addDrawerListener () på en DrawerLayout for å koble en ActionBarDrawerToggle med en DrawerLayout.
Vær oppmerksom på at vi også aktiverer appikonet via setHomeButtonEnabled () og aktiver den for "opp" navigasjon via setDisplayHomeAsUpEnabled ().
Vi videresender deretter onPostCreate (), onConfigurationChanged (), og onOptionsItemSelected () aktivitet tilbakeringingsmetoder på toggle:
klasse MainActivity: AppCompatActivity () // ... overstyr moro onPostCreate (savedInstanceState: Bundle?) super.onPostCreate (savedInstanceState) toggle.syncState () overstyre moro påConfigurationChanged (newConfig: Configuration?) super.onConfigurationChanged (newConfig) bytte. onConfigurationChanged (newConfig) overstyre moro onOptionsItemSelected (item: MenuItem?): Boolsk if (toggle.onOptionsItemSelected (item)) return true returnere super.onOptionsItemSelected (item)
Her er hva syncState () gjør, ifølge den offisielle dokumentasjonen:
Synkroniserer statusen til skuffindikatoren / affordance med den koblede DrawerLayout ... Dette skal kalles fra dinAktivitet'sonPostCreateMetode for å synkronisere etter at DrawerLayouts instansstatus er gjenopprettet, og annen gang når staten kan ha divergert på en slik måte at ActionBarDrawerToggle ikke ble varslet. (For eksempel, hvis du slutter å videresende aktuelle skuffhendelser over en periode.)
På dette tidspunktet kan vi kjøre appen!
Som du kan se, vil lanseringen av appen vise "hamburger" navigasjonsskuffikonet i handlingslinjen. Prøv å trykke på dette appikonet for å åpne skuffen. Også når du klikker på navigasjonsskuffene, vil det ikke gjøre noe. Vi kommer til å håndtere den delen i neste avsnitt.
Nå, la oss se hvordan du håndterer klikkhendelser for hvert av elementene i navigasjonsskuffen. Vær oppmerksom på at klikk på et element skal bringe deg til en ny aktivitet eller fragment - det er derfor det kalles en navigasjonsskuff!
Først må aktiviteten din gjennomføre NavigationView.OnNavigationItemSelectedListener.
klasse MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ...
Ved å implementere denne kontrakten eller grensesnittet, må vi nå overstyre den eneste metoden: onNavigationItemSelected ().
klasse MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ... overstyre moro på NavigeringsItemSelected (item: MenuItem): Boolsk når (item.itemId) R.id.nav_item_one -> Toast.makeText (dette, "Clicked item one" , Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (dette, "Clicked item two", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText (dette, " Clicked item three ", Toast.LENGTH_SHORT) .show () R.id.nav_item_four -> Toast.makeText (dette," Clicked item four ", Toast.LENGTH_SHORT) .show () return true
Denne metoden er påkalt når et element i navigasjonsmenyen er valgt. Vi brukte når uttrykk for å utføre forskjellige handlinger basert på menyelementet som ble klikket - menyelementet ids tjener som konstanter for når uttrykk.
Deretter må vi initialisere vår NavigationView og sett inn denne lytteren onCreate () av vår aktivitet.
Klasse MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ... overstyr moro onCreate (savedInstanceState: Bundle?) // ... val navigationView: NavigationView = findViewById (R.id.nav_view) navigationView.setNavigationItemSelectedListener (this) // ... // ...
Kjør prosjektet igjen!
Når du klikker på noen elementer, vises en toastmelding - akkurat det vi forventet. Men husk at å klikke på et element skal ta brukeren til en ny aktivitet eller fragment (vi ignorerte dette her for korthetens skyld).
Du vil legge merke til at når du klikker på et element, er skuffen fortsatt. Det ville være bedre om det stengte automatisk når et objekt ble klikket. La oss se hvordan du gjør det.
overstyr moro på Navigeringsvalg Selected (item: MenuItem): Boolsk når (item.itemId) R.id.nav_item_one -> Toast.makeText (dette, "Clicked item one", Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (dette, "Clicked item two", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText (dette, "Clicked item three", Toast.LENGTH_SHORT) .show () R .id.nav_item_four -> Toast.makeText (dette, "Clicked item four", Toast.LENGTH_SHORT) .show () skuff.closeDrawer (GravityCompat.START) returnerer sann
For å lukke skuffen etter at en lenke er klikket, ber du bare på closeDrawer () på en forekomst av DrawerLayout og passere GravityCompat.START til metoden.
Kjør prosjektet enda en gang og se resultatet!
Når skuffen er åpen, vil det være en bedre brukeropplevelse å ikke lukke hjemmeaktiviteten hvis Tilbake knappen er trykket. Slik fungerer populære apper som Googles innboks-app.
Så når skuffen er åpen og Tilbake knappen er trykket, bare lukk skuffen i stedet for gjeldende hjemmeaktivitet. Deretter, hvis brukeren trykker på Tilbake knappen igjen, bør hjemmeaktiviteten være stengt.
Slik kan vi oppnå dette:
overstyr moro påBackPressed () hvis (drawer.isDrawerOpen (GravityCompat.START)) skuff.closeDrawer (GravityCompat.START) ellers super.onBackPressed ()
Kjør prosjektet igjen og test det ut!
Nå som du har lært om APIene som er involvert for å lage en navigasjonsskuff, viser jeg deg en snarvei som gjør det raskere neste gang. Du kan bare bruke en mal i stedet for å kode en navigasjonsskuff Aktivitet fra grunnen av.
Android Studio tilbyr kodemaler som følger Android-utviklingen og utviklingen av beste praksis. Disse eksisterende kodemaler (tilgjengelig i Java og Kotlin) kan hjelpe deg med å raskt starte prosjektet ditt. En slik mal kan brukes til å opprette en navigasjonsskuffaktivitet.
Jeg viser deg hvordan du bruker denne praktiske funksjonen i Android Studio.
For et nytt prosjekt, brann opp Android Studio.
Skriv inn programnavnet og klikk på neste knapp.
Du kan legge til standardinnstillingene som de er i Mål Android-enheter dialogen. Klikk på neste knappen igjen.
I Legg til en aktivitet til mobilen dialogboksen, bla ned og velg Navigasjon skuff aktivitet. Klikk på neste knappen etter det.
I den siste dialogboksen kan du omdøpe aktivitetsnavnet, oppsettnavnet eller tittelen hvis du vil. Til slutt klikker du på Bli ferdig knappen for å godta alle konfigurasjoner.
Android Studio har nå hjulpet oss med å opprette et prosjekt med en navigasjonsskuffaktivitet. Virkelig kult!
Du anbefales på det sterkeste å utforske koden som er generert.
Du kan også bruke maler for et allerede eksisterende Android Studio-prosjekt. Bare gå til Arkiv> Nytt> Aktivitet> Navigasjon Skuffaktivitet.
Maler som følger med Android Studio, er gode for enkle oppsett og grunnleggende apps, men hvis du ønsker å starte appen enda mer, kan du vurdere noen av appmalerne som er tilgjengelige fra Envato Market.
De er en stor tidsbesparelse for erfarne utviklere, og hjelper dem å kutte gjennom slagordet om å lage en app fra bunnen av og fokusere sine talenter i stedet på de unike og tilpassede delene av å lage en ny app.
I denne opplæringen lærte du hvordan du oppretter en navigasjonsskuff i Android ved hjelp av DrawerLayout og NavigationView API fra grunnen av. Vi har også undersøkt hvordan du enkelt og raskt kan bruke Android Studio-maler for å lage en navigasjonsskuff.
Jeg anbefaler på det sterkeste å sjekke ut de offisielle retningslinjene for materialdesign for navigasjonsskuffer for å lære mer om hvordan du skal utforme og bruke navigasjonsskuffer i Android.
For å lære mer om koding for Android, sjekk ut noen av våre andre kurs og opplæringsprogrammer her på Envato Tuts+!
