Vector Drawable: τι είναι, μορφή XML και πώς λειτουργεί

Τι είναι το Vector Drawable;

Vector Drawable είναι ένας πόρος Android που αναπαριστά μια διανυσματική εικόνα σε μορφή XML, βασισμένος στην προδιαγραφή SVG (Scalable Vector Graphics). Η Google εισήγαγε αυτή τη μορφή στο Android 5.0 (API 21) ως εναλλακτική στις ψηφιοδοτικές εικόνες για εικονίδια, εικονογραφήσεις και άλλα γραφικά στοιχεία διεπαφής.

Σε αντίθεση με το PNG, όπου η εικόνα αποθηκεύεται ως πίνακας πικσελ σταθερού μεγέθους, το Vector Drawable περιγράφει τα σχήματα μαθηματικά — μέσω συντεταγμένων σημείων, καμπυλών Bezier, γεμισμάτων και περιγραμμάτων. Αυτό σημαίνει ότι μια διανυσματική εικόνα μπορεί να αντικαταστήσει έως και έξι PNG αρχεία για διαφορετικές πυκνότητες οθόνης (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), πράγμα που απλοποιεί ριζικά τη διαχείριση των γραφικών πόρων.

Η μορφή υποστηρίζει όχι μόνο στατικές εικόνες, αλλά και ανιμάτιο μέσω AnimatedVectorDrawable, καθώς και προσαρμογή σε σκοτεινό θέμα και προσαρμοσμένα χρώματα μέσω γνωρισμάτων θέματος. Από το Android 7.0 (API 24), το Vector Drawable υποστηρίζει επίσης γεμίσματα διαβάθμισης και συνθέτες λειτουργίες αποκοπής (clipPath), που επεκτείνει τις δυνατότητες σχεδίασης.

Βασικά στοιχεία του Vector Drawable

Κάθε Vector Drawable περιέχει το ριζικό στοιχείο vector με παραμέτρους πλάτους, ύψους και viewport — ενός εικονικού συστήματος συντεταγμένων όπου σχεδιάζονται τα σχήματα. Μέσα υπάρχουν ομάδες (group) και διαδρομές (path), όπου το path καθορίζει τη γεωμετρία μέσω μιας ακολουθίας εντολών: M (moveTo), L (lineTo), C (cubicTo), Z (close) και άλλων. Κάθε path μπορεί να έχει το δικό του γέμισμα (fillColor) και περίγραμμα (strokeColor), τα οποία μπορούν να αναφέρονται σε πόρους θέματος.

Προσθετικά στοιχεία περιλαμβάνουν clip-path για αποκοπή, gradient για μεταβάσεις διαβάθμισης και γνωρίσματα προσαρμογής σε σκοτεινό θέμα μέσω του γνωρίσματος android:theme. Όλα τα χρώματα στο Vector Drawable μπορούν να καθοριστούν ως αναφορές σε γνωρίσματα θέματος (π.χ. ?attr/colorPrimary), πράγμα που αλλάζει την εμφάνιση των εικονιδίων κατά την αλλαγή θέματος χωρίς αντιγραφή πόρων.

Μορφή Vector Drawable: δομή XML

Το XML αρχείο Vector Drawable τοποθετείται στον κατάλογο res/drawable/ και έχει ριζικό στοιχείο <vector>. Μέσα μπορούν να υπάρχουν ένθετα <group> για την οργάνωση της ιεραρχίας και <path> για την περιγραφή περιγραμμάτων. Κάθε path περιέχει το γνώρισμα pathData — μια συμβολοσειρά εντολών σχεδίασης σε μορφή διαδρομής SVG.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@color/ic_launcher_background"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:strokeWidth="1"
        android:strokeColor="#333333"/>

</vector>

Στο παράδειγμα περιγράφεται ένας κύκλος με ακτίνα 10 μονάδων σε viewport 24×24. Η παράμετρος fillColor αναφέρεται σε έναν πόρο χρώματος, ενώ τα strokeWidth και strokeColor καθορίζουν το περίγραμμα. Τα μεγέθη width και height καθορίζονται σε dp — αυτό εξασφαλίζει σωστή κλίμακωση σε οθόνες με διαφορετική πυκνότητα πικσελ χωρίς επιπλέον μετασχηματισμούς.

