Εικονογράφηση της Virginia Poltrack

Σχεδίαση διαδρομής: Εκτέλεση του VectorDrawables Android

Στο προηγούμενο άρθρο, εξετάσαμε τη μορφή VectorDrawable του Android, με τα οφέλη και τις δυνατότητές του.

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

Απλά χρώματα

Ο απλούστερος τρόπος για να σχεδιάσετε μια διαδρομή είναι να καθορίσετε ένα σκληρό κωδικοποιημένο χρώμα πλήρωσης / διαδρομής.

Μπορείτε να ορίσετε μία ή και τις δύο αυτές ιδιότητες και μόνο μία φόρμα πλήρωσης / διαδρομής μπορεί να εφαρμοστεί ανά διαδρομή (σε αντίθεση με ορισμένα πακέτα γραφικών). Τα γεμίσματα τραβήχτηκαν πρώτα, και στη συνέχεια εφαρμόστηκε κάθε εγκεφαλικό επεισόδιο. Τα περιγράμματα είναι πάντα κεντραρισμένα (και πάλι σε αντίθεση με κάποιες εφαρμογές γραφικών που επιτρέπουν εσωτερικές ή εξωτερικές κινήσεις), απαιτούν ένα strokeWidth που θα καθοριστεί και μπορεί προαιρετικά να ορίσει strokeLineCap, strokeLineJoin ιδιότητες που ελέγχουν το σχήμα των άκρων / συνδέσεων των διαδρομών που έχουν περάσει (επίσης strokeMiterLimit για γραμμή κελάρυσμα ενώνει). Δεν υποστηρίζονται πατημένα εγκεφαλικά επεισόδια.

