Udforskning af v28 Android Design Support Library-tilføjelser

Version 28 af Android-supportbiblioteket blev for nylig annonceret - inden for den nuværende alpha-version er der en samling spændende nye komponenter, som vi nu har adgang til. I denne artikel vil jeg se på de tilføjelser, der er foretaget til Support-biblioteket i form af materialevisningskomponenter.

Materiale knap

Materiale-knappen er en widget, der kan bruges til at vise en materiale-stilknap i din applikations brugergrænseflade. Denne klasse strækker sig fra klassen AppCompatButton, som du sandsynligvis allerede bruger i dine projekter, men hvad gør dette anderledes? Uden for kassen vil denne knap blive stylet med udseendet og fornemmelsen af ​​en materiel karakter uden behov for at tilpasse den selv ved hjælp af stilflagget. Vi kan bruge klassen MaterialButton, som den er, og inden for vores opfattelse vil den allerede have det materielle udseende og følelse, som vi er ude efter - se det som en praktisk klasse.

Vi kan tilføje denne knap til vores layoutfil sådan:

Som standard bruger denne klasse accentfarven på dit tema til de knapper, der er fyldt baggrundsfarve sammen med hvidt til knappernes tekstfarve. Hvis knappen ikke er udfyldt, bruges accentfarven på dit tema til knaptekstfarve i stedet sammen med en gennemsigtig baggrund.

Hvis vi selv ønsker at tilføje yderligere styling til dette, kan vi gøre det ved at bruge en samling attributter fra MaterialButton-stilen.

  • app: ikon - Bruges til at definere et tegneligt tegn, der skal vises ved starten af ​​knappen
  • app: iconTint - Bruges til at farve ikonet, der bruges fra app: ikonattributten
  • app: iconTintMode - Definerer den tilstand, der skal bruges til ikonfarvet
  • app: iconPadding - Polstring, der skal anvendes på ikonet, der bruges fra app: icon-attributten
  • app: extraPaddingLeftForIcon - Definerer den polstring, der skal anvendes til venstre for ikonet, der bruges fra app: ikonattributten
  • app: extraPaddingRightForIcon - Definerer den polstring, der skal anvendes til højre for det ikon, der bruges fra app: icon-attribut
  • app: rippleColor - Den farve, der skal bruges til knappen ripple-effekt, denne farve vil blive brugt
  • app: backgroundTint - Bruges til at anvende en farvetone på baggrunden af ​​knappen. Hvis du vil ændre knappens baggrundsfarve, skal du bruge denne attribut i stedet for baggrund for at undgå at bryde knapstilen
  • app: backgroundTintMode - Bruges til at definere den tilstand, der skal bruges til baggrundsfarven
  • app: strokeColor - Farven, der skal bruges til knapslaget
  • app: slagbredde - bredden, der skal bruges til knapslaget
  • app: cornerRadius - Bruges til at definere den radius, der bruges til hjørnerne af knappen

Chip

Chipkomponenten giver os mulighed for at vise en chipvisning inden for vores layout. Dette er i det væsentlige noget tekst, der får en afrundet baggrund - formålet med disse er at vise en form for tekstsamling til brugeren, der muligvis ikke kan vælges. For eksempel kunne disse bruges til at vise en liste med valgbare forslag til brugeren baseret på den aktuelle kontekst i din app.

Vi kan tilføje en chip til vores layout på den måde ved hjælp af appen: chipText-attributten til at indstille teksten, der skal vises på chippen:

Der er også en samling af andre attributter, der kan bruges til yderligere at style chippen:

  • app: kontrollerbar - Bruges til at erklære, om chippen kan skiftes som valgt / ikke valgt. Hvis den er deaktiveret, opfører kontrollen sig på samme måde som en knap
  • app: chipIcon - Bruges til at vise et ikon i chippen
  • app: closeIcon - Bruges til at vise et tæt ikon i chippen

Vi kan også indstille nogle lyttere på vores chip-instanser, disse kan være nyttige til at lytte til interaktion fra vores brugere. Hvis vores chip kan kontrolleres, er det sandsynligt, at vi vil lytte til, når denne kontroltilstand er ændret. Vi kan gøre det ved hjælp af sættetOnCheckedChangeListener lytteren:

some_chip.setOnCheckedChangeListener {knap, markeret ->}

Det samme gælder når vi vil lytte til interaktion med det lukke ikon, når det er i brug. Til dette kan vi bruge funktionen setOnCloseIconClickListener til at registrere til lukke interaktionshændelser:

