Ilustracija Virginia Poltrack

Razumijevanje Androidovog oblika vektorske slike: VectorDravable

Android uređaji dolaze u svim veličinama, oblicima i gustoći zaslona. Zato sam veliki obožavatelj upotrebe vektorskih sredstava neovisnih o razlučivosti. Ali što su točno oni? Koje su njihove prednosti? Koliki su troškovi? Kada ih treba koristiti? Kako ih stvarate i koristite? U ovom nizu postova želio bih istražiti ta pitanja i objasniti zašto mislim da bi velika većina imovine u vašim aplikacijama trebala biti vektori i kako ih najbolje iskoristiti.

Raster vs vektor

Većina formata slike (png, jpeg, bmp, gif, webp itd.) Su rasterski, što znači da opisuju sliku kao fiksnu mrežu piksela. Kao takve definirane su pri određenoj rezoluciji i ne razumiju ništa u njihovom sadržaju, samo boju svakog piksela. Vektorska grafika međutim opisuje sliku kao niz oblika definiranih preko veličine apstraktnog platna.

Zašto vektor?

Vektorska imovina ima 3 glavne prednosti, a to su:

  • Oštar
  • Mali
  • Dinamičan

Oštar

Vektorske slike mijenjaju veličinu slike; jer opisuju sliku preko apstraktne veličine platna, možete to skalirati prema gore ili dolje i zatim crtati sliku u toj veličini. Međutim, rasterska imovina može se pokvariti ako im promijenite veličinu. Smanjivanje rasterske imovine obično je u redu (kao što odbacujete podatke), ali njihovo povećavanje dovodi do artefakata poput nejasnosti ili povezivanja, jer oni moraju interpolirati nedostajuće piksele.

Artefakti iz (ekstremnog) povećanja rasterske slike (lijevo) vs vektorske slike (desno)

Zbog toga na Androidu moramo pružiti više verzija svakog rasterskog elementa za ekrane različite gustoće:

  • res / crtanja-mdpi / foo.png
  • res / crtanja-hdpi / foo.png
  • res / crtanja-xhdpi / foo.png
  • ...

Android odabire najbližu veću gustoću i smanjuje ga (ako treba). S trendom za uređaje s ekranima veće gustoće, proizvođači aplikacija moraju nastaviti stvarati, uključujući i isporučivati ​​sve veće verzije istog materijala. Imajte na umu da mnogi moderni uređaji ne sjede na kantama s točno određenom gustoćom (npr. Pixel 3 XL je 552dpi, negdje između xxhdpi i xxxhdpi) pa će se imovina često mijenjati.

Budući da vektorska imovina mijenja veličinu, možete uključiti pojedinačni materijal, siguran u znanje da će raditi na bilo kojoj gustoći zaslona.

Mali

Vektorska sredstva općenito su * kompaktnija od rasterskih elemenata i zato što trebate uključiti samo jednu verziju i zato što se dobro komprimiraju.

Na primjer, ovdje je promjena od Google I / O aplikacije u kojoj smo prebacili brojne ikone s rastinskih PNG-ova na vektore i uštedjeli 482KB. Iako ovo možda ne zvuči previše, ovo je bila samo za malu ikonografiju; veće slike (poput ilustracija) imale bi veće uštede.

Ta ilustracija, na primjer, primjerice iz protoka ukrcaja za I / O aplikaciju prethodne godine:

Ilustracije mogu biti dobri kandidati za vektore

To nismo mogli zamijeniti VectorDravable jer gradijenti tada nisu bili široko podržani (spojler: sad su!), Pa smo morali isporučiti rastersku verziju . Da smo uspjeli koristiti vektor, to bi bilo za 30% za bolji rezultat:

  • Raster: Veličina preuzimanja = 53,9KB (veličina sirove datoteke = 54,8KB)
  • Vektor: Veličina preuzimanja = 3,7 KB (sirova datoteka veličine = 15,8 KB)
Imajte na umu da iako konfiguracija gustoće Android App Bundle donosi slične prednosti isporučivanjem potrebnih sredstava gustoće na uređaj, VectorDravable će općenito biti još manji i uklanja potrebu za neprestanim stvaranjem sve većih rasterskih sredstava.

Dinamičan

Kako vektorske slike opisuju njihov sadržaj, a ne ga "spljoštavaju" do piksela, otvaraju vrata zanimljivim novim mogućnostima poput animacije, interaktivnosti ili dinamičke tematike. Više o tome u budućim postovima.

