Εφαρμογή προσαρμοστικών εικονιδίων

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

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

Εάν ενδιαφέρεστε για την πίσω ιστορία αυτής της μορφής ή για το πώς να σχεδιάσετε ένα προσαρμοστικό εικονίδιο, δείτε αυτές τις αναρτήσεις:

Βασικά

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


  
   

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

Πρέπει επίσης να δημιουργήσετε το apk με το buildToolsVersion 26.0.0 ή μεγαλύτερο.

Στην πραγματικότητα το minSDK είναι 26

Επειδή τα προσαρμοστικά εικονίδια χρησιμοποιούνται μόνο στο API 26+, μπορείτε να βασίζεστε σε ορισμένες λειτουργίες που είναι διαθέσιμες σε εσάς. Ειδικά αρκετά ικανή υποστήριξη VectorDrawable.

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

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

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

Ο Ian δείχνει πώς να χρησιμοποιήσει μια απλή γραμμική κλίση, αλλά το VectorDrawable έχει μερικά πιο έξυπνα κόλπα. Ακολουθεί ένα παράδειγμα εφαρμογής μιας «μακράς σκιάς» χρησιμοποιώντας μια ακτινική κλίση με πολλαπλές στάσεις χρώματος. Επίσης, χρησιμοποιώ τη σύνταξη εισόδου πόρων που σας επιτρέπει να ενσωματώσετε τα πολλαπλά αρχεία σε ένα μόνο αρχείο (μέσω τεχνικών AAPT που χρησιμοποιούνται συνήθως με το AnimatedVectorDrawables):

  
    
      <κλίση
          android: type = "radial"
          καιroid: centerX = "54"
          καιroid: centerY = "54"
          android: gradientRadius = "76.37">
        
        
        
        
        
        
        
      
    
  
  ...
Η σκιά που παράγεται από την ακτινική κλίση.

Τα περισσότερα εικονίδια περιλαμβάνουν κάποιο στοιχείο drop-shadow σε αυτά (σύμφωνα με τις κατευθυντήριες γραμμές υλικού) τα οποία, δυστυχώς, το VEctorDrawable δεν υποστηρίζει. Με τα προσαρμοσμένα εικονίδια, υπάρχουν δύο χαρακτηριστικά που κάνουν τους διανύσματα πιο συναφείς:

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

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

Ελάχιστο βιώσιμο ανάπτυγμα

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

Υπάρχει, ωστόσο, ένα καθαρό τέχνασμα που μπορείτε να χρησιμοποιήσετε για περιουσιακά στοιχεία με περιοχές διαφάνειας σε αυτές ... κάτι που είναι κάπως κοινό σε προσαρμοσμένα πρωτότυπα εικονιδίων. Ενώ αυτό το είδος περιουσιακού στοιχείου πιθανώς συμπιέζει καλά στο χρόνο κατασκευής, κατά το χρόνο εκτέλεσης κάθε pixel καταλαμβάνει 8 μπιτ μνήμης ανεξάρτητα από την αδιαφάνεια. Για να ελαχιστοποιηθεί αυτό, αν η διαφάνεια είναι γύρω από τις άκρες, μπορείτε να αποκόψετε αυτές τις περιοχές από το PNG και να χρησιμοποιήσετε ένα InsetDrawable για να το τυλίξετε και να το γεμίσετε στο μέγεθος του σε 108dp. Τώρα, δυστυχώς, το InsetDrawable δεν αγαπά να αλλάζει το μέγεθός του (δηλαδή εάν ορίσετε ένα κορυφαίο ένθετο 16dp, θα είναι πάντα 16dp ανεξάρτητα από το πόσο τα όρια του σχεδιαστή έχουν αλλάξει) έτσι σε κλασματικά ένθετα API26 προστέθηκαν για να μετριάσουν αυτό. Αυτό σας επιτρέπει να ορίσετε τα ένθετα ως ποσοστό του συνολικού σχεδίου, ώστε να βαθμονομηθούν σωστά.

Για παράδειγμα, πείτε ότι έχετε ένα στοιχείο του πρωτοποριακού στοιχείου που είναι 54dp * 54dp. αντί να το τοποθετήσετε σε ένα περιουσιακό στοιχείο 108dp * 108dp εν μέσω διαφάνειας, μπορείτε να κάνετε τα εξής.

<ένθετο ...
    android: σχεδίαση = "@ mipmap / ic_fg_trimmed"
    android: insetLeft = "25%"
    android: insetTop = "25%"
    android: insetRight = "25%"
    android: insetBottom = "25%" />

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

