De ondersteuningsbibliotheek van Android Design verkennen: onderste navigatieweergave

Het is alweer een tijdje geleden dat ik over de Android Design Support Library schreef en ik was super enthousiast om vanochtend wakker te worden om te ontdekken dat de Bottom Navigation View is toegevoegd aan versie 25 van de Design Support Library!

De onderste navigatieweergave staat al een tijdje in de richtlijnen voor materiaalontwerp, maar het is voor ons niet eenvoudig geweest om deze in onze apps te implementeren. Sommige applicaties hebben hun eigen oplossingen gebouwd, terwijl anderen gebruik hebben gemaakt van open-source bibliotheken van derden om de klus te klaren. Nu ziet de bibliotheek voor ontwerpondersteuning de toevoeging van deze onderste navigatiebalk, laten we een duik nemen in hoe we het kunnen gebruiken!

Ik heb een heel eenvoudige voorbeeld-app gemaakt, hij staat op github als je hem wilt bekijken.

De onderste navigatieweergave aan uw lay-out toevoegen

Om te beginnen moeten we onze afhankelijkheid bijwerken!

compileer ‘com.android.support:design:25.0.0’

Vervolgens moeten we gewoon de widget Onderste navigatieweergave toevoegen aan ons gewenste lay-outbestand. Vergeet niet dat dit moet worden uitgelijnd met de onderkant van het scherm met alle inhoud die erboven wordt weergegeven. We kunnen deze weergave als volgt toevoegen:

U zult merken dat de widget een aantal attributen heeft. We kunnen deze gebruiken om menu-items in te stellen die we willen weergeven en de kleuren die in de onderste navigatieweergave moeten worden gebruikt:

  • app: itemBackground - De achtergrondkleur die moet worden gebruikt voor het onderste navigatiemenu
  • app: itemIconTint - De tint die moet worden gebruikt voor de pictogrammen in het onderste navigatiemenu
  • app: itemTextColor - De kleur die moet worden gebruikt voor de tekst in het onderste navigatiemenu
  • app: menu - De menubron die wordt gebruikt om items in het onderste navigatiemenu weer te geven

We kunnen deze waarden ook programmatisch instellen met behulp van de volgende methoden in onze BottomNavigationView-instantie:

  • inflateMenu (int menuResource) - Blaas een menu op voor de onderste navigatieweergave met behulp van een menuresource-ID.
  • setItemBackgroundResource (int backgroundResource) - De achtergrond die moet worden gebruikt voor de menu-items.
  • setItemTextColor (ColorStateList colorStateList) - Een ColorStateList die wordt gebruikt om de tekst in te kleuren die wordt gebruikt voor de menu-items
  • setItemIconTintList (ColorStateList colorStateList) - Een ColorStateList die wordt gebruikt om de pictogrammen voor de menu-items te kleuren

Als u dit aan uw app toevoegt en op uw apparaat uitvoert, ziet u een glimmende nieuwe weergave van de onderste navigatie zoals hieronder:

Maak een menu om weer te geven

Dus we hebben in het vorige gedeelte naar een menu verwezen, maar hoe ziet dit eruit? Nou, het ziet er precies hetzelfde uit als elk ander menu dat we in onze app zouden gebruiken!

Het is belangrijk op te merken dat het maximale aantal items dat we kunnen weergeven, 5 is. Dit kan op elk moment veranderen, dus het is belangrijk om dit te controleren met behulp van de methode getMaxItem () van de klasse BottomNavigationView in plaats van de waarde zelf hard te coderen.

Omgaan met ingeschakelde / uitgeschakelde staten

Met de BottomNavigationView kunnen we de weergave van zowel ingeschakelde als uitgeschakelde menu-items eenvoudig verwerken. Om deze view in deze gevallen te kunnen verwerken, hoeven we slechts twee wijzigingen aan te brengen:

  • Eerst moeten we een selector-bestand maken voor onze ingeschakelde / uitgeschakelde kleuren. Als u nog niet eerder een van deze hebt gebruikt, kunnen we het uiterlijk bepalen op basis van de status van een item.
  • Vervolgens moeten we

Uitgeschakelde en ingeschakelde statussen worden dan weergegeven volgens het aangegeven uiterlijk uit het selectorbestand:

Luister naar klikgebeurtenissen

Nu we ons menu hebben geïmplementeerd, moeten we kunnen reageren wanneer er interactie mee is. We kunnen de methode BottomNavigationView setOnNavigationItemSelectedListener () gebruiken om een ​​luisteraar in te stellen voor menu-itemgebeurtenissen:

Wanneer we klikgebeurtenissen voor de items ontvangen, kunnen we eenvoudig dienovereenkomstig reageren. In mijn voorbeeld verander ik eenvoudig het huidig ​​geselecteerde view pager item dat op het scherm wordt weergegeven.

En dat is het!

Het lijkt helemaal niet zoveel - ik hoop dat je nu kunt zien hoe eenvoudig het is om de weergave Onderste navigatie te implementeren met behulp van de bibliotheek voor ontwerpondersteuning. Veel apps maken al gebruik van de ontwerpondersteuningsbibliotheek, dus het verwijderen van de behoefte aan externe bibliotheken is erg handig Als je vragen hebt over de onderste navigatieweergave, laat dan een reactie achter of stuur me een tweet!

Bekijk enkele van mijn andere projecten op hitherejoe.com