Vektori održavaju strukturu slike tako da pojedinačni elementi mogu biti tematski ili animirani

Kompromis

Vektori imaju neke nedostatke koje je potrebno uzeti u obzir:

dešifriranje

Kao što je prethodno navedeno, vektorska sredstva opisuju njihov sadržaj, pa ih je potrebno napuhati i nacrtati prije upotrebe.

Koraci uključeni u dekodiranje vektora prije prikazivanja

Postoje dva koraka do ovoga:

  1. Inflacija. Vektorsku datoteku morate pročitati i rastaviti u VectorDravable koji modelira staze, grupe itd. Koje izjavite.
  2. Crtanje. Ti se predmeti modela tada moraju nacrtati izvršavanjem naredbi za crtanje na platnu.

Oba su koraka proporcionalna složenosti vektora i vrsti operacija koje izvodite. Ako koristite vrlo zapetljane oblike, trebat će duže vremena da se to analizira u Path. Slično tome, potrebno je duže obavljati više operacija crtanja (a neke su i skuplje, npr. Isječke). To ćemo ponovno pregledati u budućem postu iz ove serije o detaljima tih troškova.

Za statičke vektore, fazu crtanja treba izvesti samo jednom i tada se može spremiti u bitmapu. Animirani vektori ne mogu napraviti ovu optimizaciju jer se njihova svojstva nužno mijenjaju i zahtijevaju ponovno crtanje.

Usporedite to s rasterskim resursima poput PNG-ova koji trebaju samo dekodirati sadržaj datoteke, što je s vremenom vrlo optimizirano.

Ovo je osnovna razmjena rastera u odnosu na vektor. Vektori pružaju gore spomenute pogodnosti, ali pod cijenu da budu što skuplji. U ranijim danima Androida uređaji su bili manje moćni, a gustoće zaslona malo su se razlikovale. Danas su Android uređaji moćniji i dolaze u ogromnoj gustoći zaslona. Zbog toga vjerujem da je vrijeme da se sve aplikacije prebace na vektorske snimke.

Pogodnost

Zbog prirode formata, vektori su sjajni za opisivanje nekih sredstava poput jednostavnih ikona itd. Strašno su kodirati fotografije fotografskih vrsta gdje je teže opisati njihov sadržaj kao niz oblika, a vjerojatno bi bio i puno učinkovitiji koristiti rasterski format (kao što je webp). Ovo je, naravno, spektar, ovisno o složenosti imovine.

Konverzija

Nema alata za dizajn (koji znam) izravno kreira VectorDrawables što znači da postoji korak konverzije iz drugih formata. To može komplicirati tijek rada između dizajnera i programera. Detaljno ćemo se pozabaviti ovom temom u budućem postu.

Zašto ne SVG?

Ako ste ikada radili s formatima vektorskih slika, vjerojatno ćete naići na SVG format (Scalable Vector Graphics), industrijski standard na webu. Sposoban je i zreo s uspostavljenim alatnim alatima, ali to je i izvrstan standard. Uključuje mnoge složene mogućnosti poput izvršavanja proizvoljnih JavaScripta, efekata zamagljivanja i filtriranja ili umetanja drugih slika, čak i animiranih gif-a. Android radi na ograničenim mobilnim uređajima, tako da podržavanje cjeline SVG specifikacije nije bio realan cilj.

SVG ipak uključuje specifikaciju staze koja definira kako opisati i nacrtati oblike. Pomoću ovog API-ja možete izraziti većinu vektorskih oblika. To u suštini podržava Android: SVG-ova specifikacija puta (plus nekoliko dodataka).

Uz to, definiranjem vlastitog formata, VectorDravable može se integrirati sa značajkama platforme Android. Na primjer, rad sa Androidovim sustavom resursa za upućivanje na @colors, @dimens ili @strings, rad s atributima tema ili AnimatedVectorDravable koristeći standardne Animatore.

Mogućnosti VectorDravable

Kao što je rečeno, VectorDravable podržava SVG-ove specifikacije putanje, omogućujući vam da odredite jedan ili više oblika koji će se crtati. Napisana je kao XML dokument koji izgleda ovako:

Imajte na umu da trebate odrediti unutrašnju veličinu sredstva, koja bi bila veličina ako bi ga postavili u prikaz wrap_content ImageView. Druge veličine prikaznog polja definiraju virtualno platno ili prostor koordinata. Sve naredne naredbe crtanja su definirane. Unutrašnje dimenzije i dimenzije prikaza mogu se razlikovati (ali trebaju biti u istom omjeru) - možete odrediti svoje vektore na platnu veličine 1 * 1 ako želite stvarno želim.

Element sadrži jedan ili više elemenata. Oni se mogu imenovati (za kasniju referencu, npr. Animacija), ali ključno moraju navesti element pathData koji opisuje oblik. Ovaj niz kriptičnih izgleda može se zamisliti kao niz naredbi kojima se kontrolira olovka na virtualnom platnu:

Vizualizacija operacija staze

Gornje naredbe premještaju virtualnu olovku, zatim crtaju liniju do druge točke, podižu i premještaju olovku, a zatim crtaju drugu liniju. Sa samo 4 najčešće naredbe možemo opisati gotovo bilo koji oblik (ima ih više naredbi):

  • Prelazim na
  • L linija do
  • C (kubična bezier) krivulja do
  • Z zatvori (linija do prve točke)

(Naredbe velikih slova rabe apsolutne koordinate i mala slova u odnosu)

Možda se pitate treba li vas zanimati ova razina detalja - zar ih jednostavno ne dobijate iz SVG datoteka? Iako vam ne treba biti u stanju čitati stazu i razumjeti što će je iscrtati, osnovno razumijevanje o tome što radi VectorDravable izuzetno je korisno i potrebno za razumijevanje nekih naprednih značajki o kojima ćemo doći kasnije.

Putevi sami po sebi ne crtaju ništa, treba ih pomicati i / ili napuniti.

U drugom dijelu ove serije detaljnije se govori o različitim načinima punjenja / udaranja stazama.

Možete odrediti i skupine staza. To vam omogućuje definiranje transformacija koje će se primijeniti na sve staze u grupi.

Imajte na umu da pojedinačne staze ne možete rotirati / skalirati / prevesti. Ako želite takvo ponašanje, morat ćete ih smjestiti u grupu. Ova transformacija ima malo smisla za statičke slike koje bi ih mogle izravno usmjeriti na njihove staze - ali su izuzetno korisne za animiranje.

Također možete definirati clip-staze, odnosno maskirati područje na koje mogu povući i druge staze u istoj skupini. Oni su definirani na isti način kao i staze.

Jedno ograničenje napomene je da isječak staze nije anti-alised.

Demonstriranje puta neispričanih isječaka

Ovaj primjer (koji sam morao uvelike povećati da bih pokazao učinak) pokazuje dva pristupa za crtanje ikone zatvarača fotoaparata. Prvi crta staze, drugi crta čvrsti kvadrat, maskiran do oblika zatvarača. Maskiranje može pomoći u stvaranju zanimljivih efekata (pogotovo kada su animirani), ali relativno je skupo, tako da ako to možete izbjeći crtanjem oblika na drugačiji način, tada učinite.

Staze se mogu obrezati; to je samo nacrtati podskup cijelog puta. Možete obrezati ispunjene staze, ali rezultati mogu biti iznenađujući! Češće je obrezati hodne staze.

Obrezivanje staze

Možete obrezati ili od početka ili do kraja staze ili primijeniti odstupanje na bilo koje rezanje. Oni su definirani kao dio puta [0,1]. Pogledajte kako postavljanje različitih vrijednosti urezivanja mijenja dio crte koja je nacrtan. Također imajte na umu da se pomacima može smanjiti vrijednost „obloga“. Još jednom ovo svojstvo nema puno smisla za statičke slike već je prikladno za animaciju.

Element korijenskog vektora podržava svojstvo alfa [0, 1]. Grupe nemaju alfa svojstvo, ali pojedinačne staze podržavaju fillAlpha / strokeAlpha.

Proglasiti neovisnost

Nadam se da će vam ovaj post dati predstavu o tome što su vektorska imovina, kakve su prednosti i koristi. Androidov vektorski format je sposoban i ima široku podršku. S obzirom na raznolikost uređaja na tržištu, korištenje vektorskih sredstava trebao bi biti vaš zadani izbor, a samo se u posebnim slučajevima pribjegavaju rasterima. Pridružite nam se u sljedećim postovima da biste saznali više:

Uskoro: Izrada vektorskih sredstava za Android
Uskoro: Profiliranje Android VectorDrawables