Illustration af Virginia Poltrack

Tegn en sti: gengivelse af Android VectorDrawables

I den foregående artikel kiggede vi på Android's VectorDrawable-format, hvor det gik ud på dets fordele og muligheder.

Vi dækkede hvordan du kan definere stier, der udgør figurerne i dine aktiver. VectorDrawable understøtter en række måder til faktisk at tegne disse former, som vi kan bruge til at skabe rige, fleksible, tema-stand og interaktive aktiver. I dette indlæg tænker jeg dybt på disse teknikker: ved hjælp af farveressourcer, temafarver, farvetilstandslister og gradueringer.

Enkle farver

Den enkleste måde at tegne en sti på er at specificere en hårdkodet udfyldnings- / stregfarve.

Du kan definere en eller begge af disse egenskaber, og kun en enkelt udfyldning / strejke kan anvendes pr. Sti (i modsætning til nogle grafikpakker). Udfyldninger trækkes først, derefter påføres ethvert slag. Streger er altid centreret (igen i modsætning til nogle grafikapps, der tillader indre eller ydre streger), kræver en slagbredde, der kan specificeres og kan valgfrit definere slagLineCap, strokeLineJoin-egenskaber, der styrer formen på enderne / sammenføjningerne af strøgne linjer (også slagMiterLimit for miterline slutter sig til). Stiplede streger understøttes ikke.

