spiegazione immagini Xcode

Question

Cosa rende un'immagine 1x, 2x o 3x (@ 1x, @ 2x, @ 3x)? Come puoi creare un'immagine 3x?

Answer 1

IOS utilizza punti invece di pixel nei suoi sistemi di coordinate. Nei dispositivi non retina originali (iPhone, iPhone3G, iPhone3GS, iPad, iPad 2, iPad mini e iPod touch precedenti) un punto nel sistema di coordinate mappato su un pixel sullo schermo del dispositivo. A quel tempo, la vita era semplice, hai fornito immagini alla tua app che corrispondeva alla dimensione in punti e tutto sembrava fantastico.

Quando Apple ha introdotto i primi dispositivi di visualizzazione retina (iPhone 4, iPad con Retina Display e iPod touch 4), i dispositivi avevano 2 pixel per ogni punto. Apple ha escogitato un modo intelligente per affrontare questo. Il programmatore ha dovuto aggiungere una seconda immagine al loro programma con la risoluzione aumentata e aggiungere @ 2x al nome. Non sono state necessarie modifiche al codice. Se il tuo codice carica un'immagine chiamata "house", iOS caricherà "house" su un dispositivo non retina (come l'iPad 2 o l'iPad mini originale) e utilizzerà "house @ 2x" per i dispositivi retina. L'iPhone 6 Plus ha una risoluzione ancora maggiore quindi utilizza una versione @ 3x.

Quindi cosa rende un'immagine @ 1x, @ 2x o @ 3x? Se la tua immagine "casa" è 120 pixel per 90 pixel, l'immagine "casa @ 2x" dovrebbe essere 240 per 180 pixel, ovvero il doppio del numero di pixel in ogni dimensione ("2x" in breve). La versione "house @ 3x" dovrebbe essere 360 ​​per 270 (3 volte il numero di pixel in ogni dimensione).

Sta a te fare in modo che le versioni @ 2x e @ 3x abbiano più dettagli e non solo più pixel. È possibile utilizzare un programma come Photoshop o Pixelmator per creare le immagini. Inizia creando la bella versione altamente dettagliata della tua immagine (la versione @ 3x), quindi ridimensionala alla risoluzione @ 2x e salvala come versione @ 2x. Quindi apri nuovamente la tua versione @ 3x e ridimensiona la risoluzione @ 1x e salvala come versione @ 1x. Aggiungi tutte e tre le versioni al Catalogo delle risorse in Xcode e iOS caricherà la versione appropriata per i dispositivi appropriati.

Answer 2

Leggere questo per conoscere le diverse risoluzioni:

http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Se siete alla ricerca di un modo economico e semplice per creare la grafica, che esporterà in tutte e tre le dimensioni, ottenere Sketch 3:

http://bohemiancoding.com/sketch/

Con Sketch è possibile creare un'immagine e quindi esportarla immediatamente in qualsiasi classe di dimensione necessaria.

Ecco le istruzioni passo passo di Photoshop per modificare le dimensioni. Se hai un disegno vettoriale - linee e altre forme - puoi iniziare da qualsiasi dimensione e aumentare o diminuire le dimensioni. Le tre foto sottostanti mostrano come aumentare le dimensioni dell'immagine. Se hai un'immagine come un jpeg, allora vorrai iniziare in grande e lavorare più piccolo per evitare distorsioni.