some_chip.setOnCloseIconClickListener {}

Chip Group

Hvis vi viser en samling chips til vores brugere, ønsker vi at sikre, at de er korrekt grupperet i vores synspunkt. Til dette kan vi gøre brug af ChipGroup-visningskomponenten:

Hvis vi ønsker at bruge ChipGroup, skal vi bare pakke vores Chip-visninger i en overordnet ChipGroup-komponent:



    

    

    // flere chips ...

Som standard vises dine Chip-visninger lidt trange sammen. I så fald kan du tilføje en vis afstand til underordnede visninger ved at bruge følgende attributter i selve chipgruppen:

  • app: chipSpacing - Tilføjer afstand til både den vandrette og den lodrette akse
  • app: chipSpacingHorizontal - Tilføjer afstand til den vandrette akse
  • app: chipSpacingVertical - Tilføjer afstand til den lodrette akse

Vi kan også erklære, at vores barnechip-visninger skal vises inden for en enkelt linje inde i vores ChipGroup-container. Brug af appen: singleLine-attribut:

Når du gør det, bliver du nødt til at indpakke ChipGroup i en rullevisning, såsom HorizontalScrollView, så dine brugere kan rulle gennem de viste chips:



    

        

        // flere chips ...
    

Materiale kortvisning

Det er sandsynligvis inden for vores apps, at vi har brugt CardView-komponenten på et tidspunkt. Supportbiblioteket indeholder nu en komponent, der hedder Material Card View, som giver os en materialetilpasset cardview-implementering ud af boksen.

Kortvisningen kan føjes til dit layout på en sådan måde:

    ... udsigt til børn ...

Du kan yderligere style kortvisningen ved at bruge to af de attributter, der følger med:

  • app: strokeColor - Farven, der skal bruges til det givne slagtilfælde, dette skal indstilles for at få vist et strejke
  • app: strokeWidth - Bredden, der skal bruges til visningen

Ud over disse to attributter kan du stadig style kortvisningen ved hjælp af de oprindeligt tilgængelige attributter såsom app: cardBackgroundColor osv.

Nederste applinje

Den nederste appbjælke er en ny komponent, der giver os mulighed for at vise en værktøjslinjelignende komponent i bunden af ​​vores layout. Dette giver os mulighed for at vise komponenter til vores bruger på en måde, der gør dem lettere at interagere med, end en standard værktøjslinje måtte.

Du kan tilføje BottomAppBar til din layoutfil på en sådan måde:

Det ser ud til, at den nederste appbjælke skal have en menu tildelt den, for at den vises på skærmen. Dette kan gøres programmeret sådan:

bottom_app_bar.replaceMenu (R.menu.main)

Når det kommer til styling af den nederste appbjælke er der flere attributter, som du kan bruge til at gøre det.

  • app: fabAttached - Angiver, om der er knyttet en FAB til den nederste applinje. Du kan vedhæfte en fab ved hjælp af app: layout_anchor på den FAB-komponent, som du vil vedhæfte, ved hjælp af ID'et på den nederste appbjælke. Hvis der er knyttet en FAB, vil den blive indsat i den nederste appbjælke, ellers forbliver FAB over den nederste appbjælke.
  • app: fabAlignmentMode - Angiver placeringen af ​​FAB, der er knyttet til den nederste applinje. Dette kan være begge ender:

eller center:

  • app: fabCradleVerticalOffset - Angiver den lodrette forskydning, der skal bruges til den vedhæftede fab. Som standard er dette 0dp:

Indstilling af en dp-værdi tillader imidlertid, at FAB skifter lodret opad:

  • app: backgroundTint - Bruges til at anvende en farvetone på baggrunden for visningen. Hvis du ønsker at indstille baggrundsfarven på visningen, skal dette bruges over attributten Android: baggrund. Dette vil sikre, at udsigten er temmelig stabil.

Konklusion

Efter min mening er dette nogle pæne tilføjelser til supportbiblioteket - jeg ser frem til at være i stand til at bruge materialetema komponenter lige ud af kassen. Jeg er også glade for at finde en brugssag til, hvor den nederste appbjælke kan bruges, men jeg er sikker på, at der er nogen tid, før supportbibliotekversionen er stabil, inden du gør det. Som sædvanligt ville jeg meget gerne høre dine tanker eller kommentarer til disse nye komponenter!