Udforskning af Android Design Support Library: Bundnavigationsvisning

Det er et stykke tid siden jeg skrev om Android Design Support Library og jeg var super begejstret over at vågne op i morges for at opdage, at bundnavigationsvisningen er føjet til version 25 af Design Support Library!

Den nederste navigationsvisning har været i retningslinjerne for materialedesign i nogen tid, men det har ikke været let for os at implementere det i vores apps. Nogle applikationer har bygget deres egne løsninger, mens andre har været afhængige af tredjeparts open source-biblioteker for at få jobbet gjort. Nu ser biblioteket for designstøttelse tilføjelsen af ​​denne nederste navigationslinje, lad os tage et dykke ned i, hvordan vi kan bruge det!

Jeg lavede en rigtig enkel prøve-app, den er slut på github, hvis du vil tjekke den ud.

Føjelse af den nederste navigationsvisning til dit layout

Til at begynde med er vi nødt til at opdatere vores afhængighed!

kompiler 'com.android.support:design:25.0.0'

Dernæst skal vi blot tilføje widgetten til nederste navigationsvisning til vores ønskede layoutfil. Husk, at dette skal være på linje med bunden af ​​skærmen med alt indhold vist over det. Vi kan tilføje denne visning sådan:

Du vil bemærke, at widgetten har et par attributter indstillet på den. Vi kan bruge disse til at indstille menupunkter, vi ønsker at vise, og de farver, der skal bruges i bunden Navigationsvisning:

  • app: itemBackground - Baggrundsfarven, der skal bruges til den nederste navigationsmenu
  • app: itemIconTint - Den farvetone, der skal bruges til ikonerne i den nederste navigationsmenu
  • app: itemTextColor - Farven der skal bruges til teksten i den nederste navigationsmenu
  • app: menu - Menuressourcen, der skal bruges til at vise emner i den nederste navigationsmenu

Vi kan også indstille disse værdier programatisk ved at bruge følgende metoder i vores BottomNavigationView-forekomst:

  • inflateMenu (int menuResource) - Oppust en menu til den nederste navigationsvisning ved hjælp af en menurressourceidentifikator.
  • setItemBackgroundResource (int backgroundResource) - baggrunden, der skal bruges til menupunkterne.
  • setItemTextColor (ColorStateList colorStateList) - En ColorStateList, der bruges til at farve teksten, der bruges til menupunkterne
  • setItemIconTintList (ColorStateList colorStateList) - En ColorStateList, der bruges til at farve de ikoner, der bruges til menupunkterne

Hvis du føjer dette til din app og kører det på din enhed, ser du en skinnende ny, nederste navigationsvisning som nedenfor:

Opret en menu, der skal vises

Så vi refererede til en menu i det foregående afsnit, men hvordan ser det ud? Nå, det ser nøjagtigt ud som enhver anden menu, som vi ville bruge i vores app!

Det er vigtigt at bemærke, at det maksimale antal elementer, vi kan vise, er 5. Dette kan ændres på ethvert tidspunkt, så det er vigtigt at kontrollere dette ved at bruge getMaxItem () -metoden, der leveres af klassen BottomNavigationView, i stedet for at hardkode værdien selv.

Håndtering af aktiverede / deaktiverede tilstande

Ved hjælp af BottomNavigationView kan vi nemt håndtere visningen af ​​både aktiverede og deaktiverede menupunkter. For at få visningen til at håndtere disse sager behøver vi blot at foretage to ændringer:

  • Først skal vi oprette en valgfil til vores aktiverede / deaktiverede farver. Hvis du ikke har brugt en af ​​disse før, giver det os i det væsentlige mulighed for at definere udseendet og følelsen baseret på en vares tilstand.
  • Derefter skal vi

Deaktiverede og aktiverede tilstande vises derefter, hvilket afspejler det angivne udseende og følelse fra valgfilen:

Lyt til klikbegivenheder

Nu har vi implementeret vores menu, som vi har brug for for at kunne reagere, når den interageres med. Vi kan bruge metoden BottomNavigationView setOnNavigationItemSelectedListener () til at indstille en lytter til menupunktbegivenheder:

Når vi modtager klikbegivenheder for varerne, kan vi blot reagere i overensstemmelse hermed. I min prøve ændrer jeg simpelthen det aktuelt valgte visningssidesider, der vises på skærmen.

Og det er det!

Ser ikke ud til, at det overhovedet gør meget - jeg håber, du nu kan se, hvor lige det er at implementere visningen til bundnavigation ved hjælp af designstøttebiblioteket. En masse apps bruger allerede designstøttebiblioteket, så det er temmelig praktisk at fjerne behovet for tredjepartsbiblioteker Hvis du har spørgsmål til bundnavigationsvisningen, så lad et svar stå, eller slip mig en tweet!

Tjek nogle af mine andre projekter på hitherejoe.com