Πώς να ανεβάσετε εικόνες σε Xcode

Για να χρησιμοποιήσετε εικόνες σε Xcode, πρέπει να τις ανεβάσετε Assets.xcassets, που βρίσκονται στο Supporting Filesφάκελο. Υπάρχουν δύο επιλογές που μπορείτε να ακολουθήσετε: bitmaps (γνωστά και ως pngαρχεία) ή διανύσματα (γνωστά και ως .pdfαρχεία). Το πρώτο βήμα είναι να αποφασίσετε ποιος τύπος αρχείου θέλετε να χρησιμοποιήσετε.

Η διαφορά μεταξύ bitmaps και διανυσματικών στοιχείων

Τα περισσότερα σεμινάρια στο διαδίκτυο χρησιμοποιούν στοιχεία bitmap, τα οποία είναι .pngαρχεία. Αυτό απαιτεί να σύρετε πάνω από 3 αντίγραφα της εικόνας στον Xcode.

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

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

Ωστόσο, τα διανυσματικά περιουσιακά στοιχεία στα iPhone δεν στην πραγματικότητα κλιμακώνονται με αλγόριθμους (προφανώς). Επομένως, δεν λαμβάνετε εικόνες υψηλότερης ποιότητας χρησιμοποιώντας διανύσματα μέσω bitmap. Αντίθετα, αυτό που έχετε είναι η ίδια ποιότητα με το bitmap. Το iPhone παίρνει απλώς το στοιχείο "vector" και το μετατρέπει στα ίδια τρία μεγέθη bitmap.

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

  1. Μειώνει την πιθανότητα ανθρώπινου λάθους. Αυτή τη στιγμή υπάρχουν τρία μεγέθη bitmap (1x, 2x, 3x). Αυτό σημαίνει ότι πρέπει να ανεβάσετε τρεις εικόνες στα στοιχεία σας. Αυτές είναι τρεις ευκαιρίες για κατά λάθος μεταφορά και απόθεση της λανθασμένης εικόνας. Όταν χρησιμοποιείτε διανυσματικά στοιχεία (τα οποία εμφανίζονται ως καθολικά σε Xcode), πρέπει να ανεβάσετε μόνο μια εικόνα αντί για τρεις. Υπάρχουν λιγότερες πιθανότητες μεταφόρτωσης εσφαλμένου μεγέθους ή εικόνας.
  2. Ταχύτητα. Ίδιος λόγος με το # 1. Εάν χρησιμοποιείτε πολλές εικόνες στην εφαρμογή σας, τότε η χρήση διανυσματικών στοιχείων μειώνει τον αριθμό των εικόνων που πρέπει να ανεβάσετε κατά το ένα τρίτο.
  3. Μελλοντικές δοκιμές. Το iPhone χρησιμοποιεί μόνο τρία μεγέθη εικόνας (1x, 2x, 3x). Αυτό σχετίζεται με την αυξημένη ποιότητα του αμφιβληστροειδούς στις οθόνες. Όταν η Apple παρουσίασε τις οθόνες υψηλού αμφιβληστροειδούς πριν από μερικά χρόνια, ο αριθμός των pixel ανά σημείο αυξήθηκε για πιο ευκρινή εικόνα.

    Φαίνεται εξαιρετικά πιθανό ότι παρόμοιες τεχνολογικές αυξήσεις θα συνεχίσουν να συμβαίνουν. Στο μέλλον, ενδέχεται να χρειαστεί να ανεβάσετε εικόνες 4x, 5x και 6x. Εάν χρησιμοποιήσουμε ένα στοιχείο φορέα, η εφαρμογή θα κλιμακώσει την εικόνα για εμάς. Αυτό μας σώζει από την πτώση στα νέα μεγέθη του bitmap στοιχείου.

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

Το μεγάλο μειονέκτημα για τη χρήση διανυσματικών στοιχείων στο Xcode είναι ότι τα περισσότερα μέρη δεν παρέχουν το .pdfαρχείο. Πρέπει να το μετατρέψετε από τον .svgεαυτό σας.

Ενημέρωση στις 18 Ιουνίου 2017 : Η Apple ανακοίνωσε στο WWDC ότι το iOS υποστηρίζει πλέον αληθινές σκοτεινές εικόνες! Ή τουλάχιστον, αυτό νομίζω ότι ανακοίνωσαν. Τώρα υπάρχει ακόμη περισσότερος λόγος για χρήση για χρήση μίας κλίμακας.

Πώς να ανεβάσετε ένα διανυσματικό στοιχείο

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

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

Πώς να ανεβάσετε αρχεία .png

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

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

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

Πω πω αυτό είναι μεγάλο. Είναι επειδή έκανα λήψη της έκδοσης 512 pixel από τον ιστότοπο. Ωστόσο, θέλω μόνο η εικόνα να είναι 20 x 20 pixel στην εφαρμογή μου. Για να μετατρέψω την εικόνα σε 20 εικονοστοιχεία, θα αλλάξω το μέγεθός της στην προεπισκόπηση.

Δημιουργήστε τρία αντίγραφα της αρχικής εικόνας. Τα ονόματα των εικόνων σας θα πρέπει να είναι κάπως έτσι: zen.png, [email protected], [email protected]. Το σημαντικό μέρος είναι ότι όλα τα αρχεία έχουν το ίδιο όνομα (εδώ χρησιμοποιώ zen), και δύο από αυτά τελειώνουν με @2xκαι @3x. Όταν χρησιμοποιείτε αυτήν τη σύμβαση ονομασίας, το Xcode θα μπορεί να εντοπίζει αυτόματα το σωστό μέγεθος με βάση τον τύπο της συσκευής.

Στη συνέχεια, ανοίξτε την εικόνα στην Προεπισκόπηση και μεταβείτε στην επιλογή Εργαλεία> Ρύθμιση μεγέθους για να εμφανιστεί το παρακάτω μενού. Καθορίστε 20 x 20 pixel. Πατήστε ok και αποθηκεύστε την αλλαγή. Αυτή είναι η βασική σας εικόνα zen.png.

Κάντε το ίδιο πράγμα για [email protected]. Μόνο αυτό θα πρέπει να είναι 40 x 40 pixel. Για άλλη μια φορά για [email protected]. Αυτό θα είναι 60 x 60 pixel.

Τώρα μπορείτε να μεταφέρετε και να αποθέσετε τις εικόνες στα σωστά πλαίσια στο Xcode. Εγινε!