Implementering af BottomAppBar I: Materiale komponenter til Android

En af de nye Android Material Components, der er introduceret i Google I / O 2018, er BottomAppBar, som er en udvidelse af Toolbar. Den nye BottomAppBar placeres i bunden af ​​appvinduet i modsætning til værktøjslinjen, der er placeret øverst på appvinduet. Med dette paradigmeskift forventer Material Design-teamet en ny brugeroplevelse. Bruger kan lettere få adgang til BottomAppBar sammenlignet med den almindelige værktøjslinje. Bringer navigationskuffekontrol og handlingsmenu til bunden af ​​en app, BottomAppBar foreslår et nyt nyt design til Android-apps.

Sammen med BottomAppBar har placering af Floating Action Button (FAB) også ændret sig. Med det nye design kan FAB'er placeres som enten at blive vugget / forankret i et eller andet hak af søjlen eller overlapper søjlen.

BundAppBar med FAB

Denne artikel viser implementeringen af ​​det grundlæggende i BottomAppBar sammen med de nye FAB-placeringsmuligheder.

Sætte op

For at bruge BottomAppBar kræves en indledende opsætning.

For en detaljeret forklaring af, hvordan du inkluderer mediekomponenter til dit Android-projekt, kan du besøge denne side. For denne tutorial skal du sikre dig, at du bruger Android Studio 3.2 eller nyere (i øjeblikket tilgængelig som 3.2 Canary 15).

Følgende er de nødvendige opsætningstrin.

  1. Inkluder Google Maven-arkivet i build.gradle.
alle projekter {
    depoter {
      JCenter ()
      maven {
        url "https://maven.google.com"
      }
    }
  }

2. Placer afhængighed af materialekomponenter i din build.gradle. Husk, at den materielle version regelmæssigt opdateres.

implementering 'com.google.android.material: materiale: 1.0.0-alpha1'

3. Indstil compileSdkVersion og targetSdkVersion til den nyeste API-version, der målretter Android P, som er 28.

4. Sørg for, at din app arver Theme.MaterialComponents-tema for at få BottomAppBar til at bruge den nyeste stil. Alternativt kan du erklære stilen til BottomAppBar i widget-erklæring i layout-xml-filen som følger.

style =”@ stil / Widget.MaterialComponents.BottomAppBar”

Implementering

Du kan inkludere BottomAppBar i dit layout som følger. BottomAppBar skal være et barn af CoordinatorLayout.

BottomAppBar

Du kan forankre en flydende handlingsknap (FAB) til BottomAppBar ved at specificere id'et for BottomAppBar i app: layout_anchor attribut for FAB. BottomAppBar kan vugge FAB med en formet baggrund, eller FAB kan overlappe BottomAppBar.

BundAppBar med en vippet FAB

BottomAppBar Attributter

Tabel nedenunder viser BottomAppBar-attributter.

backgroundTint er attributten til at indstille BottomAppBar-baggrundsfarve.
fabAlignmentMode-attribut bestemmer FAB's position enten i midten eller i slutningen af ​​BottomAppBar. Nedenfor skærmbillede viser FAB-justering, når fabAlignmentMode er indstillet til at afslutte.
fabAlignmentMode: slut
fabAttached-attribut er til indstilling af FAB - BottomAppBar-vedhæftning og kan indstilles sandt eller forkert. Selvom retningslinjer for materialedesign ikke antyder FAB-placering uden for den nederste appbjælke, er denne mulighed stadig tilgængelig. Skærmbillede nedenfor viser situationen, når fabAttached-attribut er indstillet til usand.
fabAlignmentMode: slut, fabAttached: false
fabCradleDiameter specificerer diameteren på holderen, der indeholder FAB.
fabCradleRoundedCornerRadius specificerer radien for hjørnekurven på mødestedet for holderen og den vandrette del af bundenAppBar.
fabCradleVerticalOffset specificerer forskydningen af ​​holderen fra bunden.

Her er hele layout-xml-filen, der bruges til eksemplerne ovenfor.




    

    

        


        

    

Vi har diskuteret det grundlæggende i den nye Android Material Component - BottomAppBar såvel som de nye FAB-funktioner. Selve BottomAppBar-widgeten er ikke kompliceret at bruge, da den udvider den traditionelle værktøjslinje, men den leveres med en dramatisk ændring af app-designprisen.

Del II og Del III i denne BottomAppBar-serie handler om håndtering af navigationsskuffekontrol og -handlingsmenu og implementering af BottomAppBar-opførsel, der er i overensstemmelse med retningslinjerne for materialedesign.

Stil gerne spørgsmål og fremsætte kommentarer. Du kan også følge mig på Twitter.