Ομαδοποίηση και μετασχηματισμοί

Το στοιχείο group επιτρέπει την ομαδοποίηση πολλών path και την εφαρμογή κοινών μετασχηματισμών: περιστροφή (rotation), μετατόπιση (translateX, translateY) και κλίμακωση (scaleX, scaleY). Οι ομάδες μπορούν να είναι ένθετες, επιτρέποντας τη δημιουργία σύνθετης ιεραρχίας από εκατοντάδες στοιχείων χωρίς απώλεια απόδοσης.

<vector ...>
    <group android:name="arrow_group"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="90">
        <path .../>
    </group>
</vector>

Η ομαδοποίηση με το γνώρισμα pivotX/pivotY χρησιμοποιείται για ανιμάτιο: ένα μέρος της εικόνας μπορεί να περιστραφεί ή να κλιμακωθεί ανεξάρτητα από τα υπόλοιπα στοιχεία, πράγμα που είναι ιδιαίτερα χρήσιμο για τη δημιουργία εικονιδίων κατάστασης (π.χ. φόρτωση → επιτυχία).

Vector Drawable vs ψηφιοδοτική γραφική

Η επιλογή ανάμεσα σε διανυσματική και ψηφιοδοτική γραφική εξαρτάται από το σενάριο χρήσης. Το Vector Drawable είναι ιδανικό για εικονίδια, εικονογραφήσεις και στοιχεία διεπαφής με λίγες λεπτομέρειες, ενώ οι φωτογραφίες και οι σύνθετες εικόνες με χιλιάδες χρώματα παραμένουν σε ψηφιοδοτικές μορφές.

Σύμφωνα με το Android Performance Patterns (Google I/O 2016), η αντικατάσταση εικονιδίων PNG με Vector Drawable μειώνει το μέγεθος APK κατά 40–60% για εφαρμογές με πολλούς γραφικούς πόρους. Ωστόσο, κατά την απόδοση σύνθετων διανυσμάτων με εκατοντάδες path, το φορτίο CPU αυξάνεται, γιαυτό για ανιμάτια και συχνή επανασχεδίαση συνιστάται η χρήση προπροφορτικών ψηφιοδοτικών αρχείων.

Πότε να επιλέξετε Vector Drawable

Vector Drawable είναι βελτιστοποιημένο για εικονίδια διεπαφής (γραμμή εργαλείων, περιήγηση, καταστάσεις), λογότυπα, απλές εικονογραφήσεις και ανιματισμένα στοιχεία. Η μορφή είναι ιδιαίτερα χρήσιμη κατά την υποστήριξη πολλών οθονών: αντί να δημιουργείτε PNG για έξι πυκνότητες, ένα XML αρχείο είναι αρκετό. Αυτό απλοποιεί τη συντήρηση σχεδίου και εξαλείφει σφάλματα αναντιστοιχίας μεγεθών. Για φωτογραφίες και εικόνες με φωτορεαλιστικές διαβαθμίσεις εξακολουθούν να χρησιμοποιούνται ψηφιοδοτικές μορφές με συμπίεση WebP.

Ανιμάτιο Vector Drawable

Το Android υποστηρίζει το ανιμάτιο Vector Drawable μέσω δύο μηχανισμών: AnimatedVectorDrawable (διαθέσιμο από API 21) και AnimatedStateListDrawable. Το πρώτο επιτρέπει την εμψύχωση γνωρισμάτων path — περιστροφή, μετατόπιση, αλλαγή χρώματος και σχήματος. Το δεύτερο εναλλάσσει μεταξύ διαφορετικών καταστάσεων (πίεση, επιλογή) με ομαλή μετάβαση.

