Share
Wat je gaat creërenHet materiaalontwerpteam bij Google definieert de functionaliteit van een navigatielade in Android als volgt:
De navigatielade schuift van links naar binnen en bevat de navigatiebestemmingen voor uw app.
Een voorbeeld van een populaire Android-app die de navigatielade implementeert, is de Inbox-app van Google, die een navigatielade gebruikt om naar verschillende delen van de toepassing te navigeren. U kunt dit zelf controleren door de Inbox-app te downloaden van de Google Play Store, als u deze nog niet op uw apparaat heeft. Het screenshot hieronder toont Inbox met de navigatielade opengetrokken.
De gebruiker kan de navigatielade bekijken wanneer deze met een vinger vanaf de linkerrand van de activiteit veegt. Ze kunnen het ook vinden via de thuisactiviteit (het hoogste niveau van de app) door te tikken op het app-pictogram (ook wel het "hamburger" -menu genoemd) in de actiebalk.
Houd er rekening mee dat als u veel verschillende bestemmingen (meer dan zes, bijvoorbeeld) in uw app heeft, het wordt aanbevolen een navigatielade te gebruiken.
In dit bericht leer je hoe je navigatie-items in een navigatielade in Android kunt weergeven. We zullen bespreken hoe de DrawerLayout en NavigationView API om deze taak uit te voeren. Voor een bonus leert u ook hoe u de sjablooneigenschap van Android Studio gebruikt om uw project snel op te starten met een navigatielade.
Een voorbeeldproject (in Kotlin) voor deze tutorial is te vinden op onze GitHub repo, zodat je gemakkelijk kunt volgen.
Als je deze zelfstudie wilt kunnen volgen, heb je het volgende nodig:
Start Android Studio en maak een nieuw project (u kunt het een naam geven NavigationDrawerDemo) met een lege activiteit genaamd Hoofdactiviteit. Zorg ervoor dat u ook de Inclusief Kotlin-ondersteuning selectievakje.
Om te beginnen met gebruiken DrawerLayout en NavigationView in uw project moet u de ontwerpondersteuning en ook het ondersteuningsartefact van Android importeren. Voeg deze dus toe aan uw modules build.gradle bestand om ze te importeren.
afhankelijkheden implementatie 'com.android.support:design:27.0.2' implementatie 'com.android.support:support-v4:27.0.2'
Voeg ook de DrawerLayout widget en ook de NavigationView widget in uw res / lay-out / activlty_main.xml het dossier.
Hier hebben we een gemaakt DrawerLayout widget met de ID drawer_layout. De gereedschappen: openDrawer eigenschap wordt gebruikt om de navigatielade weer te geven wanneer de XML-lay-out is geopend in de ontwerpweergave van Android Studio.
De officiële documentatie zegt het volgende over DrawerLayout:
DrawerLayoutfungeert als een container op het hoogste niveau voor vensterinhoud waarmee interactieve "lade" -weergaven uit een of beide verticale randen van het venster kunnen worden getrokken.
Na het toevoegen van de DrawerLayout widget, we hebben een onderliggende lay-out opgenomen die verwijst naar @ Lay-out / app_bar_main.
Hier is mijn app_bar_main.xml bronbestand. Dit bestand heeft gewoon een CoordinatorLayout, een AppBarLayout, en een Toolbar widget.
Uiteindelijk hebben we een gemaakt NavigationView widget. De officiële documentatie zegt het volgende over NavigationView:
Accentsconagua
NavigationView vertegenwoordigt een standaard navigatiemenu voor toepassing. De inhoud van het menu kan worden gevuld met een menubronbestand.In de NavigationView XML-widget, je kunt zien dat we een hebben toegevoegd android: layout_gravity attribuut met waarde begin. Dit wordt gebruikt om de lade te positioneren - u wilt dat de lade van links of rechts naar buiten komt (het begin of einde op platformversies die de lay-outrichting ondersteunen). In ons eigen geval komt de lade van links naar buiten.
We hebben ook een app: headerLayout attribuut dat naar wijst @ Lay-out / nav_header_main. Dit zal een toevoegen Uitzicht als een koptekst van het navigatiemenu.
Hier is mijn nav_header_main.xml indelingsbronbestand:
Dit lay-outbestand heeft gewoon een LinearLayout, een Figuurweergave, en een Tekstweergave.
Als u de menu-items voor de navigatielade wilt opnemen, kunnen we het attribuut gebruiken app: menu met een waarde die naar een menuresourcebestand verwijst.
Hier is de res / menu / activity_main_drawer.xml menubronbestand:
Hier hebben we een gedefinieerd Menu de ... gebruiken die dient als een container voor menu-items. Een Menu onderdeel, die een enkel item in een menu vertegenwoordigt.
Vervolgens hebben we onze eerste menugroep gedefinieerd met behulp van de
EEN element om een submenu te maken - we deden dit in onze vorige
Merk op dat bij het tonen van de items van de navigatielijst uit een menubron, we een a zouden kunnen gebruiken Lijstweergave in plaats daarvan. Maar door de navigatielade met een menubron te configureren, krijgen we de materiaalontwerpstijl in de navigatielade gratis! Als u een Lijstweergave, u zou de lijst moeten onderhouden en deze ook moeten stylen om te voldoen aan de aanbevolen specificaties voor materiaalontwerp voor de navigatielade.
Vervolgens gaan we instanties van onze initialiseren DrawerLayout en ActionBarDrawerToggle. Initialisatie zal binnen gebeuren onCreate () in MainActivity.kt.
import 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 importeer android.view.MenuItem class MainActivity: AppCompatActivity () privaat lateinit var lade: DrawerLayout privé lateinit var toggle: ActionBarDrawerToggle override fun onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) setContentView (R.layout .activity_main) val werkbalk: Toolbar = findViewById (R.id.toolbar_main) setSupportActionBar (werkbalk) lade = findViewById (R.id.drawer_layout) toggle = ActionBarDrawerToggle (dit, lade, werkbalk, R.string.navigation_drawer_open, R.string. navigation_drawer_close) drawer.addDrawerListener (toggle) supportActionBar? .setDisplayHomeAsUpEnabled (true) supportActionBar? .setHomeButtonEnabled (true) // ...
De ActionBarDrawerToggle stelt het app-pictogram in aan de linkerkant van de actiebalk of werkbalk om de navigatielade te openen en te sluiten. Een instantie van maken ActionBarDrawerToggle, we moeten de volgende parameters leveren:
Activiteit je gebruikt deze, terwijl in een Fragment je belt getActivity () DrawerLayout widget om te linken naar de activiteiten Actie bar We hebben de methode aangeroepen addDrawerListener () op een DrawerLayout om een verbinding te maken ActionBarDrawerToggle met een DrawerLayout.
Merk op dat we ook het pictogram van de app via inschakelen setHomeButtonEnabled () en schakel het in voor "omhoog" navigatie via setDisplayHomeAsUpEnabled ().
We sturen vervolgens het onPostCreate (), onConfigurationChanged (), en onOptionsItemSelected () activiteit callback-methoden op de toggle:
class MainActivity: AppCompatActivity () // ... override fun onPostCreate (savedInstanceState: Bundle?) super.onPostCreate (savedInstanceState) toggle.syncState () override fun onConfigurationChanged (newConfig: Configuration?) super.onConfigurationChanged (newConfig) toggle. onConfigurationChanged (newConfig) override fun onOptionsItemSelected (item: MenuItem?): Boolean if (toggle.onOptionsItemSelected (item)) return true retourneer super.onOptionsItemSelected (item)
Hier is wat de syncState () doet, volgens de officiële documentatie:
Synchroniseert de status van de indicator / affordance van de lade met de gekoppelde lade-uitvoer ... Dit moet worden opgeroepen vanuit uwActiviteit'sonPostCreatemethode om te synchroniseren nadat de instantie van de LadeLayout is hersteld en op een ander moment wanneer de staat mogelijk op een andere manier is gedevieerd dat de ActionBarDrawerToggle niet is aangemeld. (Bijvoorbeeld als u stopt met het doorsturen van de juiste lade-evenementen voor een bepaalde periode.)
Op dit moment kunnen we de app uitvoeren!
Zoals je kunt zien, zal het lanceren van de app het pictogram "hamburger" van de navigatielade in de actiebalk tonen. Probeer op dit app-pictogram te tikken om de lade te openen. Als u op de items in de navigatielade klikt, gebeurt er niets - we gaan dat gedeelte in het volgende gedeelte behandelen.
Laten we nu kijken hoe we klikgebeurtenissen kunnen verwerken voor elk item in de navigatielade. Houd er rekening mee dat klikken op een item u naar een nieuwe activiteit of fragment zou moeten brengen. Daarom wordt dit een navigatielade genoemd!
Ten eerste moet uw activiteit het NavigationView.OnNavigationItemSelectedListener.
class MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ...
Door het implementeren van dit contract of deze interface, moeten we nu de enige methode overschrijven: onNavigationItemSelected ().
class MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ... override fun onNavigationItemSelected (item: MenuItem): Boolean when (item.itemId) R.id.nav_item_one -> Toast.makeText (this, "Clicked item one") , Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (this, "Clicked item two", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText (this, " Geklikt op item drie ", Toast.LENGTH_SHORT) .show () R.id.nav_item_four -> Toast.makeText (this," Clicked item four ", Toast.LENGTH_SHORT) .show () return true
Deze methode wordt aangeroepen wanneer een item in het navigatiemenu is geselecteerd. We gebruikten de wanneer expressie om verschillende acties uit te voeren op basis van het menu-item waarop werd geklikt - de menu-item-id's dienen als constanten voor de wanneer uitdrukking.
Vervolgens moeten we onze initialiseren NavigationView en zet deze luisteraar erin onCreate () van onze activiteit.
class MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener // ... override fun onCreate (savedInstanceState: Bundle?) // ... val navigationView: NavigationView = findViewById (R.id.nav_view) navigationView.setNavigationItemSelectedListener (this) // ... // ...
Voer het project opnieuw uit!
Wanneer u op een aantal items klikt, wordt een toastbericht weergegeven - precies wat we verwachtten. Maar onthoud dat klikken op een item de gebruiker naar een nieuwe activiteit of fragment moet brengen (we negeerden dit hier ter wille van de bondigheid).
U zult merken dat wanneer u op een item klikt, de lade nog steeds aanwezig is. Het zou beter zijn als het automatisch werd gesloten wanneer een item werd aangeklikt. Laten we kijken hoe dat moet.
override fun onNavigationItemSelected (item: MenuItem): Boolean when (item.itemId) R.id.nav_item_one -> Toast.makeText (this, "Clicked item one", Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (this, "Clicked item two", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText (this, "Clicked item three", Toast.LENGTH_SHORT) .show () R .id.nav_item_four -> Toast.makeText (this, "Clicked item four", Toast.LENGTH_SHORT) .show () drawer.closeDrawer (GravityCompat.START) return true
Om de lade te sluiten nadat op een koppeling is geklikt, roept u eenvoudigweg op closeDrawer () op een instantie van DrawerLayout en ga voorbij GravityCompat.START naar de methode.
Run het project nog een keer en zie het resultaat!
Wanneer de lade open is, zou het een betere gebruikerservaring zijn om de thuisactiviteit niet te sluiten als het Terug knop is ingedrukt. Dit is de manier waarop populaire apps zoals de Inbox-app van Google werken.
Dus wanneer de lade open is en de Terug knop is ingedrukt, sluit alleen de lade in plaats van de huidige thuisactiviteit. Vervolgens, als de gebruiker op de Terug knop opnieuw, de thuisactiviteit moet worden gesloten.
Hier is hoe we dit kunnen bereiken:
onderdrukt plezier onBackPressed () if (drawer.isDrawerOpen (GravityCompat.START)) drawer.closeDrawer (GravityCompat.START) else super.onBackPressed ()
Voer het project opnieuw uit en test het!
Nu u kennis hebt gemaakt met de betrokken API's om een navigatielade te maken, laat ik u een snelkoppeling zien die het de volgende keer sneller maakt. U kunt eenvoudig een sjabloon gebruiken in plaats van alles vanuit het niets aan een navigatielade-activiteit te coderen.
Android Studio biedt codesjablonen die de best practices voor het ontwerpen en ontwikkelen van Android volgen. Deze bestaande codesjablonen (beschikbaar in Java en Kotlin) kunnen u helpen bij het snel opstarten van uw project. Eén zo'n sjabloon kan worden gebruikt om een navigatie-laderactiviteit te maken.
Ik zal je laten zien hoe je deze handige functie in Android Studio kunt gebruiken.
Voor een nieuw project, start Android Studio op.
Voer de naam van de toepassing in en klik op de volgende knop.
U kunt de standaardinstellingen laten zoals ze zijn in de Target Android-apparaten dialoogvenster. Klik op de volgende knop opnieuw.
In de Toevoegen een activiteit naar mobiel dialoogvenster, scrol omlaag en selecteer Navigatie Lade Activiteit. Klik op de volgende knop daarna.
In het laatste dialoogvenster kunt u desgewenst de naam van de activiteit, de lay-outnaam of de titel hernoemen. Klik ten slotte op Af hebben om alle configuraties te accepteren.
Android Studio heeft ons nu geholpen met het maken van een project met een navigatie-laderactiviteit. Echt cool!
U wordt dringend geadviseerd om de gegenereerde code te verkennen.
U kunt ook sjablonen gebruiken voor een reeds bestaand Android Studio-project. Ga gewoon naar Bestand> Nieuw> Activiteit> Navigatie-lade Activiteit.
De sjablonen die bij Android Studio worden meegeleverd, zijn goed voor eenvoudige lay-outs en het maken van eenvoudige apps, maar als u uw app nog een stapje hoger wilt zetten, kunt u enkele app-sjablonen overwegen die verkrijgbaar zijn bij Envato Market..
Ze zijn een enorme tijdbesparing voor ervaren ontwikkelaars, waardoor ze de hele klus van het maken van een nieuwe app kunnen doorbreken en hun talenten kunnen richten op de unieke en aangepaste onderdelen van het maken van een nieuwe app.
In deze zelfstudie hebt u geleerd hoe u een navigatielade in Android maakt met behulp van de DrawerLayout en NavigationView API helemaal opnieuw. We hebben ook onderzocht hoe je de Android Studio-sjablonen eenvoudig en snel kunt gebruiken om een navigatielade te maken.
Ik raad ten zeerste aan om de officiële richtlijnen voor het ontwerpen van materialen voor navigatieladen te lezen voor meer informatie over het correct ontwerpen en gebruiken van navigatieladen in Android.
Voor meer informatie over codering voor Android, bekijk enkele van onze andere cursussen en tutorials hier op Envato Tuts+!
