Share
Ce veți creaEchipa de design material din cadrul Google definește funcționalitatea barelor de navigare de jos în Android după cum urmează:
Panourile de navigare din partea de jos facilitează explorarea și comutarea între vizualizările de nivel superior într-o singură atingere.
Dacă atingeți o pictogramă de navigare de jos, vă duceți direct la vizualizarea asociată sau actualizați vizualizarea activă în prezent.
Conform liniilor directoare oficiale de proiectare pentru bara de navigare de jos, aceasta ar trebui să fie utilizată atunci când aplicația dvs. are:
Un exemplu de aplicație populară care implementează bara de navigare de jos este aplicația Google+ pentru Android de la Google, care o folosește pentru navigarea către diferite destinații ale aplicației. Puteți vedea acest lucru descărcând aplicația Google+ din magazinul Google Play (dacă nu îl aveți deja pe dispozitiv). Următoarea captură de ecran este din aplicația Google+ care afișează o bară de navigare de jos.
În acest post, veți afla cum să afișați elementele de meniu în interiorul unei bare de navigare de jos în Android. Vom folosi BottomNavigationView API pentru a efectua sarcina. Pentru un bonus suplimentar, veți afla, de asemenea, cum să utilizați funcția de șabloane Android Studio pentru a vă lansa rapid proiectul cu o bară de navigare de jos.
Un exemplu de proiect (în Kotlin) pentru acest tutorial poate fi găsit pe replica noastră GitHub, pentru a putea urmări cu ușurință.
Pentru a putea urma acest tutorial, veți avea nevoie de:
Activați Android Studio și creați un nou proiect (îl puteți numi BottomNavigationDemo) cu o activitate goală numită Activitate principala. Asigurați-vă că verificați, de asemenea Includeți suportul Kotlin Caseta de bifat.
Pentru a începe să utilizați BottomNavigationView în proiectul dvs., asigurați-vă că importați suportul de proiectare și, de asemenea, artefactul de asistență Android. Adăugați-le în modulul dvs. build.gradle fișier pentru a le importa.
dependencies implementation 'com.android.support:design:27.0.2'
De asemenea, vizitați-vă res / aspect / activlty_main.xml fișier pentru a include BottomNavigationView widget. Acest fișier de aspect include, de asemenea, ConstraintLayout și a FrameLayout. Rețineți că FrameLayout va servi ca un container sau substituent pentru diferitele fragmente care vor fi plasate pe el ori de câte ori un element de meniu este apăsat în bara de navigare de jos. (Vom ajunge la asta în curând.)
Aici am creat o BottomNavigationView widget cu id-ul navigationView. Documentația oficială spune că:
Accentsconagua
BottomNavigationView reprezintă o bară standard de navigare de jos pentru aplicație. Este o implementare a navigației de fundal a designului materialului.Panourile de navigare de pe partea din stânga ușurează explorarea și comutarea între vizualizările de nivel superior într-o singură apăsare. Ar trebui să fie utilizat atunci când aplicația are trei până la cinci destinații de nivel superior.
Atributele importante pe care ar trebui să le țineți cont au fost adăugate la noi BottomNavigationView sunteți:
app: itemBackground: acest atribut stabilește fundalul elementelor noastre de meniu pentru resursa dată. În cazul nostru, i-am dat o culoare de fundal. app: itemIconTint: stabilește nuanța care este aplicată pictogramelor elementelor noastre de meniu.app: itemTextColor: stabilește culorile care trebuie utilizate pentru diferitele stări (normale, selectate, focalizate etc.) ale textului elementului de meniu.Pentru a include elementele de meniu pentru bara de navigare de jos, putem folosi atributul app: meniu cu o valoare care indică un fișier de resurse al meniului.
Aici este res / meniu / navigation.xml fișier resurse de meniu:
Aici am definit a Meniul folosind care servește drept container pentru elementele de meniu. Un Articol din meniu, care reprezintă un singur element dintr-un meniu. După cum puteți vedea, fiecare
Apoi, vom inițializa o instanță de BottomNavigationView. Inițializarea se va întâmpla în interior onCreate () în MainActivity.kt.
importați android.os.Bundle import șiroid.support.design.widget.BottomNavigationView import și class.google.support.v7.app.AppCompatActivity MainActivity: AppCompatActivity () lateinit var toolbar: ActionBar suprascrie fun onCreate (savedInstanceState: Bundle?) super. onCreate (savedInstanceState) setContentView (R.layout.activity_main) bara de instrumente = supportActionBar !! val bottomNavigație: BottomNavigationView = findViewById (R.id.navigationView)
Acum putem rula aplicația!
După cum vedeți, bara de navigare de jos se afișează în partea de jos a ecranului aplicației. Nimic nu se va întâmpla dacă faceți clic pe oricare dintre elementele de navigație de acolo - o vom ocupa de acea parte în secțiunea următoare.
Acum, să vedem cum să configurați evenimentele pentru clicuri pentru fiecare dintre elementele din bara de navigare de jos. Amintiți-vă că făcând clic pe orice element de acolo ar trebui să îl trimită pe utilizator către o nouă destinație din aplicație.
// ... private val mOnNavigationItemSelectedListener = BotNavigationView.OnNavigationItemSelectedListener item -> when (item.itemId) R.id.navigation_songs -> return @ OnNavigationItemSelectedListener true R.id.navigation_albums -> return @ OnNavigationItemSelectedListener true .navigation_artists -> return @ OnNavigationItemSelectedListener true false suprascrie fun onCreate (savedInstanceState: Bundle?) // ... bottomNavigation.setOnNavigationItemSelectedListener (mOnNavigationItemSelectedListener) // ...
Aici am denumit metoda setOnNavigationItemSelectedListener. Iată ce face conform documentației oficiale:
Setați un ascultător care va fi anunțat când este selectat un element de navigare de jos.
Am folosit cand expresie pentru a efectua diferite acțiuni bazate pe elementul din meniu la care a fost făcut clic - ID-urile elementelor de meniu servesc drept constante pentru cand expresie. La sfârșitul fiecăruia cand ramură, ne întoarcem Adevărat.
Atunci trecem pe noi mOnNavigationItemSelectedListener ascultătorului setOnNavigationItemSelectedListener () ca argument.
Fiți conștienți de faptul că există o altă metodă similară numită setOnNavigationItemReselectedListener, care va fi notificat atunci când elementul de navigare selectat în mod curent este selectat din nou.
Apoi, vom crea diferite pagini (sau Fragmente) pentru fiecare dintre elementele de meniu din sertarul de navigare, astfel încât atunci când un element de meniu este apăsat sau apăsat, acesta afișează un alt fragment sau pagină Android.
Vom începe cu SongsFragment.kt și urmați un proces similar pentru celelalte două clase de fragmente-AlbumsFragment.kt și ArtistsFragment.kt.
Aici e al meu SongsFragment.kt:
importați android.os.Bundle import android.support.v4.app.Fragment import șiroid.view.LayoutInflater import android.view.View import și class.ViewGroup SongsFragment: Fragment () override fun onCreateView (inflater: LayoutInflater, container : ViewGroup ?, savedInstanceState: Bundle?): Vezi? = inflater.inflate (R.layout.fragment_songs, container, false) obiect companion fun newInstance (): SongsFragment = SongsFragment ()
De asemenea, aici este meu R.layout.fragment_songs:
Când faceți clic pe oricare dintre elementele de meniu, deschideți Fragmentul corespunzător și schimbați, de asemenea, titlul barei de acțiune.
privat val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener element -> atunci când (item.itemId) R.id.navigation_songs -> toolbar.title = "Songs" val songsFragment = SongsFragment.newInstance () openFragment (songsFragment) return @ OnNavigationItemSelectedListener true R.id.navigation_albums -> toolbar.title = "Albume" val albumsFragment = AlbumsFragment.newInstance () openFragment (albumsFragment) return @ OnNavigationItemSelectedListener true R.id.navigation_artists -> toolbar.title = (Fracțiune: Fragment) val tranzacție = suportFragmentManager.beginTransaction () transaction.replace (R.id.container, fragment) transaction.addToBackStack () null) transaction.commit ()
Aici folosim o metodă numită openFragment () care utilizează pur și simplu FragmentTransaction pentru a adăuga fragmentul nostru la interfața utilizator.
Acum rulați din nou proiectul pentru a vedea cum funcționează toate!
Oricând faceți clic pe orice element de meniu, acesta va duce utilizatorul la un nou fragment.
Rețineți că atunci când avem mai mult de patru elemente de meniu în bara de navigare de jos - adică. în BottomNavigationView-apoi sistemul Android permite automat modul de schimbare. În acest mod, când se face clic pe oricare dintre elementele de meniu, celelalte elemente din dreapta sau din stânga elementului clic sunt deplasate.
Acum că ați aflat despre API-urile implicate pentru a crea o bară de navigare de jos de la zero în Android, vă voi arăta o comandă rapidă care o va face mai rapidă data viitoare. Puteți folosi pur și simplu un șablon în loc să codificați o bară de navigare de la zero.
Android Studio oferă șabloane de cod care respectă cele mai bune practici de design și dezvoltare Android. Aceste șabloane de cod existente (disponibile în Java și Kotlin) vă pot ajuta să vă lansați rapid proiectul. Un astfel de șablon poate fi utilizat pentru a crea o bară de navigare de jos.
Pentru a utiliza această caracteristică la îndemână pentru un nou proiect, inițializați mai întâi Android Studio.
Introduceți numele aplicației și faceți clic pe Următor → buton. Puteți lăsa setările implicite așa cum sunt în Direcționați dispozitive Android dialog.
Apasă pe Următor → butonul din nou.
În Adăuga o activitate pentru mobil , selectați Activitatea de navigare inferioară. Apasă pe Următor → apoi din nou.
În ultimul dialog, puteți redenumi activitatea sau puteți schimba numele sau titlul planului dacă doriți. În cele din urmă, faceți clic pe finalizarea pentru a accepta toate configurațiile.
Android Studio ne-a ajutat acum să creăm un proiect cu o activitate de navigare inferioară. Foarte cool!
Vă recomandăm cu tărie să explorați codul generat.
Într-un proiect existent pentru Android Studio, pentru a utiliza acest șablon, mergeți pur și simplu la Fișier> Nou> Activitate> Activitate de navigare în partea inferioară.
Rețineți că șabloanele care sunt incluse în versiunea Android Studio sunt bune pentru machete simple și pentru a face aplicații de bază, însă dacă doriți să lansați cu adevărat aplicația, puteți lua în considerare unele dintre șabloanele de aplicații disponibile de la Envato Market.
Sunt un economizor de timp uriaș pentru dezvoltatorii cu experiență, ajutându-i să-și taie slogul de a crea o aplicație de la zero și să-și concentreze talentele în schimb pe părțile unice și personalizate ale creării unei noi aplicații.
În acest tutorial, ați învățat cum să creați o bară de navigare de jos în Android folosind BottomNavigationView API de la zero. De asemenea, am explorat cum să utilizați cu ușurință și rapid șabloanele Android Studio pentru a crea o activitate de navigare inferioară.
Vă recomandăm să consultați liniile directoare oficiale de design pentru barele de navigare de jos pentru a afla mai multe despre cum să proiectați și să utilizați în mod corespunzător bara de navigare de jos în Android.
Pentru a afla mai multe despre codificarea pentru Android, consultați câteva dintre celelalte cursuri și tutoriale de aici, pe Envato Tuts+!