Både fylde og streger har separate alfaegenskaber: fillAlpha og strokeAlpha [0–1], som begge er standard til 1, dvs. fuldt uigennemsigtig. Hvis du specificerer en fillColor eller strokeColor med en alfakomponent, kombineres disse to værdier. For eksempel, hvis du specificerede en 50% transparent rød fillColor (# 80ff0000) og en 0.5 fillAlpha, ville resultatet være 25% transparent rød. De separate alfa-attributter gør det lettere at animere en steds opacitet.

Farveressourcer

Vektorer understøtter syntaks af @color-ressourcer til både udfyldnings- og stregfarver:

Dette giver dig mulighed for at udregne farver for lettere vedligeholdelse og hjælper dig med at begrænse din app til en ensartet palet.

Det giver dig også mulighed for at levere forskellige farveværdier i forskellige konfigurationer ved hjælp af Android's ressourcekvalifikatorer. For eksempel kan du angive alternative farveværdier i nattilstand (res / colours-night / colours.xml), eller hvis enheden understøtter brede farvespil (res / colours-widecg / colours.xml).

Temafarver

Alle versioner af vektorer (tilbage til API14 gennem AndroidX) understøtter brug af temaattributter (f.eks.? Attr / colorPrimary) til at specificere farver. Disse er farver leveret af et tema og viser sig yderst nyttige til at skabe fleksible aktiver, som du kan bruge forskellige steder i din app.

Der er to vigtigste måder at bruge temafarver på.

Temaudfyldninger / streger

Du kan direkte henvise til temafarver for at udfylde eller stryge stier:

Dette er nyttigt, hvis du har elementer i et aktiv, som du vil adskille, baseret på temaet. For eksempel kan en sportsapp tematisere et pladsholderbillede for at vise holdets farve; ved hjælp af en enkelt trækbar:

Udfyldning af en sti med en temafarve

toning

Roden -elementet tilbyder tint & tintMode-attributter:

Selvom du kunne bruge dette til at anvende en statisk farvetone, er dette meget mere nyttigt i kombination med temaattributter. Dette giver dig mulighed for at ændre farven på hele aktivet afhængigt af det tema, det er oppustet imod. For eksempel kan du farve ikonet ved hjælp af? Attr / colorControlNormal, der definerer standardfarven for ikoner og varierer mellem lyse og mørke temaer. På denne måde kan du bruge et enkelt ikon på tværs af forskellige skærme med tema:

Farvning af et ikon, så det er passende farvet på lyse / mørke skærme

En fordel ved at bruge farvetoner er, at du ikke er afhængig af, at kildekunstværket for dine aktiver (normalt fra din designer) er den rigtige farve. Anvendelse af en standardfarvetone som? Attr / colorControlNormal til ikoner giver dig både en tematik og garanterer, at aktiver er nøjagtigt den samme, korrekte farve.

TintMode-attributten giver dig mulighed for at ændre den blandingstilstand, der bruges til at farve tegnet, den understøtter: tilføje, formere, skærm, src_atop, src_over eller src_in; svarende til det tilsvarende PorterDuff.Mode. Standard src_in er normalt det, du ønsker, og behandler billedet som en alfamaske, der anvender den eneste farvetone på hele ikonet, idet man ignorerer alle farveoplysninger i de enkelte stier (selvom alfakanalen opretholdes). Af denne grund, hvis du planlægger at farve ikoner, er det bedst at bruge en fuldstændig uigennemsigtig fyld / strejkefarve (konvention er at bruge #fff).

Du spekulerer måske på, hvornår aktiverne skal tones, og hvornår man skal bruge temafarver på individuelle stier, da begge kan opnå lignende resultater? Hvis du kun vil bruge temafarver på kun nogle stier, skal du bruge dem direkte. En anden overvejelse kan være, hvis dit aktiv har nogen overlappende gengivelse. I så fald giver det muligvis ikke den effekt, du ønsker, men fyldning med en halv-uigennemsigtig temafarve, men påføring af en farve kan.

Aktiver med overlappende stier og semi-uigennemsigtige temafarver: sammenligning af ton og fyld

Bemærk, at du kan variere det tema, der bruges til at oppustes tegneligt enten på Aktivitets- / visningsniveauet ved at indstille attributtet Android: tema, eller i kode ved hjælp af en ContextThemeWrapper med et specifikt tema til at oppustere vektoren.

ColorStateLists

VectorDrawable understøtter henvisning til ColorStateLists for udfyldning / streger. På denne måde kan du oprette en enkelt tegning, hvor sti (r) ændrer farve afhængigt af visningen / tegnes tilstand (f.eks. Presset, valgt, aktiveret osv.).

Eksempler på vektorer, der reagerer på pressede og valgte tilstande

Dette blev introduceret i API24, men for nylig føjet til AndroidX, fra version 1.0.0, der bragte support tilbage til API14. Dette bruger også AndroidX ColorStateList-oppustningsapparatet, hvilket betyder, at du også kan bruge temaattributter og alfa i selve ColorStateList (som i sig selv kun blev føjet til platformen i API23).

Mens lignende resultater kunne opnås ved hjælp af flere trækbare tegn i en StateListDrawable, hvis gengivelsen afviger lidt mellem tilstande, reducerer dette dobbeltarbejde og kan være lettere at vedligeholde.

Jeg er også en stor fan af at oprette dine egne tilstande til tilpassede visninger, som kan kombineres med denne support til at kontrollere elementer inden for et aktiv, f.eks. at gøre stier gennemsigtige, medmindre der er indstillet en bestemt tilstand.

farveforløb

De 3 typer gradueringer understøttes

VectorDrawable understøtter lineære, radiale og feje (også kendt som kantede) gradueringer til både fyld og streger. Dette understøttes også tilbage til API14 via AndroidX. Forløb deklareres i deres egen fil i res / farver / men vi kan bruge inline ressource teknikken til i stedet at erklære gradienten inden for en vektor — hvilket kan være mere praktisk:

Ved byggetid udvindes gradienten til sin egen ressource, og en henvisning til den indsættes i overordnede element. Hvis du vil bruge den samme gradient flere gange, er det bedre at erklære det én gang og referere til det, som den inline version vil oprette en ny ressource hver gang.

Når du specificerer gradienter, er eventuelle koordinater i visningsområdet fra rodvektorelementet. Lad os se på hver type gradient og hvordan vi bruger dem.

Lineær

Lineære gradienter skal specificere start / slut X / Y-koordinater og type = "lineær".

Radial

Radiale gradienter skal specificere et center X / Y og en radius (igen i visningskoordinater) og type = "radial".

Feje

Sweep gradienter skal specificere bare et center X / Y og type = "feje".

Farvestop

Som bekvemmelighedsgradienter kan du specificere en startfarve, centerfarve og endefarve direkte i gradienten. Hvis du har brug for finere kornet kontrol eller flere farvestop, kan du også opnå dette ved at tilføje elementer til underordnede elementer, der specificerer en farve og en [0–1] forskydning (tænk på dette som en procentdel af vejen gennem gradienten).

Flisefunktioner

Lineære og radiale (men ikke fejede) gradueringer tilbyder et koncept med flisebelægning - det vil sige, hvis gradienten ikke dækker hele den sti, den fylder / strækker, hvad man skal gøre. Standard er klemme, som bare fortsætter start / slutfarverne. Alternativt kan du specificere gentagelses- eller spejlflisetilstande, som ... gør som deres navne antyder! I eksemplerne nedenfor defineres en radial gradient over den centrale blå → lilla cirkel, men udfylder den større firkantede sti.

Gradient flise tilstande

Mønstre

Vi kan kombinere ved hjælp af farvestop og flisemetoder for at opnå rudimentært mønsterunderstøttelse i vektorer. Hvis du f.eks. Specificerer sammenfaldende farvestop, kan du opnå pludselige farveændringer. Kombiner dette med en gentagen flisefunktion, og vi kan oprette stribet mønster. For eksempel er her en indlæsningsindikator lavet af en enkelt mønsterfyldt form. Ved at animere egenskaben translateX i gruppen, der holder dette mønster, kan vi opnå denne effekt:

Bemærk, at denne teknik er langt fra fuld understøttelse af SVG-mønster, men den kan være nyttig.

Illustrationer

En anden dejlig illustration af det meget talentfulde Virginia Poltrack

Forløb er ekstremt almindelige i større vektorkunst, som illustrationer. Vektorer kan passe godt til illustrationer, men vær opmærksom på hukommelsesudvekslingen, når du puster dem i store størrelser. Vi gennemgår dette senere i serien.

Skygger

VectorDrawables understøtter ikke drop skyggeeffekter; enkle skygger kan imidlertid tilnærmes ved hjælp af gradueringer. F.eks. Bruger dette appikon radiale gradienter til at tilnærme dråbe skyggen af ​​de hvide cirkler og en lineær gradient for skyggen under trekanten:

Tilnærmelsesvis skygger ved hjælp af gradient

Igen er dette langt fra fuld skyggeunderstøttelse, da kun lineære / radiale / fejeforløb kan trækkes og ikke langs en vilkårlig sti. Du kan omtrentlige nogle former; især ved at anvende transformationer til gradientelementer som dette eksempel, der bruger egenskaben skalaY til at transformere en cirkel med en radial gradient til en oval form for at skabe skyggen:

Transformering af en sti, der indeholder en gradient

Farve efter numre

Forhåbentlig har dette indlæg vist, at VectorDrawables understøtter en række avancerede funktioner, som du kan bruge til at gengive mere komplekse aktiver i din app eller endda erstatte flere aktiver med en enkelt fil, hvilket hjælper dig med at opbygge slankere apps.

Jeg vil foreslå, at alle apps skulle bruge tema farvetoner til ikoner. ColorStateList og gradient support er mere niche, men hvis du har brug for det, er det godt at vide, at vektorer understøtter disse brugssager.

Kompatibilitetshistorien med vektorer er god, så disse funktioner kan bruges i dag i de fleste apps (mere om dette i den næste rate).

Deltag i den næste del af vores eventyr i vektorland:

Kommer snart: Opretter vektoraktiver til Android
Kommer snart: Profilering af Android VectorDrawables