Δεν χρειάζεται να φορτώσετε / φορτώσετε διαφανή εικονοστοιχεία

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

Πραγματοποιήστε μια συντόμευση

Τα προσαρμοσμένα εικονίδια δεν είναι μόνο για εικονίδια εφαρμογών, αλλά χρησιμοποιούνται επίσης για συντομεύσεις εφαρμογών. Οι συντομεύσεις εφαρμογών μπορούν να συνδεθούν στην αρχική οθόνη, έτσι ώστε να χρειαστεί να χωρέσουν με εικονίδια εφαρμογών. Οι προδιαγραφές σχεδιασμού (pre-O) απαιτούν εικονίδια συντόμευσης για να κάθονται σε γκρι κυκλικό υπόβαθρο. Στο Android-O, το φόντο θα πρέπει να συμπληρώνει την προσαρμοστική μάσκα εικονιδίων. Εάν δεν ενημερώσετε την προσαρμογή, το εικονίδιο συντόμευσης θα μειωθεί και θα τοποθετηθεί σε λευκό φόντο.

Σύντομη αναζήτηση της Plaid. πριν και μετά την προσαρμογή

Για να το εφαρμόσω στην εφαρμογή μου Plaid, έχω αρχικά προσθέσει νέα εικονίδια στη διαμόρφωση v26, ανασυσκευασμένα για το προσαρμοστικό πλέγμα και τις καλένιες. Δεν ήμουν ευχαριστημένος με αυτή την προσέγγιση, καθώς ήταν ουσιαστικά κλιμακωτές εκδόσεις των εικόνων v25. πράγμα που σήμαινε ότι είχα τώρα δύο εικόνες για να διατηρήσω. Τελικά αποφάσισα να σπάσω το εικονίδιο v25 σε ένα προσκήνιο (π.χ. το εικονίδιο αναζήτησης) και το φόντο (τον γκρίζο κύκλο) και να τα συνδυάσω με ένα LayerDrawable:

  
  

Στη συνέχεια, θα μπορούσα να χρησιμοποιήσω το ίδιο στοιχείο προσκηνίου στο προσαρμοστικό εικονίδιο. Στο v25, τα εικονίδια συντόμευσης της εφαρμογής είναι 24dp μέσα σε ένα περιουσιακό στοιχείο 48dp. στο v26 είναι 44dp μέσα σε ένα περιουσιακό στοιχείο 108dp:

Απαιτούμενα στοιχεία πρωτοποριακού εικονιδίου συντόμευσης εφαρμογής που απαιτούνται στο API 25 & API 26

Για να χρησιμοποιήσω το ίδιο αρχείο 48dp χρειάστηκα να το τοποθετήσω έτσι ώστε το εικονίδιο να είναι το σωστό μέγεθος αφού έχει κλιμακωθεί (yay vectors!) Στο μέγεθος προσαρμοστικού εικονιδίου 108dp. Το φόντο επιτυγχάνεται χρησιμοποιώντας ένα ColorDrawable:

  
  <προσκήνιο>
    
    <ένθετο
      android: συρραφής = "@ συρόμενη / ic_shortcut_search_foreground"
      android: ένθετο = "9.26%" />
  
Το AdaptiveIconDrawable θα αναβαθμίσει το παρεχόμενο υλικό σε 108dp, έτσι ώστε να υπολογίσει το ένθετο που απαιτείται για την παραγωγή εικονιδίου 44dp: 48/24 * 44 = 88; δηλαδή πρέπει να προσθέσουμε το κλιμακωτό περιουσιακό στοιχείο κατά 10dp από κάθε πλευρά: 10/108 → 9.26%

Για συντομεύσεις εικόνας bitmap, χρησιμοποιήστε το εικονίδιο # createWithAdaptiveBitmap.

Παίξτε γύρω

Εάν δημιουργείτε ένα προσαρμοστικό εικονίδιο, τότε η εφαρμογή "Προσαρμοστικός εικονικός χώρος" θα είναι χρήσιμη για εσάς. Σας επιτρέπει να κάνετε προεπισκόπηση προσαρμοστικών εικονιδίων στη συσκευή σας, να δείτε πώς φαίνονται με διαφορετικές μάσκες που εφαρμόζονται και να εξερευνήσετε κάποια εφέ κίνησης.

Μπορείτε να πάρετε ένα APK (για συσκευές που ήδη εκτελούν Android-O) ή να το ελέγξετε στο github:

Προσαρμογή μακριά

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