BottomAppBar III implementeren: gedrag voor Android

Een van de nieuwe Android-materiaalcomponenten die wordt geïntroduceerd in Google I / O 2018 is BottomAppBar. BottomAppBar verplaatst de navigatie-ladebesturing en het actiemenu naar de onderkant van het app-scherm en geeft een frisse nieuwe look aan Android-apps.

In de eerste twee delen van onze BottomAppBar-serie hebben we BottomAppBar geïntroduceerd en de kenmerken ervan besproken. We hebben ook uitgelegd hoe u de bediening van de navigatielade en het actiemenu kunt gebruiken met BottomAppBar. Als je ze nog niet hebt gelezen, kun je de eerste twee delen van deze serie hieronder vinden.

Eén ding is zeker: componenten zijn niet statisch in een app. Ze kunnen een actie verplaatsen, transformeren of activeren, d.w.z. ze hebben gedrag. Material Design wil ook een kader vormen voor dit gedrag. In dit artikel bespreken we de implementatiedetails van de suggesties voor gedrag voor BottomAppBar die worden gepresenteerd op de pagina met materiaalrichtlijnen van BottomAppBar.

BottomAppBar-indeling voor secundaire schermen

Gedrag

lay-out

Eerste gedragsrichtlijn heeft betrekking op de lay-out van BottomAppBar. Hier is wat wordt voorgesteld:

Om de bedoeling van verschillende delen van een app te ondersteunen, kunnen de lay-out en acties van een onderste app-balk worden aangepast aan elk scherm.
Schermen kunnen bijvoorbeeld meer of minder acties weergeven op basis van wat het beste bij de scherminhoud past.
Richtlijn voor lay-outgedrag voor BottomAppBar

Op basis van deze richtlijn wordt voorgesteld om een ​​BottomAppBar-lay-out te gebruiken met enkele acties in het actiemenu met een gecentreerde FAB in primaire schermen. In secundaire schermen die worden geactiveerd door de primaire schermen, moet de BottomAppBar-lay-out bestaan ​​uit een eind-FAB en enkele aanvullende actiemenu-items. De layoutovergangen van deze twee gevallen moeten op de juiste manier worden behandeld. De gif links is een demonstratie van deze richtlijnen.

Laten we eens kijken hoe we dit gedrag hebben geïmplementeerd. We hebben twee xml-bestanden onder res / menu voor het actiemenu van elk scherm.

Wanneer de schermovergang wordt geactiveerd, bijv. In ons geval wordt geklikt op de TOGGLE SCREEN-knop, moet de BottomAppBar-lay-out inclusief actiemenu en de FAB veranderen. Hier is de basiscode voor het lay-outgedrag van BottomAppBar, gaande van het primaire scherm naar het secundaire scherm.

// Pictogram navigatielade verbergen
bottom_app_bar.navigationIcon = null
// Verplaats FAB van het midden van BottomAppBar naar het einde ervan
bottom_app_bar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END
// Vervang het actiemenu
bottom_app_bar.replaceMenu (bottomappbar_menu_secondary)
// Wijzig FAB-pictogram
fab? .setImageDrawable (baseline_reply_white_24)

Als u de overgangen met animatie wilt maken, is extra code vereist. U kunt de broncode die aan het einde van dit bericht is gekoppeld, bekijken voor de verbeteringen.

scrollen

Scrollen is een belangrijke gedragstrigger voor componenten zoals BottomAppBar. Op de pagina met richtlijnen voor materiaalontwerp wordt het voorgestelde gedrag voor dit geval vermeld als:

Na het scrollen kan de onderste app-balk verschijnen of verdwijnen:
Naar beneden scrollen verbergt de onderste app-balk. Als er een FAB aanwezig is, wordt deze losgemaakt van de balk en blijft deze op het scherm staan.
Naar boven scrollen onthult de onderste app-balk en wordt opnieuw bevestigd aan een FAB als er een aanwezig is.

Hieronder vindt u de demonstratie samen met de implementatie voor verbergen op schuifgedrag van BottomAppBar.

BottomAppBar verbergen bij schuifgedrag

Om dit gedrag in te schakelen, moeten BottomAppBar en de FAB directe onderliggende items van CoordinatorLayout zijn in het lay-outbestand. Vervolgens schakelen we hideOnScroll in en stellen we scrollvlaggen in voor BottomAppBar als volgt.

Dat is voldoende voor het verbergen van het schuifgedrag voor BottomAppBar.

Verhoging

Elk onderdeel in de wereld van Material Design heeft een hoogte analoog aan onze fysieke wereld. BottomAppBar heeft een hoogte van 8dp waarbij de inhoud 0dp heeft en FAB in rusttoestand 12dp heeft. Twee componenten die we in dit artikel zullen noemen, die Bottom Navigation Drawer en Snackbar zijn, hebben een hoogte van respectievelijk 16dp en 6dp.

Normaal gesproken is een snackbar een component om de gebruiker op de hoogte te brengen vanaf de onderkant van het scherm. Als het scherm echter BottomAppBar of Bottom Navigation Bar heeft, zou het snackbargedrag moeten veranderen. In deze gevallen moet Snackbar boven de onderste componenten worden weergegeven, bijvoorbeeld BottomAppBar. Hier is een demonstratie en de bijbehorende code voor de implementatie.

Snackbar met BottomAppBar

Zoals we al zeiden, heeft Navigation Drawer een hoogte van 16dp, wat betekent - met de eigen woorden van de richtlijn -

“Menu's die worden gegenereerd door de onderste app-balk (zoals een onderste navigatielade of overloopmenu) openen als onderste bladen op een grotere hoogte dan de balk. “

Hieronder is onze implementatie van de onderste navigatielade.

Gedrag van de onderste navigatielade

De onderste navigatielade zelf is een modaal onderblad en volgt dezelfde implementatieregels.

De implementatiedetails voor dit gedrag zijn als volgt. Een xml-menubestand voor Navigatieweergave dat in de lade wordt opgenomen, moet worden gemaakt onder res / menu.

Er moet een lay-outbestand voor het onderste fragment van de navigatielade worden gemaakt.

Dit lay-outbestand bevat de navigatieweergave en de andere componenten die de lay-out voor de navigatielade vormen. Om deze lay-out op te blazen, hebben we een fragmentklasse nodig die BottomSheetDialogFragment uitbreidt, zoals hieronder aangegeven.

Wanneer op het besturingspictogram van de navigatielade wordt geklikt, moet een exemplaar van dit fragment worden gemaakt en weergegeven zoals aangegeven in de onderstaande code.

Wanneer op het bedieningspictogram van de navigatielade wordt geklikt, wordt het menu van de onderste navigatielade geopend als Modal Bottom Sheet.

Hiermee is onze BottomAppBar-artikelenreeks afgesloten. U kunt de broncode voor dit artikel vinden op Github. Voel je vrij om opmerkingen te maken en vragen te stellen.