SVG till vektor Drawables: Det bättre sättet att anpassa Android ikoner

Garret Cole
Garret Cole

följ

oktober 21, 2016 · 2 min läs

en av de mer populära sätten att hantera anpassade ikoner inom Android utvecklingsprojekt är att använda vektor drawables. Det här är XML-filer som beskriver sökvägen där en dragbar kan göras vid körning i Android-appen. För att få vektorn dragbar kan du konvertera en SVG-fil till det här formatet. Nyligen har detta underlättats med de senaste uppdateringarna till Android Studio. Men om du är som några av oss som är vana vid den gamla rörledningen kan du konvertera SVGs till vector drawables med det här praktiska verktyget.

den uppenbara fördelen med att använda vector drawables är storleken på din APK. Skillnaden i storleken på en app med vektorer kontra bilder är ganska signifikant. Istället för att ha flera förpackade bilder för varje dpi-upplösning som appen stöder, har du en enda, måttligt liten textfil med bildens sökväg som innehåll.

När du använder vanliga bilder som PNG för dina ikoner är det enkelt att bestämma den ursprungliga upplösningen genom att inspektera bilden för dess dimensioner med avseende på dess dpi-hink. Det är ännu enklare med vector drawables, men det finns två olika deklarerade höjder och bredder inom XML. Du har viewportWidth och bredd. ViewportWidth är faktiskt den storlek som tillgången kommer att dras inom den visnings. När den drar vägen inuti kommer den att begränsa sig till storleken på den visningsporten. Den andra ”bredden” är den faktiska bredden som utvecklaren skulle behandla som sin ursprungliga DPI-storlek när den blåses upp i en vy.

<vector android:height="24dp" android:viewportHeight="22.0"android:width="24dp" android:viewportWidth="15.0"

När du har din vektor dragbar kan du utöka variationerna i dess utseende genom att skapa en annan XML för varje variant du vill ha tillgång till i dina Android-resurser. Även om detta också kan göras för raw-bilder är det lite lättare att arbeta med när du antingen vill använda en bitmask eller ändra färgtillståndet för en ikon utan att behöva ersätta en massa tillgångar.

Luminance är en bra ikonuppsättning för dem som vill experimentera med ikoner. Alla ikoner är gratis att använda och finns i SVG-format.

återigen, för att sammanfatta denna pipeline för att leka med:

  1. ladda ner luminans och välj en ikon som du vill använda i SVG-format.
  2. släpp SVG till Android SVG till VectorDrawable och konvertera den till en Android vector drawable XML.
  3. placera XML i din res/drawable katalog.
  4. använd i din ImageView, ImageButtons eller någon annanstans du vill använda en dragbar tillgång!

Lämna ett svar

Din e-postadress kommer inte publiceras.