BottomAppBar I: n käyttöönotto: Materiaalikomponentit Androidille

Yksi uusista Android-materiaalikomponenteista, jotka esitellään Google I / O 2018 -palvelussa, on BottomAppBar, joka on työkalupalkin laajennus. Uusi BottomAppBar on sijoitettu sovellusikkunan alaosaan, toisin kuin työkalupalkki, joka sijaitsee sovellusikkunan yläosassa. Tämän paradigmamuutoksen myötä Material Design -tiimi odottaa uutta käyttökokemusta. Käyttäjä voi käyttää BottomAppBar-sovellusta helpommin kuin tavallinen työkalurivi. BottomAppBar ehdottaa navigointilaatikon ohjausta ja toimintavalikkoa sovelluksen pohjalle tuoreen uuden suunnittelun Android-sovelluksille.

Yhdessä BottomAppBar -sovelluksen kanssa myös kelluvien toimintonäppien (FAB) sijoittelu on muuttumassa. Uudessa mallissa FAB: t voidaan sijoittaa joko kiinnitetyiksi / telakoituiksi tangon johonkin loviin tai päällekkäin.

BottomAppBar ja FAB

Tämä artikkeli näyttää BottomAppBar-perusteiden toteuttamisen yhdessä uusien FAB-sijoitusvaihtoehtojen kanssa.

Asettaa

BottomAppBarin käyttäminen edellyttää alkuperäistä asennusta.

Tällä sivulla on yksityiskohtainen selitys siitä, kuinka sisällyttää materiaalikomponentit Android-projektiisi. Varmista, että käytät tätä opetusohjelmaa Android Studio 3.2: n tai uudemman kanssa (saatavana tällä hetkellä nimellä 3.2 Canary 15).

Seuraavassa on tarvittavat asennusvaiheet.

  1. Lisää Google Maven -varasto build.gradle-sovellukseen.
kaikki projektit {
    arkistot {
      jcenter ()
      maven {
        URL "https://maven.google.com"
      }
    }
  }

2. Sijoita materiaalikomponenttien riippuvuus build.gradle -sovellukseen. Muista, että materiaaliversio päivitetään säännöllisesti.

toteutus 'com.google.android.materiaali: materiaali: 1.0.0-alpha1'

3. Aseta compileSdkVersion ja targetSdkVersion uusimmalle Android P: lle kohdistavalle sovellusliittymäversiolle, joka on 28.

4. Varmista, että sovelluksesi perii Teema.Materiaalikomponentit-teeman, jotta BottomAppBar käyttäisi uusinta tyyliä. Vaihtoehtoisesti voit ilmoittaa BottomAppBar-tyylin widget-ilmoituksessa asettelu xml-tiedostossa seuraavasti.

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

täytäntöönpano

Voit sisällyttää BottomAppBar -sovelluksen seuraavalla tavalla. BottomAppBar on oltava CoordinatorLayout-ohjelman lapsi.

BottomAppBar

Voit kiinnittää kelluvan toimintapainikkeen (FAB) BottomAppBariin määrittämällä sovelluksessa olevan BottomAppBar-tunnuksen: FAB: n attribuutin layout_anchor. BottomAppBar voi kehittää FAB: n muotoisella taustalla tai FAB voi päällekkäin BottomAppBarin kanssa.

BottomAppBar telineellä FAB

BottomAppBar -määritteet

Seuraavassa taulukossa näkyvät BottomAppBar-määritteet.

backgroundTint on ominaisuus BottomAppBar-taustavärin asettamiseen.
fabAlignmentMode -attribuutti määrittää FAB: n sijainnin joko BottomAppBar: n keskellä tai päässä. Alla oleva kuvakaappaus näyttää FAB-kohdistuksen, kun fabAlignmentMode on asetettu loppumaan.
fabAlignmentMode: loppu
fabAttached -attribuutti on tarkoitettu FAB - BottomAppBar -liitetiedoston asettamiseen, ja se voidaan asettaa true tai false. Vaikka materiaalisuunnitteluohjeet eivät ehdota FAB: n sijoittamista alaosan sovelluspalkin ulkopuolelle, tämä vaihtoehto on silti käytettävissä. Alla oleva näyttökuva näyttää tilanteen, kun fabAttached-määritteen arvoksi on määritetty väärä.
fabAlignmentMode: end, fabAttached: false
fabCradleDiameter määrittää FAB: n sisältävän telineen halkaisijan.
fabCradleRoundedCornerRadius määrittelee kulmakäyrän säteen kehto- ja vaakaosan BottomAppBar-kohtauspisteessä.
fabCradleVerticalOffset määrittelee telineen siirron alhaalta.

Tässä on koko asettelu xml-tiedosto, jota käytetään yllä olevissa esimerkeissä.




    

    

        


        

    

Olemme keskustelleet uuden Android-materiaalikomponentin - BottomAppBar - perusteista sekä uusista FAB-ominaisuuksista. BottomAppBar-widget itsessään ei ole monimutkainen käyttää, koska se laajentaa perinteistä työkalupalkkia, mutta sen mukana tulee dramaattinen sovelluksen suunnittelun muutoshinta.

Tämän BottomAppBar -sarjan II ja III osa käsittelee navigointilaatikoiden hallinta- ja toimintavalikkoa ja BottomAppBar-käyttäytymistä, jotka ovat materiaalisuunnitteluohjeiden mukaisia.

Voit vapaasti kysyä ja tehdä kommentteja. Voit myös seurata minua Twitterissä.