Share
Ce veți creaEchipa de proiectare a materialului de la Google definește funcționalitatea unui sertar de navigare în Android după cum urmează:
Sertarul de navigare alunecă din stânga și conține destinațiile de navigare pentru aplicația dvs..
Un exemplu de aplicație populară Android care implementează sertarul de navigare este aplicația Inbox de la Google, care utilizează un sertar de navigare pentru a naviga la diferite secțiuni ale aplicației. Puteți să-l verificați prin descărcarea aplicației Inbox din Magazin Google Play, dacă nu o aveți deja pe dispozitiv. Imaginea de mai jos afișează Inbox cu desenul de navigare tras deschis.
Utilizatorul poate vizualiza sertarul de navigare atunci când glisa un deget de la marginea din stânga a activității. De asemenea, le pot găsi din activitatea de acasă (nivelul de vârf al aplicației), prin atingerea pictogramei aplicației (cunoscută și ca meniul "hamburger") în bara de acțiune.
Rețineți că dacă aveți multe destinații diferite (mai mult de șase, să zicem) în aplicația dvs., este recomandat să utilizați un sertar de navigare.
În acest post, veți afla cum să afișați elemente de navigare în interiorul unui sertar de navigare în Android. Vom descoperi cum să folosim DrawerLayout și NavigationView API pentru a îndeplini această sarcină. Pentru un bonus, veți afla, de asemenea, cum să utilizați funcția de șabloane Android Studio pentru a vă lansa rapid proiectul cu un sertar de navigare.
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 NavigationDrawerDemo) 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 DrawerLayout și NavigationView în proiectul dvs., va trebui să importați suportul de proiectare și, de asemenea, artefactul de asistență Android. Adăugați-le astfel la modulul dvs. build.gradle fișier pentru a le importa.
dependencies implementation 'com.android.support:design:27.0.2' implementation 'com.android.support:support-v4:27.0.2'
De asemenea, includeți atât DrawerLayout widget și de asemenea NavigationView widget în telefonul tău res / aspect / activlty_main.xml fişier.
Aici am creat o DrawerLayout widget cu id-ul drawer_layout. instrumente: openDrawer proprietatea este utilizată pentru a afișa sertarul de navigare atunci când aspectul XML este deschis în vizualizarea de proiectare Android Studio.
Documentația oficială spune următoarele despre DrawerLayout:
DrawerLayoutacționează ca un container de nivel superior pentru conținutul ferestrei care permite vizualizărilor interactiv "sertare" să fie extrase din una sau ambele marginile verticale ale ferestrei.
După adăugarea funcției DrawerLayout widget, am inclus un aspect copil care indică @ Aspect / app_bar_main.
Aici e al meu app_bar_main.xml fișier de resurse. Acest fișier are pur și simplu a CoordinatorLayout, un AppBarLayout, și a Bara de instrumente widget.
În cele din urmă, am creat o NavigationView widget. Documentația oficială spune următoarele despre NavigationView:
Accentsconagua
NavigationView reprezintă un meniu standard de navigare pentru aplicație. Conținutul meniului poate fi populat de un fișier de resurse al meniului.În NavigationView XML widget, puteți vedea că am adăugat un Android: layout_gravity atribut cu valoare start. Acesta este folosit pentru a poziționa sertarul - doriți ca sertarul să iasă din stânga sau din dreapta (începutul sau sfârșitul pe versiunile de platformă care suportă direcția aspectului). În cazul nostru, sertarul va ieși din stânga.
Am inclus și un app: headerLayout atribut care indică @ Aspect / nav_header_main. Acest lucru va adăuga a Vedere ca antet al meniului de navigare.
Aici e al meu nav_header_main.xml layout resource file:
Acest fișier de dispunere are pur și simplu a LinearLayout, un ImageView, și a TextView.
Pentru a include elementele de meniu pentru sertarul de navigare, putem folosi atributul app: meniu cu o valoare care indică un fișier de resurse al meniului.
Aici este res / meniu / activity_main_drawer.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.
Apoi am definit primul nostru grup de meniuri folosind
A pentru a crea un submeniu - am făcut acest lucru în ultimul nostru domeniu
Rețineți că atunci când afișăm elementele din lista de navigare dintr-o resursă de meniu, am putea folosi a ListView in schimb. Dar, prin configurarea sertarului de navigație cu o resursă de meniu, obținem gratuit stilul de design al materialelor din sertarul de navigare! Dacă ați folosit a ListView, va trebui să mențineți lista și să o stylizați pentru a îndeplini specificațiile de proiectare recomandate pentru sertarul de navigare.
Apoi, vom iniția instanțe ale noastre DrawerLayout și ActionBarDrawerToggle. Inițializarea se va întâmpla în interior onCreate () în MainActivity.kt.
importați android.content.res.Configurarea importului android.os.Bundle import android.support.v4.widget.DrawerLayout import android.support.v7.app.ActionBarDrawerToggle import șiroid.support.v7.app.AppCompatActivity import android.support.v7 .widget.Toolbar import Mainframe: AppCompatActivity () privat lateinit var sertar: DrawerLayout privat lateinit var toggle: ActionBarDrawerToggle suprascrie fun onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) setContentView (R.layout .activity_main) bara de instrumente val: Toolbar = findViewById (R.id.toolbar_main) setSupportActionBar (bara de instrumente) drawer = findViewById (R.id.drawer_layout) toggle = ActionBarDrawerToggle (aceasta, sertar, bara de instrumente, R.string.navigation_drawer_open, R.string. (true) supportActionBar? .setHomeButtonEnabled (adevărat) // ...
ActionBarDrawerToggle configurează pictograma aplicației din stânga barei de acțiune sau bara de instrumente pentru a deschide și închide sertarul de navigare. Pentru a putea crea o instanță de ActionBarDrawerToggle, trebuie să furnizăm următorii parametri:
Activitate să utilizați acest, în timp ce în a Fragment sunați getActivity () DrawerLayout widget pentru a face legătura cu activitatea acesteia ActionBar Am invocat metoda addDrawerListener () pe o DrawerLayout astfel încât să se conecteze ActionBarDrawerToggle cu DrawerLayout.
Rețineți că activăm și pictograma aplicației setHomeButtonEnabled () și să o activați pentru navigarea "în sus" prin setDisplayHomeAsUpEnabled ().
Apoi, transmitem onPostCreate (), onConfigurationChanged (), și onOptionsItemSelected () activarea metodelor de apel invers la activarea comutatorului:
clasa MainActivity: AppCompatActivity () // ... suprascrie fun onPostCreate (savedInstanceState: Bundle?) super.onPostCreate (savedInstanceState) toggle.syncState () suprascrie fun onConfigurationChanged (newConfig: Configuration?) super.onConfigurationChanged (newConfig) comuta. onConfigurationChanged (newConfig) suprascrie distracție onOptionsItemSelected (item: MenuItem?): Boolean if (toggle.onOptionsItemSelected (item)) return true retur super.onOptionsItemSelected (item)
Iată ce este syncState () , conform documentației oficiale:
Sincronizează starea indicatorului / ofertei de sertar cu DrawerLayout conectat ... Acesta trebuie să fie apelat de la dvs.Activitate„sonPostCreatemetoda de sincronizare după ce starea de instanță a lui DrawerLayout a fost restabilită și oricare alt moment în care statul s-ar putea să fi deviat în așa fel încât ActionBarDrawerToggle să nu fi fost anunțat. (De exemplu, dacă opriți redirecționarea evenimentelor sertare corespunzătoare pentru o perioadă de timp.)
În acest moment, putem rula aplicația!
După cum puteți vedea, lansarea aplicației va afișa pictograma sertar de navigare "hamburger" din bara de acțiune. Încercați să atingeți această pictogramă pentru a deschide sertarul. De asemenea, dacă faceți clic pe elementele de sertar de navigare nu se va face nimic - vom prelua acea parte în secțiunea următoare.
Acum, să vedem cum să gestionăm evenimentele de clic pentru fiecare dintre elementele din sertarul de navigare. Rețineți că faceți clic pe orice element ar trebui să vă ducă la o nouă activitate sau un fragment - de aceea se numește un sertar de navigare!
În primul rând, activitatea dvs. trebuie să implementeze NavigationView.OnNavigationItemSelectedListener.
clasa MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ...
Prin implementarea acestui contract sau a unei interfețe, trebuie să depășim acum singura metodă: onNavigationItemSelected ().
Clasa MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ... suprascrie fun onNavigationItemSelected (item: MenuItem): Boolean when (item.itemId) R.id.nav_item_one -> Toast.makeText (acest " , Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (aceasta, "Apasă pe elementul doi", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText S-a făcut clic pe elementul trei ", Toast.LENGTH_SHORT) .show () R.id.nav_item_four -> Toast.makeText (acest element," Toast.LENGTH_SHORT ") .show () return true
Această metodă este invocată atunci când este selectat un element din meniul de navigare. 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.
Apoi, trebuie să ne inițializăm NavigationView și a pus acest ascultător înăuntru onCreate () a activității noastre.
Clasa principală: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ... suprascrie fun onCreate (savedInstanceState: Bundle?) // ... val navigațieView: NavigationView = findViewById (R.id.nav_view) navigationView.setNavigationItemSelectedListener (this) // ...
Rulați din nou proiectul!
Când faceți clic pe anumite elemente, este afișat un mesaj de toast - exact ceea ce ne-am așteptat. Dar amintiți-vă că făcând clic pe un element ar trebui să ia utilizatorul la o nouă activitate sau un fragment (am ignorat acest lucru aici, din motive de coerență).
Veți observa că atunci când faceți clic pe un element, sertarul rămâne în continuare. Ar fi mai bine să se închidă automat în momentul în care un element a fost apăsat. Să vedem cum să facem asta.
suprascrie distracția onNavigationItemSelected (item: MenuItem): Boolean when (item.itemId) R.id.nav_item_one -> Toast.makeText (aceasta, "itemed one click", Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (acest lucru, "Element clickat trei", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText .id.nav_item_four -> Toast.makeText (acest lucru, "element clic pe patru", Toast.LENGTH_SHORT) .show () drawer.closeDrawer (GravityCompat.START)
Pentru a închide sertarul după ce a fost făcut clic pe o legătură, pur și simplu invoca closeDrawer () pe un exemplu de DrawerLayout și treci GravityCompat.START la această metodă.
Rulați încă o dată proiectul și vedeți rezultatul!
Când sertarul este deschis, ar fi o experiență mai bună a utilizatorului să nu închidă activitatea la domiciliu dacă Înapoi butonul este apăsat. Acesta este modul în care funcționează aplicații populare cum ar fi aplicația Inbox Google.
Deci, atunci când sertar este deschis și Înapoi butonul este apăsat, închideți numai sertarul în locul activității curente. Apoi, dacă utilizatorul apasă Înapoi butonul din nou, activitatea de acasă ar trebui să fie închisă.
Iată cum putem realiza acest lucru:
suprascrie distracția onBackPressed () if (drawer.isDrawerOpen (GravityCompat.START)) drawer.closeDrawer (GravityCompat.START) altceva super.onBackPressed ()
Rulați din nou proiectul și testați-l!
Acum, că ați aflat despre API-urile implicate pentru a crea un sertar de navigare, vă voi arăta o comandă rapidă care o va face mai rapidă data viitoare. Puteți pur și simplu să utilizați un șablon în loc să codificați o activitate de navigare din sertar 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 activitate de sertare pentru navigație.
Vă vom arăta cum să utilizați această caracteristică la îndemână în Android Studio.
Pentru un nou proiect, lansaț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 dialog, derulați în jos și selectați Activitatea sertarului navigației. Apasă pe Următor → după aceea.
În ultimul dialog, puteți redenumi numele activității, numele planului sau titlul, 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 sertare de navigare. Foarte cool!
Vă recomandăm cu tărie să explorați codul generat.
Puteți utiliza și șabloane pentru un proiect Android deja deja existent. Pur și simplu du-te la Fișier> Nou> Activitate> Activitatea sertarei de navigare.
Șabloanele care sunt incluse în Android Studio sunt potrivite pentru layout-uri simple și pentru realizarea de aplicații de bază, dar dacă doriți să vă lansați aplicația chiar mai departe, 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 un sertar de navigare în Android utilizând DrawerLayout și NavigationView API de la zero. De asemenea, am explorat cum să utilizați cu ușurință și rapid șabloanele Android Studio pentru a crea un sertar de navigare.
Vă recomandăm să consultați liniile directoare oficiale de proiectare pentru sertarele de navigare pentru a afla mai multe despre cum să proiectați și să utilizați în mod corespunzător sertarele de navigație î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+!
