Verkennen van de v28 Android Design Support Library-toevoegingen

Versie 28 van de Android-ondersteuningsbibliotheek is onlangs aangekondigd - binnen de huidige alfaversie is er een verzameling opwindende nieuwe componenten waartoe we nu toegang hebben. In dit artikel wil ik de toevoegingen bekijken die zijn toegevoegd aan de ondersteuningsbibliotheek in de vorm van materiaalweergavecomponenten.

Materiële knop

De materiaalknop is een widget die kan worden gebruikt om een ​​materiaalstijlknop weer te geven in de gebruikersinterface van uw toepassing. Deze klasse strekt zich uit van de klasse AppCompatButton die u waarschijnlijk al in uw projecten gebruikt, maar wat maakt dit anders? Uit de doos krijgt deze knop het uiterlijk van een materiële aard zonder dat u hem zelf hoeft aan te passen met behulp van de stijlvlag. We kunnen de MaterialButton-klasse gebruiken zoals deze is en naar onze mening zal deze al het materiële uiterlijk hebben waarnaar we op zoek zijn - zie het als een gemaksklasse.

We kunnen deze knop als volgt aan ons lay-outbestand toevoegen:

Standaard gebruikt deze klasse de accentkleur van uw thema voor de achtergrondkleur met knoppen en wit voor de tekstkleur van de knop. Als de knop niet is gevuld, wordt de accentkleur van uw thema gebruikt voor de tekstkleur van de knop in plaats van een transparante achtergrond.

Als we hier zelf wat meer stijl aan willen toevoegen, kunnen we dat doen door een verzameling attributen uit de MaterialButton-stijl te gebruiken.

  • app: pictogram - Wordt gebruikt om een ​​teken te definiëren dat aan het begin van de knop moet worden weergegeven
  • app: iconTint - Wordt gebruikt om het gebruikte pictogram te kleuren vanuit het app: icon-kenmerk
  • app: iconTintMode - Bepaalt de modus die moet worden gebruikt voor de pictogramtint
  • app: iconPadding - Opvulling die moet worden toegepast op het pictogram dat wordt gebruikt vanuit het app: icon-kenmerk
  • app: extraPaddingLeftForIcon - Definieert de opvulling links van het pictogram dat wordt gebruikt vanuit de app: icon attribuut
  • app: extraPaddingRightForIcon - Definieert de opvulling die rechts van het gebruikte pictogram moet worden toegepast vanuit de app: icon attribuut
  • app: rippleColor - De kleur die moet worden gebruikt voor het knoprimpeleffect, deze kleur wordt gebruikt
  • app: backgroundTint - Gebruikt om een ​​tint toe te passen op de achtergrond van de knop. Als u de achtergrondkleur van de knop wilt wijzigen, gebruikt u dit kenmerk in plaats van de achtergrond om te voorkomen dat de knopstijl wordt verbroken
  • app: backgroundTintMode - Wordt gebruikt om de modus te definiëren die moet worden gebruikt voor de achtergrondtint
  • app: strokeColor - De kleur die moet worden gebruikt voor de knopstreek
  • app: strokeWidth - De breedte die moet worden gebruikt voor de knopstreek
  • app: cornerRadius - Wordt gebruikt om de straal te definiëren die wordt gebruikt voor de hoeken van de knop

spaander

Met de chipcomponent kunnen we een chipweergave in onze lay-out weergeven. Dit is in wezen tekst die een afgeronde achtergrond krijgt - het doel hiervan is om een ​​vorm van tekstuele verzameling aan de gebruiker weer te geven die al dan niet selecteerbaar is. Deze kunnen bijvoorbeeld worden gebruikt om een ​​lijst met selecteerbare suggesties aan de gebruiker te tonen op basis van de huidige context in uw app.

We kunnen zo een chip aan onze lay-out toevoegen, met behulp van het kenmerk app: chipText om de tekst in te stellen die op de chip moet worden weergegeven:

Er is ook een verzameling andere attributen die kunnen worden gebruikt om de chip verder te stijlen:

  • app: controleerbaar - Wordt gebruikt om aan te geven of de chip kan worden geschakeld als geselecteerd / niet geselecteerd. Indien uitgeschakeld, gedraagt ​​de controle zich op dezelfde manier als een knop
  • app: chipIcon - Wordt gebruikt om een ​​pictogram binnen de chip weer te geven
  • app: closeIcon - Wordt gebruikt om een ​​sluitpictogram binnen de chip weer te geven

We kunnen ook enkele luisteraars instellen op onze chipinstanties, deze kunnen handig zijn om te luisteren naar interacties van onze gebruikers. Als onze chip kan worden gecontroleerd, is het waarschijnlijk dat we willen luisteren wanneer deze controlestatus is gewijzigd. We kunnen dit doen met behulp van de luisteraar setOnCheckedChangeListener:

some_chip.setOnCheckedChangeListener {button, aangevinkt ->}