Τόσο τα γεμίσματα όσο και τα εγκεφαλικά επεισόδια προσφέρουν ξεχωριστές ιδιότητες άλφα: fillAlpha και strokeAlpha [0-1] και οι δύο εκ των οποίων έχουν προεπιλεγμένη τιμή 1 δηλαδή πλήρως αδιαφανείς. Εάν καθορίσετε ένα fillColor ή ένα strokeColor με ένα στοιχείο alpha, τότε αυτές οι δύο τιμές συνδυάζονται. Για παράδειγμα, εάν ορίσατε ένα 50% διαφανές κόκκινο fillColor (# 80ff0000) και ένα 0.5 fillAlpha τότε το αποτέλεσμα θα ήταν 25% διαφανές κόκκινο. Τα ξεχωριστά χαρακτηριστικά alpha καθιστούν ευκολότερο να ζωντανεύουν την αδιαφάνεια μιας διαδρομής.

Πόροι χρωμάτων

Οι διανύσματα υποστηρίζουν τη σύνταξη πόρων @color για τα χρώματα πλήρωσης και διαδρομής:

Αυτό σας επιτρέπει να παραμετροποιήσετε τα χρώματα για ευκολότερη συντήρηση και σας βοηθά να περιορίσετε την εφαρμογή σας σε μια συνεπή παλέτα.

Σας επιτρέπει επίσης να παρέχετε διαφορετικές τιμές χρωμάτων σε διαφορετικές διαμορφώσεις χρησιμοποιώντας τους προκριματικούς πόρους του Android. Για παράδειγμα, μπορείτε να δώσετε εναλλακτικές τιμές χρώματος στη νυχτερινή λειτουργία (res / colors-night / colors.xml) ή αν η συσκευή υποστηρίζει ευρείες γκάμες χρωμάτων (res / colors-widecg / colors.xml).

Θέματα Χρώματα

Όλες οι εκδόσεις των φορέων (πίσω στο API14 μέσω του AndroidX) υποστηρίζουν τη χρήση χαρακτηριστικών θεμάτων (π.χ.? Attr / colorPrimary) για τον καθορισμό των χρωμάτων. Αυτά είναι χρώματα που παρέχονται από ένα θέμα και αποδειχθούν εξαιρετικά χρήσιμα για τη δημιουργία ευέλικτων στοιχείων που μπορείτε να χρησιμοποιήσετε σε διαφορετικά μέρη της εφαρμογής σας.

Υπάρχουν 2 βασικοί τρόποι χρήσης των χρωμάτων θέματος.

Θερμοπληρώματα / εγκεφαλικά επεισόδια

Μπορείτε να αναφέρετε απευθείας τα χρώματα θέματος σε διαδρομές πλήρωσης ή διαδρομής:

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

Συμπλήρωση διαδρομής με χρώμα θέματος

Χρωματισμός

Το στοιχείο root προσφέρει τα χαρακτηριστικά tint & tintMode:

Ενώ θα μπορούσατε να χρησιμοποιήσετε αυτό για να εφαρμόσετε μια στατική απόχρωση, αυτό είναι πολύ πιο χρήσιμο σε συνδυασμό με τα χαρακτηριστικά θέματος. Αυτό σας επιτρέπει να αλλάξετε το χρώμα ολόκληρου του στοιχείου, ανάλογα με το θέμα στο οποίο είναι φουσκωμένο. Για παράδειγμα, θα μπορούσατε να βάψετε το εικονίδιο χρησιμοποιώντας το? Attr / colorControlNormal το οποίο καθορίζει το τυπικό χρώμα για τα εικονίδια και ποικίλλει μεταξύ ελαφρών και σκοτεινών θεμάτων. Με αυτό τον τρόπο μπορείτε να χρησιμοποιήσετε ένα μόνο εικονίδιο σε διαφορετικές οθόνες:

Χρωματίζοντας ένα εικονίδιο έτσι ώστε να είναι κατάλληλα χρωματισμένο σε οθόνες φωτός / σκοτάδι

Ένα όφελος από τη χρήση αποχρώσεων είναι ότι δεν βασίζεστε στο έργο τέχνης για τα περιουσιακά σας στοιχεία (συνήθως από τον σχεδιαστή σας) που είναι το σωστό χρώμα. Εφαρμόζοντας ένα πρότυπο απόχρωση, όπως το "attr / colorControlNormal" σε εικονίδια, σας δίνει θεματολογία και εγγυάται ότι τα στοιχεία ενεργητικού είναι ακριβώς το ίδιο, σωστό χρώμα.

Το χαρακτηριστικό tintMode σας επιτρέπει να αλλάξετε τη λειτουργία ανάμειξης που χρησιμοποιείται για να βάψετε το συρόμενο, υποστηρίζει: add, multiply, screen, src_atop, src_over ή src_in; που αντιστοιχεί στον ισοδύναμο τρόπο PorterDuff.Mode. Το προεπιλεγμένο src_in είναι συνήθως αυτό που θέλετε και αντιμετωπίζει την εικόνα ως μια μάσκα άλφα εφαρμόζοντας το ενιαίο χρώμα απόχρωσης σε ολόκληρο το εικονίδιο, αγνοώντας κάθε πληροφορία χρώματος στις μεμονωμένες διαδρομές (αν και το κανάλι άλφα διατηρείται). Για το λόγο αυτό, αν σκοπεύετε να βάψετε εικονίδια, τότε είναι καλύτερο να χρησιμοποιήσετε ένα πλήρως αδιαφανές χρώμα πλήρωσης / εγκεφαλικού επεισοδίου (συμβαίνει να χρησιμοποιείτε #fff).

Μπορεί να αναρωτιέστε πότε να βάψετε τα στοιχεία και πότε να χρησιμοποιήσετε τα χρώματα θέματος σε μεμονωμένα μονοπάτια καθώς και τα δύο μπορούν να επιτύχουν παρόμοια αποτελέσματα; Εάν θέλετε να χρησιμοποιήσετε χρώματα θέματος μόνο σε μερικά μονοπάτια, τότε πρέπει να τα χρησιμοποιήσετε απευθείας. Μια άλλη πτυχή μπορεί να είναι εάν το περιουσιακό σας στοιχείο έχει επικαλυπτική απόδοση. Εάν ναι, τότε γεμίζοντας με ένα ημι-αδιαφανές θέμα το χρώμα μπορεί να μην παράγει το αποτέλεσμα που θέλετε, αλλά η εφαρμογή μιας απόχρωσης μπορεί.

Περιουσιακά στοιχεία με αλληλεπικαλυπτόμενα μονοπάτια & ημι-αδιαφανή χρώματα θεμάτων: σύγκριση απόχρωσης με γεμίσματα

Σημειώστε ότι μπορείτε να μεταβάλλετε το θέμα που χρησιμοποιείται για την εμφύσηση του σχεδιαγράμματος είτε στο επίπεδο δραστηριότητας / προβολής, ρυθμίζοντας το χαρακτηριστικό θέμα του Android: ή σε κώδικα χρησιμοποιώντας ένα ContextThemeWrapper με ένα συγκεκριμένο θέμα για να φουσκώνει το διάνυσμα.

ColorStateLists

Το VectorDrawable υποστηρίζει την αναφορά των ColorStateLists για γεμίσματα / διαδρομές. Με αυτόν τον τρόπο, μπορείτε να δημιουργήσετε ένα μόνο σχέδιο, όπου η διαδρομή αλλάζει χρώμα ανάλογα με την κατάσταση προβολής / σχεδίασης (όπως πατημένο, επιλεγμένο, ενεργοποιημένο κ.λπ.).

Παραδείγματα διανυσμάτων που ανταποκρίνονται σε πιεσμένες και επιλεγμένες καταστάσεις

Αυτό εισήχθη στο API24, αλλά προστέθηκε πρόσφατα στο AndroidX, από την έκδοση 1.0.0 φέρνοντας την υποστήριξη πίσω στο API14. Αυτό χρησιμοποιεί επίσης τον πληθωριστή AndroidX ColorStateList, που σημαίνει ότι μπορείτε επίσης να χρησιμοποιήσετε τα χαρακτηριστικά θέματος και το alpha στο ίδιο το ColorStateList (τα οποία τα ίδια προστέθηκαν μόνο στην πλατφόρμα στο API23).

Παρόλο που παρόμοια αποτελέσματα θα μπορούσαν να επιτευχθούν χρησιμοποιώντας πολλαπλά συρραπτικά σε ένα StateListDrawable, αν η απόδοση διαφέρει ελάχιστα μεταξύ των καταστάσεων, αυτό μειώνει την επικάλυψη και μπορεί να είναι ευκολότερο να διατηρηθεί.

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

Διαβαθμίσεις

Οι 3 τύποι κλίσεων που υποστηρίζονται

Το VectorDrawable υποστηρίζει γραμμικές, ακτινικές και σκούπες (επίσης γνωστές ως γωνιακές) κλίσεις τόσο για γεμίσματα όσο και για εγκεφαλικά επεισόδια. Αυτό υποστηρίζεται επίσης από το API14 μέσω του AndroidX. Οι διαβαθμίσεις δηλώνονται στο δικό τους αρχείο σε res / χρώματα / αλλά μπορούμε να χρησιμοποιήσουμε την inline τεχνική πόρων για να δηλώσουμε αντίθετα την κλίση μέσα σε ένα διάνυσμα - κάτι που μπορεί να είναι πιο βολικό:

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

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

Γραμμικός

Οι γραμμικές κλίσεις πρέπει να καθορίζουν τις συντεταγμένες X / Y έναρξης / λήξης και να πληκτρολογήσουν = "γραμμική".

Ακτινικός

Οι ακτινικές κλίσεις πρέπει να καθορίζουν ένα κέντρο X / Y και μια ακτίνα (και πάλι στις συντεταγμένες προβολής) και type = "radial".

Σκούπισμα

Οι κλίσεις σάρωσης πρέπει να καθορίζουν μόνο ένα κεντρικό X / Y και τον τύπο = "σάρωση".

Το χρώμα σταματά

Ως κλίση ευκολίας μπορείτε να ορίσετε ένα startColor, κέντροColor και endColor απευθείας στην κλίση. Αν χρειάζεστε λεπτόκοκκο έλεγχο ή περισσότερες στάσεις χρώματος, μπορείτε επίσης να το επιτύχετε προσθέτοντας στοιχεία παιδικού στοιχείου που καθορίζουν ένα χρώμα και μια μετατόπιση [0-1] (σκεφτείτε αυτό ως ποσοστό του δρόμου μέσα από την κλίση).

Λειτουργίες πλακιδίων

Γραμμικές και ακτινικές (αλλά όχι σαρωτικές) κλίσεις προσφέρουν μια έννοια πλακιδίων - δηλαδή εάν η κλίση δεν καλύπτει το σύνολο της διαδρομής που γεμίζει / χαϊδεύει, τι να κάνει. Η προεπιλογή είναι σφιγκτήρας, ο οποίος απλώς συνεχίζει τα χρώματα έναρξης / λήξης. Εναλλακτικά, μπορείτε να ορίσετε τρόπους επανάληψης ή καθρέφτη κεραμιδιών που ... κάνουν όπως υποδηλώνουν τα ονόματά τους! Στα παρακάτω παραδείγματα, μια ακτινική κλίση ορίζεται πάνω από τον κεντρικό μπλε → πορφυρό κύκλο, αλλά γεμίζει την μεγαλύτερη τετραγωνική διαδρομή.

Λειτουργίες πλακιδίων κλίσης

Μοτίβα

Μπορούμε να συνδυάσουμε τη χρήση των διακοπτών χρώματος και των λειτουργιών κεραμιδιών για να επιτύχουμε στοιχειώδη υποστήριξη μοτίβων σε διανύσματα. Για παράδειγμα, εάν ορίσετε τις συμπίπτουσες στάσεις χρώματος, μπορείτε να επιτύχετε απότομες αλλαγές χρώματος. Συνδυάστε αυτό με μια επαναλαμβανόμενη λειτουργία κεραμιδιών και μπορούμε να δημιουργήσουμε ριγέ μοτίβο. Για παράδειγμα, εδώ είναι ένας δείκτης φόρτωσης κατασκευασμένος από ένα ενιαίο σχήμα γεμάτο σχήμα. Με την κίνηση της ιδιότητας translateX στην ομάδα που κατέχει αυτό το μοτίβο, μπορούμε να επιτύχουμε αυτό το αποτέλεσμα:

Σημειώστε ότι αυτή η τεχνική είναι μακριά από την πλήρη υποστήριξη SVG Pattern, αλλά μπορεί να είναι χρήσιμη.

Εικονογραφήσεις

Μια άλλη όμορφη εικόνα από το πολύ ταλαντούχο Virginia Poltrack

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

Σκιές

Τα VectorDrawables δεν υποστηρίζουν εφέ σκιάς σταγόνων. Ωστόσο, οι απλές σκιές μπορούν να προσεγγιστούν χρησιμοποιώντας κλίσεις. Για παράδειγμα, αυτό το εικονίδιο της εφαρμογής χρησιμοποιεί ακτινικές κλίσεις για να προσεγγίσει την σκιά σταγόνας των λευκών κύκλων και γραμμική κλίση για τη σκιά κάτω από το τρίγωνο:

Προσέγγιση των σκιών με κλίσεις

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

Μετασχηματισμός διαδρομής που περιέχει κλίση

Χρώμα με Αριθμούς

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

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

Η ιστορία συμβατότητας με διανύσματα είναι καλή, έτσι ώστε αυτά τα χαρακτηριστικά μπορούν να χρησιμοποιηθούν σήμερα στις περισσότερες εφαρμογές (περισσότερα για αυτό στην επόμενη δόση).

Ελάτε μαζί μας στο επόμενο μέρος των περιπέτειών μας σε φορέα-γη:

Ερχόμενοι σύντομα: Δημιουργία πόρων φορέα για το Android
Σύντομα κοντά σας: Δημιουργία προφίλ για το Android VectorDrawables