Sådan uploades billeder til Xcode

For at bruge billeder i Xcode skal du uploade dem til Assets.xcassets, der findes i Supporting Filesmappen. Der er to muligheder, du kan gå med: bitmaps (aka pngfiler) eller vektorer (aka .pdffiler). Det første trin er at beslutte, hvilken filtype du vil bruge.

Forskellen mellem bitmaps og vektoraktiver

De fleste tutorials online bruger bitmapaktiver, som er .pngfiler. Dette kræver, at du trækker over 3 kopier af billedet til Xcode.

Der er dog en tankegang, der mener, at vektoraktiver er overlegne. Denne artikel har en god forklaring på, hvorfor det er tilfældet. Vektoraktiver er .svgfiler (eller .pdffor Xcode). Hvis du vælger at bruge vektoraktiver, skal du kun uploade en version af billedet til Xcode.

Her er hvad jeg har hørt fra de meget klogere, da I – Android-telefoner bruger algoritmer fra vektoraktivet til at generere billedet i den ønskede størrelse. Det giver mening i betragtning af den store bredde af enheder og skærmstørrelser til Android.

Men vektoraktiver i iPhones skaleres faktisk ikke med algoritmer (tilsyneladende). Så du får ikke billeder af højere kvalitet ved at bruge vektorer over bitmaps. I stedet for, hvad du får, er den samme kvalitet som bitmap. IPhone tager simpelthen "vektor" -aktivet og konverterer det til de samme tre bitmapstørrelser.

Bortset fra algoritmelogikken ovenfor er der nogle fåmere objektive fordele ved at bruge vektoraktiver til iPhones.

  1. Reducerer sandsynligheden for menneskelige fejl. Lige nu er der tre bitmapstørrelser (1x, 2x, 3x). Det betyder, at du skal uploade tre billeder til dine aktiver. Det er tre muligheder for ved et uheld at trække og slippe det forkerte billede. Når du bruger vektoraktiver (som kommer op som universelle i Xcode), behøver du kun at uploade et billede i stedet for tre. Der er mindre chance for at uploade den forkerte størrelse eller billede.
  2. Hastighed. Samme grund som nr. 1. Hvis du bruger mange billeder i din app, reducerer brugen af ​​vektoraktiver antallet af billeder, du har brug for at uploade, med en tredjedel.
  3. Fremtidig korrektur. IPhone bruger i øjeblikket kun tre billedstørrelser (1x, 2x, 3x). Dette har at gøre med skærmernes øgede nethindekvalitet. Da Apple introducerede de høje nethindeskærme for et par år siden, steg antallet af pixels pr. Punkt for et skarpere billede.

    Det synes ekstremt sandsynligt, at lignende teknologiske stigninger fortsat vil forekomme. I fremtiden skal vi muligvis uploade 4x, 5x og 6x billeder. Hvis vi bruger et vektoraktiv, skalerer appen billedet for os. Dette sparer os for at tabe de nye størrelser af bitmap-aktivet.

    Selvom jeg er nødt til at indrømme, at jeg er lidt forvirret over dette, da iPhone-vektoraktiver faktisk ikke virker på algoritmer. Så jeg er ikke sikker på, hvordan de automatisk skaleres til større størrelser. Men min kloge mentor forklarede dette, og jeg stoler på ham!

Den ene store ulempe ved at bruge vektoraktiver i Xcode er, at de fleste steder ikke leverer .pdffilen. Du skal konvertere det fra .svgdig selv.

Opdatering 18. juni 2017 : Apple har meddelt i WWDC, at iOS nu understøtter ægte skalarbilleder! Eller i det mindste, det er, hvad jeg tror, ​​de meddelte. Nu er der endnu mere grund til at bruge en enkelt skala.

Sådan uploades et vektoraktiv

Gå til attributmenuen. Skift skalaer til "enkelt skala", og marker afkrydsningsfeltet til størrelse for at "bevare vektordata". Dette ændrer uploadindstillingen til “alle” i stedet for 1x, 2x, 3x.

Derefter trækker du og slipper din .pdffil i det ene slot. Jeg er ikke for sikker på, hvordan jeg konverterer .svgtil .pdfendnu, men jeg antager, at det er ret nemt med Preview.

Sådan uploades .png-filer

Hvis du beslutter at gå videre med .png, skal du uploade tre versioner af din fil. Dette er for at dække de forskellige skærmopløsninger på de forskellige iPhones.

Først skal du sikre dig, at "skalaer" i attributmenuen er indstillet til "individuelle skalaer". Dette er standardindstillingen, og den viser dig tre slots, som du skal udfylde:

For det andet skal du finde et billede, som du vil bruge i din app. Lad os antage, at det er dette ikon:

Wow det er stort. Det er fordi jeg downloadede 512 pixel-versionen fra siden. Jeg vil dog kun have, at billedet skal være 20 x 20 pixels i min app. For at konvertere billedet til 20 pixels skal jeg ændre størrelsen på det i Preview.

Lav tre kopier af det originale billede. Navnene på dit billede skal se nogenlunde sådan her: zen.png, [email protected], [email protected]. Den vigtige del er, at filerne alle har samme navn (her bruger jeg zen), og to af dem slutter med @2xog @3x. Når du bruger denne navngivningskonvention, kan Xcode automatisk finde den korrekte størrelse baseret på enhedstypen.

Åbn derefter billedet i Preview, og gå til Tools> Justér størrelse for at åbne menuen nedenfor. Angiv 20 x 20 pixels. Tryk på ok, og gem ændringen. Dette er dit basisbillede zen.png.

Gør det samme for [email protected]. Kun dette skal være 40 x 40 pixels. En gang til [email protected]. Dette vil være 60 x 60 pixels.

Nu kan du trække og slippe billederne i de korrekte felter i Xcode. Færdig!