Pentru a utiliza imagini în Xcode, trebuie să le încărcați în Assets.xcassets, situat în Supporting Files pliant. Există două opțiuni cu care puteți merge: bitmaps (aka.png fișiere) sau vectori (aka .pdf fișiere). Primul pas este de a decide ce tip de fișier doriți să utilizați.

Diferența dintre bitmap-urile și activele vectoriale

Cele mai multe tutoriale online folosesc materiale bitmap, care sunt .png fișiere. Acest lucru necesită să trageți peste 3 copii ale imaginii în Xcode.

Cum sa incarcati imagini in Xcode
Trageți și plasați aici cele trei copii ale imaginilor dvs. .png

Cu toate acestea, există o școală de gândire care crede că activele vectoriale sunt superioare. Acest articol are o explicație extraordinară de ce este cazul. Activele vectoriale sunt .svg fișiere (sau .pdf pentru Xcode). Dacă alegeți să utilizați activele vectorilor, trebuie să încărcați doar o versiune a imaginii în Xcode.

1611271866 220 Cum sa incarcati imagini in Xcode
Trageți și fixați fișierul .pdf aici

Iată ce am auzit de la acele mult mai înțelepte atunci, telefoanele Android folosesc algoritmi din activul vector pentru a genera imaginea în orice dimensiune necesară. Are sens, având în vedere lățimea largă a dispozitivelor și a dimensiunilor ecranului pentru Android.

Cu toate acestea, activele vectoriale din iPhone nu se escaladează de fapt cu algoritmi (aparent). Deci, nu obțineți imagini de calitate superioară utilizând vectori peste bitmap-uri. În schimb, ceea ce obțineți este aceeași calitate ca bitmap. IPhone pur și simplu preia activul „vector” și îl convertește în aceleași trei dimensiuni bitmap.

În afară de logica algoritmului de mai sus, există câteva beneficii mai obiective ale utilizării activelor vectoriale pentru iPhone.

ad-banner
  1. Reduce probabilitatea de eroare umană. În acest moment există trei dimensiuni bitmap (1x, 2x, 3x). Asta înseamnă că trebuie să încărcați trei imagini în materialele dvs. Acestea sunt trei oportunități de a trage și a lăsa accidental o imagine greșită. Când utilizați elemente vectoriale (care apar ca universal în Xcode), trebuie să încărcați doar o imagine în loc de trei. Există mai puține șanse de a încărca dimensiunea sau imaginea incorectă.
  2. Viteză. Același motiv ca și numărul 1. Dacă utilizați o mulțime de imagini în aplicația dvs., atunci utilizarea activelor vectoriale reduce numărul de imagini pe care trebuie să le încărcați cu o treime.
  3. Proiectarea viitoare. În prezent, iPhone-ul folosește doar trei dimensiuni de imagine (1x, 2x, 3x). Acest lucru este legat de calitatea crescută a retinei a ecranelor. Când Apple a introdus ecranele cu retină înaltă acum câțiva ani, numărul de pixeli pe punct a crescut pentru o imagine mai clară.
    Pare extrem de probabil ca creșteri tehnologice similare să continue să aibă loc. În viitor, este posibil să fie nevoie să încărcăm imagini 4x, 5x și 6x. Dacă folosim un element vector, aplicația va scala imaginea pentru noi. Acest lucru ne scutește de scăderea noilor dimensiuni ale activului bitmap.
    Deși trebuie să recunosc că sunt un pic confuz cu privire la acest lucru, dat fiind că activele vectoriale iPhone nu par să funcționeze efectiv pe algoritmi. Deci, nu sunt sigur cum se vor scala automat la dimensiuni mai mari. Dar înțeleptul meu mentor mi-a explicat acest lucru și am încredere în el!

Singurul dezavantaj mare pentru utilizarea activelor vectoriale în Xcode este că majoritatea locurilor nu oferă .pdf fişier. Trebuie să-l convertiți din .svg tu.

Actualizare la 18 iunie 2017: Apple a anunțat în WWDC că iOS acceptă acum imagini scalare adevărate! Sau cel puțin, asta cred că au anunțat. Acum există și mai multe motive pentru a folosi o singură scală.

Cum se încarcă un material vector

1611271866 604 Cum sa incarcati imagini in Xcode
Opțiuni pentru încărcarea unui material vector

Accesați meniul atribute. Schimbați scalele la „singură scală” și bifați caseta de redimensionare pentru a „păstra datele vectoriale”. Aceasta va schimba opțiunea de încărcare la „toate” în loc de 1x, 2x, 3x.

1611271866 297 Cum sa incarcati imagini in Xcode
Trageți și fixați fișierul .pdf aici

Apoi trageți și plasați .pdf fișier într-un singur slot. Nu sunt prea sigur cum să convertesc .svg la .pdf totuși, dar presupun că este destul de ușor cu Preview.

Cum se încarcă fișiere .png

Dacă decideți să continuați .png, va trebui să încărcați trei versiuni ale fișierului. Aceasta este pentru a acoperi diferitele rezoluții de ecran ale diferitelor iPhone.

1611271867 110 Cum sa incarcati imagini in Xcode
Opțiuni pentru activele bitmap

Mai întâi, asigurați-vă că opțiunea „scale” din meniul atributelor este setată la „scale individuale”. Aceasta este opțiunea implicită și vă va arăta trei sloturi pe care ar trebui să le completați:

1611271867 682 Cum sa incarcati imagini in Xcode
Trageți și plasați cele trei copii ale imaginii dvs. aici

În al doilea rând, găsiți o imagine pe care doriți să o utilizați în aplicația dvs. Să presupunem că este această pictogramă:

1611271868 315 Cum sa incarcati imagini in Xcode
Icoanele unui turn de trei pietre și o lumânare

Uau asta e mare. Este pentru că am descărcat de pe site versiunea de 512 pixeli. Cu toate acestea, vreau doar ca imaginea să aibă 20 x 20 pixeli în aplicația mea. Pentru a converti imaginea la 20 de pixeli, o voi redimensiona în Previzualizare.

Faceți trei copii ale imaginii originale. Numele imaginii dvs. ar trebui să arate cam așa: zen.png, zen@2x.png, zen@3x.png. Partea importantă este că toate fișierele au același nume (aici îl folosesc zen), iar două dintre ele se termină cu @2x și @3x. Când utilizați această convenție de denumire, Xcode va putea găsi automat dimensiunea corectă în funcție de tipul dispozitivului.

Apoi, deschideți imaginea în Previzualizare și accesați Instrumente> Ajustare dimensiune pentru a afișa meniul de mai jos. Specificați 20 x 20 pixeli. Apăsați ok și salvați modificarea. Aceasta este imaginea dvs. de bază, zen.png.

1611271868 26 Cum sa incarcati imagini in Xcode

Faceți același lucru pentru zen@2x.png. Doar acesta ar trebui să aibă 40 x 40 pixeli. Încă o dată pentru zen@3x.png. Acesta va fi de 60 x 60 pixeli.

Acum puteți trage și plasa imaginile în casetele corecte din Xcode. Terminat!