Hetzelfde geldt voor wanneer we willen luisteren naar interactie met het pictogram Sluiten wanneer het in gebruik is. Hiervoor kunnen we de functie setOnCloseIconClickListener gebruiken om te registreren voor gebeurtenissen met nauwe interactie:

some_chip.setOnCloseIconClickListener {}

Chipgroep

Als we een verzameling chips aan onze gebruikers tonen, willen we ervoor zorgen dat ze correct zijn gegroepeerd in onze weergave. Hiervoor kunnen we gebruik maken van de weergavecomponent ChipGroup:

Als we de ChipGroup willen gebruiken, moeten we onze Chip-views gewoon in een bovenliggende ChipGroup-component verpakken:



    

    

    // meer chips ...

Standaard kunnen uw Chipweergaven een beetje krap bij elkaar lijken. Als dit het geval is, kunt u wat ruimte toevoegen aan de onderliggende weergaven met behulp van de volgende attributen op de chipgroep zelf:

  • app: chipSpacing - voegt afstand toe aan zowel de horizontale als verticale as
  • app: chipSpacingHorizontal - Voegt afstand toe aan de horizontale as
  • app: chipSpacingVertical - voegt afstand toe aan de verticale as

We kunnen ook aangeven dat onze onderliggende Chip-weergaven binnen een enkele regel in onze ChipGroup-container worden weergegeven. Met behulp van de app: singleLine-kenmerk:

Wanneer u dit doet, moet u de ChipGroup in een scrollende weergave zoals de HorizontalScrollView wikkelen, zodat uw gebruikers door de weergegeven chips kunnen bladeren:



    

        

        // meer chips ...
    

Materiaal kaartweergave

Het is waarschijnlijk dat we in onze apps ooit het CardView-onderdeel hebben gebruikt. De ondersteuningsbibliotheek bevat nu een component met de naam Materiaalkaartweergave, die ons direct uit de doos een materiaalgestuurde kaartweergave-implementatie biedt.

De kaartweergave kan als volgt aan uw lay-out worden toegevoegd:

    ... kind bekeken ...

U kunt de kaartweergave verder opmaken met behulp van twee attributen:

  • app: strokeColor - De kleur die moet worden gebruikt voor de gegeven streek, deze moet worden ingesteld om een ​​streek weer te geven
  • app: strokeWidth - De breedte die moet worden toegepast op de lijn van de weergave

Naast deze twee attributen, kunt u de kaartweergave nog steeds opmaken met de oorspronkelijk beschikbare attributen zoals app: cardBackgroundColor etc.

Onderste app-balk

De onderste app-balk is een nieuw onderdeel waarmee we een werkbalkachtig onderdeel onderaan onze lay-out kunnen weergeven. Dit stelt ons in staat om componenten aan onze gebruiker weer te geven op een manier waardoor ze gemakkelijker te gebruiken zijn dan een standaard werkbalk.

U kunt de BottomAppBar als volgt aan uw lay-outbestand toevoegen:

Het lijkt alsof er een menu aan de onderste app-balk moet zijn toegewezen om op het scherm te worden weergegeven. Dit kan zo op een programmering worden gedaan:

bottom_app_bar.replaceMenu (R.menu.main)

Als het gaat om het stylen van de onderste app-balk, zijn er verschillende attributen waar je hiervoor gebruik van kunt maken.

  • app: fabAttached - Geeft aan of er een FAB is bevestigd aan de onderste app-balk. U kunt een fab koppelen met app: layout_anchor op het FAB-onderdeel dat u wilt koppelen, met behulp van de ID van de onderste app-balk. Als een FAB is aangesloten, wordt deze in de onderste app-balk ingevoegd, anders blijft de FAB boven de onderste app-balk.
  • app: fabAlignmentMode - Declareert de positie van de FAB die is bevestigd aan de onderste app-balk. Dit kan elk einde zijn:

of midden:

  • app: fabCradleVerticalOffset - Verklaart de verticale offset die moet worden gebruikt voor de bijgevoegde fab. Standaard is dit 0dp:

Als u een dp-waarde instelt, kan de FAB echter verticaal omhoog schuiven:

  • app: backgroundTint - Gebruikt om een ​​tint toe te passen op de achtergrond van de weergave. Als u de achtergrondkleur van de weergave wilt instellen, moet deze worden gebruikt via het kenmerk android: background. Als u dit doet, blijft het thema van het beeld stabiel.

Gevolgtrekking

Naar mijn mening zijn dit enkele nette toevoegingen aan de ondersteuningsbibliotheek - ik kijk er naar uit om direct uit de doos componenten met materiaalthema te kunnen gebruiken. Ik ben ook enthousiast om een ​​use case te vinden voor waar de onderste app-balk kan worden gebruikt, maar ik weet zeker dat het enige tijd duurt voordat de ondersteuningsbibliotheekversie stabiel is voordat dit gebeurt. Zoals gewoonlijk hoor ik graag je mening of opmerkingen over deze nieuwe componenten!