Share
Hva du skal skapeMaterielldesignteamet på Google definerer funksjonaliteten til bunnnavigasjonsfeltene i Android på følgende måte:
Bunnnavigasjonsbjelker gjør det enkelt å utforske og bytte mellom toppnivåvisninger i et enkelt trykk.
Ved å trykke på et nedre navigasjonsikon tar du direkte til den tilknyttede visningen eller oppdaterer den aktive visningen.
I henhold til de offisielle retningslinjene for materialdesign for bunnnavigasjonslinjen, bør den brukes når appen din har:
Et eksempel på en populær app som implementerer bunnnavigasjonslinjen, er Google+ Android-appen fra Google, som bruker den til å navigere til forskjellige destinasjoner i appen. Du kan se dette selv ved å laste ned Google + -appen fra Google Play-butikken (hvis du ikke allerede har den på enheten). Følgende skjermbilde er fra Google + -appen, og viser en nedre navigasjonslinje.
I dette innlegget lærer du hvordan du viser menyelementer i en nedre navigeringslinje i Android. Vi bruker BottomNavigationView API for å utføre oppgaven. For en ekstra bonus, lærer du også hvordan du bruker Android Studio-malerfunksjonen for å raskt starte opp prosjektet ditt med en nedre navigasjonslinje.
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 BottomNavigationDemo) 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 BottomNavigationView I prosjektet ditt må du sørge for at du importerer designstøtten og også Android support artefakt. Legg til disse i modulen din build.gradle fil for å importere dem.
avhengigheter implementering 'com.android.support:design:27.0.2'
Besøk også din res / layout / activlty_main.xml fil for å inkludere BottomNavigationView widget. Denne oppsettfilen inneholder også en ConstraintLayout og a FrameLayout. Legg merke til at FrameLayout vil fungere som en beholder eller plassholder for de forskjellige fragmentene som vil bli plassert på det når et menyelement klikkes i nederste navigasjonsfelt. (Vi kommer snart til det.)
Her har vi laget en BottomNavigationView widget med id navigationView. Den offisielle dokumentasjonen sier at:
Accentsconagua
BottomNavigationView representerer en standard bunnnavigasjonslinje for applikasjon. Det er en implementering av materialdesign bunnnavigasjon.Bunnnavigasjonsbjelker gjør det enkelt for brukerne å utforske og bytte mellom toppnivåvisninger i ett enkelt trykk. Det skal brukes når søknaden har tre til fem toppdestinasjoner.
De viktige attributter du bør legge merke til som ble lagt til i vår BottomNavigationView er:
app: itemBackground: Dette attributtet angir bakgrunnen for menyelementene til den oppgitte ressursen. I vårt tilfelle ga vi bare en bakgrunnsfarge. app: itemIconTint: Angir fargen som brukes på menyelementene 'ikonene.app: itemTextColor: setter fargene til bruk for de forskjellige tilstandene (normalt, valgt, fokusert, etc.) i menyelementteksten.For å inkludere menypunktene for den nederste navigeringslinjen, kan vi bruke attributtet app: menu med en verdi som peker på en meny ressursfil.
Her er res / meny / navigation.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. Som du kan se, hver
Deretter skal vi initialisere en forekomst av BottomNavigationView. Initialisering skal skje inni onCreate () i MainActivity.kt.
importer android.os.Bundle import android.support.design.widget.BottomNavigationView importere android.support.v7.app.AppCompatActivity class MainActivity: AppCompatActivity () lateinit var verktøylinje: ActionBar overstyre moro onCreate (savedInstanceState: Bundle?) super. onCreate (savedInstanceState) setContentView (R.layout.activity_main) verktøylinje = supportActionBar !! val bottomNavigation: BottomNavigationView = findViewById (R.id.navigationView)
Nå kan vi kjøre appen!
Som du kan se, vises bunnnavigasjonslinjen nederst på appskjermbildet. Ingenting skjer hvis du klikker på noen av navigasjonselementene der - vi skal håndtere den delen i neste avsnitt.
Nå, la oss se hvordan du konfigurerer klikkhendelser for hver av elementene i nedre navigasjonslinjen. Husk at å klikke på et hvilket som helst element der inne skal ta brukeren til et nytt reisemål i appen.
// ... private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener item -> når (item.itemId) R.id.navigation_songs -> retur @ OnNavigationItemSelectedListener true R.id.navigation_albums -> retur @ OnNavigationItemSelectedListener true R.id .navigation_artists -> return @ OnNavigationItemSelectedListener true false overstyr moro onCreate (savedInstanceState: Bundle?) // ... bottomNavigation.setOnNavigationItemSelectedListener (mOnNavigationItemSelectedListener) // ...
Her kalte vi metoden setOnNavigationItemSelectedListener. Her er hva det gjør i henhold til den offisielle dokumentasjonen:
Angi en lytter som vil bli varslet når et bunnnavigasjonselement 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. På slutten av hver når gren, vi kommer tilbake ekte.
Vi passerer da vår mOnNavigationItemSelectedListener lytter til setOnNavigationItemSelectedListener () som et argument.
Vær oppmerksom på at det heter en annen lignende metode setOnNavigationItemReselectedListener, som vil bli varslet når det valgte valgte bunnnavigasjonselementet er valgt på nytt.
Deretter skal vi lage de forskjellige sidene (eller fragmentene) for hver av menypunktene i navigasjonsskuffen, slik at når et menyelement blir klikket eller tappet, viser det et annet Android-fragment eller -side.
Vi starter med SongsFragment.kt klasse, og du bør følge en lignende prosess for de resterende to fragmentklassene-AlbumsFragment.kt og ArtistsFragment.kt.
Her er min SongsFragment.kt:
importer android.os.Bundle import android.support.v4.app.Fragment import android.view.LayoutInflater import android.view.View import android.view.ViewGroup klassen SongsFragment: Fragment () overstyr moro onCreateView (oppblader: LayoutInflater, container : ViewGroup ?, savedInstanceState: Bundle?): View? = inflater.inflate (R.layout.fragment_songs, container, false) companion object morsom newInstance (): SongsFragment = SongsFragment ()
Også her er min R.layout.fragment_songs:
Når noen av menyelementene klikkes, åpner vi det tilsvarende fragmentet og endrer også handlingslinjens tittel.
private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener item -> når (item.itemId) R.id.navigation_songs -> toolbar.title = "Songs" val songsFragment = SongsFragment.newInstance () openFragment (songsFragment) returnerer @ OnNavigationItemSelectedListener true R.id.navigation_albums -> toolbar.title = "Albums" val albumsFragment = AlbumsFragment.newInstance () openFragment (albumsFragment) return @ OnNavigationItemSelectedListener true R.id.navigation_artists -> toolbar.title = "Artister" val artistsFragment = ArtistsFragment.newInstance () openFragment (artistsFragment) return @ OnNavigationItemSelectedListener true false privat morsom openFragment (fragment: Fragment) val transaksjon = supportFragmentManager.beginTransaction () transaction.replace (R.id.container, fragment) transaction.addToBackStack null) transaction.commit ()
Her bruker vi en metode som kalles openFragment () som bare bruker FragmentTransaction å legge til vårt fragment til brukergrensesnittet.
Kjør prosjektet igjen for å se hvordan alt fungerer!
Når som helst du klikker på et menyelement, vil det ta brukeren til et nytt fragment.
Vær oppmerksom på at når vi har mer enn fire menyelementer i nedre navigasjonsfeltet, dvs. i BottomNavigationView-så aktiverer Android-systemet automatisk skiftmodus. I denne modusen, når noen av menypunktene klikkes, blir de andre elementene til høyre eller venstre for det klikket elementet skiftet.
Nå som du har lært om APIene som er involvert for å lage en nedre navigasjonslinje fra grunnen av Android, viser jeg deg en snarvei som gjør det raskere neste gang. Du kan bare bruke en mal i stedet for å kode en navigeringslinje 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 nedre navigasjonslinje.
For å bruke denne praktiske funksjonen til et nytt prosjekt, brann du først opp Android Studio.
Skriv inn programnavnet og klikk på neste knapp. Du kan legge til standardinnstillingene som de er i Mål Android-enheter dialog.
Klikk på neste knappen igjen.
I Legg til en aktivitet til mobilen dialog, velg Bunn navigasjonsaktivitet. Klikk på neste knappen igjen etter det.
I den siste dialogboksen kan du endre navn på aktiviteten, eller endre oppsettnavn eller tittel 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 bunnnavigasjonsaktivitet. Virkelig kult!
Du anbefales på det sterkeste å utforske koden som er generert.
I et eksisterende Android Studio-prosjekt, for å bruke denne malen, går du ganske enkelt til Fil> Ny> Aktivitet> Bunn navigasjonsaktivitet.
Vær oppmerksom på at malene som følger med Android Studio, er gode for enkle oppsett og grunnleggende programmer, men hvis du virkelig vil starte appen din, kan du vurdere noen av appmalmene 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 nedre navigeringslinje i Android ved hjelp av BottomNavigationView API fra grunnen av. Vi har også undersøkt hvordan du enkelt og raskt kan bruke Android Studio-maler for å lage en bunnnavigasjonsaktivitet.
Jeg anbefaler på det sterkeste å sjekke ut de offisielle retningslinjene for materialdesign for bunnnavigasjonslinjen for å lære mer om hvordan du skal utforme og bruke nederste navigasjonslinjen på Android.
For å lære mer om koding for Android, sjekk ut noen av våre andre kurs og opplæringsprogrammer her på Envato Tuts+!