Το AnimatedVectorDrawable χρησιμοποιεί τρία XML αρχεία: αυτό το Vector Drawable, το ObjectAnimator με περιγραφή ανιμάτιου και το συνδετικό AnimatedVectorDrawable που συνδέει το target (όνομα ομάδας ή διαδρομής) με τον ανιματορίστη. Το ανιμάτιο μπορεί να αλλάξει fillColor, strokeColor, rotation, translateX/Y, scaleX/Y, και ακόμη pathData — δηλαδή να μετασχηματίσει ομαλά το ένα σχήμα σε ένα άλλο (morphing).

Παράδειγμα ανιμάτιου morphing

Ας εξετάσουμε ένα ανιμάτιο όπου το εικονίδιο το προσθέτουνται καί γίνεται ανταυτά σχήμα. Η κύρια περιορισμός: ο αριθμός των εντολών pathData πρέπει να ταυτίζει κατά την αρχική και τελική κατάσταση, διαφορετικά το ανιμάτιο δεν θα λειτουργήσει.

<!-- res/drawable/anim_plus_to_close.xml -->
<animated-vector xmlns:android="...">
    <target
        android:name="plus_path"
        android:animation="@anim/plus_to_close"/>
</animated-vector>

Το ObjectAnimator plus_to_close αλλάζει την ιδιότητα pathData από το αρχικό σχήμα της προσθέτουνται στο σχήμα του ανταυτά σε 300 χιλιοστά δευτερολέπτου. Το σύστημα αυτόματα παρεμβάλλει τις συντεταγμένες μεταξύ των δύο συνόλων εντολών διαδρομής SVG. Τέτοιο ανιμάτιο χρησιμοποιείται ευρέως στο Material Design για ομαλές μεταβάσεις καταστάσεων κουμπιών και εικονιδίων.

Παραδείγματα κώδικα Vector Drawable

Ας δούμε ένα πλήρες παράδειγμα διανύσματος XML για το εικονίδιο βέλος πίσω με υποστήριξη σκοτεινού θέματος. Το χρώμα καθορίζεται μέσω αναφοράς σε γνώρισμα θέματος, πράγμα που αλλάζει αυτόματα το χρώμα του εικονιδίου κατά την εναλλαγή μεταξύ ανοιχτού και σκοτεινού θέματος χωρίς αντιγραφή πόρων.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">

    <group android:name="arrow">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
    </group>

</vector>

Η παράμετρος android:tint με τιμή ?attr/colorControlNormal εφαρμόζει αυτόματα το χρώμα συστήματος του στοιχείου ελέγχου — σε ανοιχτό θέμα είναι σκούρο γριζ, σε σκοτεινό λευκό. Η ομάδα με όνομα arrow επιτρέπει την εμψύχωση αυτού του εικονιδίου μέσω AnimatedVectorDrawable.

Φόρτωση Vector Drawable από κώδικα

Για την προγραμματική φόρτωση Vector Drawable στο Android χρησιμοποιείται η κλάση AppCompatResources.getDrawable() ή η μέθοδος ContextCompat.getDrawable(). Σε σύγχρονα έργα Jetpack Compose, τα ψηφιοδοτικά και διανυσματικά Drawable φορτώνονται μέσω painterResource, που ανιχνεύει αυτόματα τη μορφή του πόρου.

import androidx.appcompat.content.res.AppCompatResources

val vectorDrawable = AppCompatResources.getDrawable(
    context,
    R.drawable.ic_arrow_back
)

// Jetpack Compose
Icon(
    painter = painterResource(R.drawable.ic_arrow_back),
    contentDescription = "Back",
    tint = MaterialTheme.colorScheme.onSurface
)

Κατά τη χρήση AppCompatResources.getDrawable(), η βιβλιοθήκη AppCompat επιλέγει η ίδια την κατάλληλη έκδοση drawable ανάλογα με το επίπεδο API: σε συσκευές πιο παλιές από Android 5.0 (API 21) μπορεί να χρησιμοποιηθεί ένα ψηφιοδοτικό fallback, σε νεότερες — Vector Drawable. Στο Jetpack Compose, το painterResource χειρίζεται αυτόματα αυτήν την συμβατότητα.