BottomAppBar I implementeren: materiaalcomponenten voor Android

Een van de nieuwe Android-materiaalcomponenten die worden geïntroduceerd in Google I / O 2018 is BottomAppBar, een uitbreiding van Toolbar. De nieuwe BottomAppBar wordt in tegenstelling tot de werkbalk aan de bovenkant van het app-venster onderaan het app-venster geplaatst. Met deze paradigmaverschuiving verwacht het Material Design-team een ​​nieuwe gebruikerservaring. Gebruikers hebben gemakkelijker toegang tot BottomAppBar vergeleken met de gewone werkbalk. BottomAppBar stelt navigatie-ladebesturing en actiemenu onder aan een app en suggereert een nieuw ontwerp voor Android-apps.

Samen met BottomAppBar is ook de plaatsing van de Floating Action Button (FAB) veranderd. Met het nieuwe ontwerp kunnen FAB's worden geplaatst als geplaatst in een inkeping van de balk of als overlappende balk.

BottomAppBar met FAB

Dit artikel toont de implementatie van de basisprincipes van BottomAppBar samen met de nieuwe FAB-plaatsingsopties.

Opzetten

Om BottomAppBar te gebruiken, is een eerste installatie vereist.

Voor een gedetailleerde uitleg over het opnemen van materiaalcomponenten voor uw Android-project kunt u deze pagina bezoeken. Zorg ervoor dat u voor deze zelfstudie Android Studio 3.2 of hoger gebruikt (momenteel beschikbaar als 3.2 Canary 15).

Hierna volgen de nodige installatiestappen.

  1. Neem Google Maven-repository op in build.gradle.
alle projecten {
    repositories {
      jcenter ()
      maven {
        url "https://maven.google.com"
      }
    }
  }

2. Plaats afhankelijkheid van materiaalcomponenten in uw build.gradle. Houd er rekening mee dat de materiële versie regelmatig wordt bijgewerkt.

implementatie 'com.google.android.material: material: 1.0.0-alpha1'

3. Stel compileSdkVersion en targetSdkVersion in op de nieuwste API-versie die Android P target en 28 is.

4. Zorg ervoor dat uw app Theme.MaterialComponents-thema overneemt om BottomAppBar de nieuwste stijl te laten gebruiken. Als alternatief kunt u de stijl voor BottomAppBar in widgetdeclaratie in het layout-XML-bestand als volgt declareren.

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

Implementatie

U kunt BottomAppBar als volgt in uw lay-out opnemen. BottomAppBar moet een kind zijn van CoordinatorLayout.

BottomAppBar

U kunt een zwevende actieknop (FAB) verankeren aan BottomAppBar door het ID van de BottomAppBar op te geven in app: layout_anchor-kenmerk van de FAB. BottomAppBar kan FAB ondersteunen met een gevormde achtergrond of FAB kan BottomAppBar overlappen.

BottomAppBar met een wiegende FAB

BottomAppBar Attributen

De onderstaande tabel toont attributen van BottomAppBar.

backgroundTint is het kenmerk voor het instellen van de achtergrondkleur van BottomAppBar.
Het kenmerk fabAlignmentMode bepaalt de positie van de FAB in het midden of aan het einde van BottomAppBar. Onderstaande screenshot toont FAB-uitlijning wanneer fabAlignmentMode is ingesteld om te eindigen.
fabAlignmentMode: end
fabAttached attribuut is voor het instellen van FAB - BottomAppBar bijlage en kan waar of onwaar worden ingesteld. Hoewel richtlijnen voor materiaalontwerp geen FAB-plaatsing buiten de onderste app-balk suggereren, is deze optie nog steeds beschikbaar. Onderstaande schermafbeelding toont de situatie wanneer het kenmerk fabAttached is ingesteld op false.
fabAlignmentMode: end, fabAttached: false
fabCradleDiameter specificeert de diameter van de houder die de FAB bevat.
fabCradleRoundedCornerRadius specificeert de straal van de hoekcurve op het ontmoetingspunt van de wieg en het horizontale deel van de BottomAppBar.
fabCradleVerticalOffset geeft de offset van de houder van onderaf aan.

Hier is het hele lay-out xml-bestand dat wordt gebruikt voor de bovenstaande voorbeelden.




    

    

        


        

    

We hebben de basisprincipes van de nieuwe Android-materiaalcomponent - BottomAppBar en de nieuwe FAB-functies besproken. De BottomAppBar-widget zelf is niet ingewikkeld om te gebruiken omdat hij de traditionele werkbalk uitbreidt, maar hij wordt geleverd met een dramatische prijs voor het wijzigen van het app-ontwerp.

Deel II en deel III van deze BottomAppBar-serie gaan over de bediening van het navigatie-ladebesturings- en actiemenu en de implementatie van BottomAppBar-gedrag conform de richtlijnen voor materiaalontwerp.

Stel gerust vragen en maak opmerkingen. Ook kun je me volgen op Twitter.