Share
Con l'iPad e il nuovo iPhone 4 guadagnando popolarità, sembra che i dispositivi iOS si stiano rapidamente dirigendo verso display a risoluzione più elevata. Gli schermi a risoluzione più elevata offrono ovviamente un'esperienza utente migliore, ma per trarne vantaggio, gli sviluppatori devono aggiornare le loro applicazioni. Questo articolo spiegherà di cosa si tratta e come rendere le tue applicazioni migliori con risoluzioni più elevate dimostrando due tecniche per l'ottimizzazione della grafica.
L'iPad ha uno schermo più grande e quindi ha una risoluzione maggiore. Con l'iPhone 4, tuttavia, Apple ha fatto qualcosa di diverso: hanno aumentato la risoluzione senza modificare le dimensioni fisiche dello schermo. Ciò consente una densità di pixel più elevata, i pixel sono più piccoli e più compatti. In un pollice quadrato dello schermo di iPhone 4 ci sono circa 106 mila pixel (a 326 PPI, o Pixel per pollice), mentre i modelli più vecchi hanno solo circa 26 mila (a 163 PPI) in un pollice - 4 volte di meno! Ciò rende la grafica sullo schermo come linee continue, perché l'occhio non può vedere i singoli pixel. Apple chiama questa tecnologia il "Retina Display" perché afferma che l'occhio umano (la retina) non può fisicamente vedere i pixel a questa risoluzione.
Una delle grandi cose dello sviluppo di iPhone, rispetto ad altre piattaforme, è che conosci le dimensioni e la risoluzione precise su cui verrà visualizzata la tua applicazione, in modo da poter progettare e creare appositamente per soddisfare tali dimensioni. Per mantenere questo vantaggio il più possibile, Apple ha raddoppiato la risoluzione esattamente - ogni pixel è sostituito da 4 pixel più piccoli. Ciò significa che anche se scegli di non sfruttare il Retina Display, la tua applicazione apparirà come oggi.
Sull'iPad, dove sia lo schermo che la risoluzione sono più grandi, Apple ha permesso "Pixel Doubling", che fa esplodere le tue applicazioni fino a 4 volte le sue dimensioni. In termini di pixel, l'applicazione dopo il raddoppio ha le stesse dimensioni del display Retina. In questo modo è necessario ottimizzare l'applicazione una sola volta, per raddoppiare la risoluzione - su iPad e iPhone 4 (a meno che, naturalmente, non si voglia creare una versione specifica per iPad).
Devi tenere in mano un iPhone 4 per apprezzare veramente lo schermo e l'importanza di aggiornare la grafica dell'applicazione. Le applicazioni ottimizzate hanno un aspetto notevolmente migliore rispetto a quelle che non lo sono e l'aggiornamento non è così difficile come si potrebbe pensare.
Già senza fare nulla, tutti gli elementi di Cocoa UI forniti da Apple verranno renderizzati a una risoluzione più alta su iPhone 4. Anche il testo, le viste Web e simili si aggiorneranno automaticamente, quindi se costruisci la tua applicazione completamente fuori dagli elementi dell'interfaccia utente di default hai nessuna ottimizzazione da fare per il display retina! Tuttavia, qualsiasi immagine o elementi dell'interfaccia utente personalizzati basati su immagini che potresti avere nella tua applicazione richiedono un po 'più di lavoro.
Il primo passo è fare una versione a risoluzione più alta di ciascuna delle tue immagini. Questo sarà dimostrato in Photoshop ma gli stessi principi possono essere applicati in qualsiasi programma di grafica.
Ogni volta che si progetta un'interfaccia in Photoshop, è necessario utilizzare il più possibile metodi non distruttivi. La creazione di forme con la grafica vettoriale, l'utilizzo di oggetti intelligenti e stili di livello invece dei filtri consente una maggiore flessibilità durante il processo di progettazione. Quando tutto è modificabile, apportare piccole modifiche è più semplice e la creazione di grafica a risoluzione più elevata diventa molto semplice.
Come dimostrazione, creeremo un semplice pulsante e ne creeremo una versione ad alta risoluzione.
Dovresti lavorare sull'interfaccia principale nella "vecchia" risoluzione "di 320x480. Questo ti permetterà di avere un'idea migliore di ciò che stai creando. Lavorare fin dall'inizio sull'intera dimensione 640x960 potrebbe essere fonte di confusione, perché sembra enorme sulla maggior parte dei monitor e, quando visualizzi il tuo design sull'iPhone, potresti scoprire che i pulsanti che sembravano grandi in Photoshop sono improvvisamente minuscoli. La maggior parte dei dispositivi iOS è ancora 320x480 e, quando si progetta, si dovrebbe scegliere tale risoluzione.
Crea un nuovo documento, a 320 × 480 e 163 ppi (iPhone 3G) e usando lo Strumento forma, disegna un rettangolo arrotondato. Assicurati di creare un "Shape Layer" e non di disegnare una forma raster o un tracciato. Modella il rettangolo in modo che assomigli ad un pulsante con stili di livello come Sovrapposizione sfumatura, Traccia, Bagliore interno e Ombra esterna per conferirgli profondità e forma.
Per rendere la versione grande, selezionare Dimensione immagine dal menu Immagine e raddoppiare il ppi a 326, iPhone 4 ppi. Questo raddoppierà la nostra dimensione dell'immagine a 640 × 960. Assicurati che Scala stili sia selezionato e fai clic su OK. Assicurati che tutto sia stato ridimensionato correttamente. Puoi aggiungere piccoli dettagli o trame sottili che faranno davvero brillare la tua applicazione sul display Retina. Ora hai una versione più grande dell'interfaccia utente, pronta per essere suddivisa e salvata.
Ora che abbiamo la nostra interfaccia in Retina-resolution, dobbiamo applicarla alla nostra applicazione. Ci sono due modi per farlo, ciascuno con pro e contro.
Il modo ufficiale di aggiungere il supporto ad alta risoluzione alla tua applicazione consiste nell'avere due versioni di ciascuna immagine, una in risoluzione "normale" e una in doppia risoluzione. Ogni volta che la tua applicazione viene visualizzata sul display Retina, l'immagine più grande verrà caricata automaticamente. Questo metodo consente di controllare in modo completo e preciso l'aspetto dell'applicazione in ciascun caso ed è molto semplice da applicare alle applicazioni esistenti.
Il file immagine a dimensione intera dovrebbe essere denominato, tuttavia, come si desidera, ad esempio "Button.png". Usa questo nome immagine nel tuo codice e Interface Builder ovunque tu voglia fare riferimento all'immagine. L'immagine a doppia dimensione dovrebbe essere due volte più grande della sua immagine più piccola corrispondente e denominata esattamente uguale a "@ 2x" aggiunta al nome. Nel nostro esempio, lo chiameremmo "[email protected]".
Sfortunatamente, questa tecnica non funzionerà sull'iPad; un'applicazione con pixel raddoppiata non caricherà la risorsa con risoluzione più alta. Questo sarà probabilmente affrontato nel futuro aggiornamento di iOS 4, che è previsto per iPad questo autunno.
Un metodo alternativo per aggiungere il supporto ad alta risoluzione sta usando il ridimensionamento. Caricherai solo la risorsa immagine grande, quindi ridimensionala al 50% nel codice o utilizzando Interface Builder.
Per fare ciò utilizzando Interface Builder, crea un nuovo Round Rect Button (UIButton) e apri l'Inspector Attributes (Command-1.) Imposta il tipo di pulsante su "Custom" e seleziona l'immagine grande come sfondo. Scrivi quello che vuoi nell'attributo Title e modellalo ulteriormente se lo desideri. Per rendere il nostro pulsante delle dimensioni corrette, vai alla scheda Dimensioni e modifica la larghezza e l'altezza del pulsante a metà di quelle dell'immagine. L'immagine del pulsante, per esempio, è 300x102, quindi il pulsante sarà 150x51. Dato che stiamo ridimensionando esattamente del 50%, anche il semplice algoritmo di ridimensionamento utilizzato da Cocoa Touch sembra piuttosto buono, dato che la nostra immagine è composta da 2 tratti di pixel e dimensioni in pixel pari, che sono facili da dividere per 2.
Il risultato è buono come l'immagine di dimensioni specifiche quando è ridimensionato, ma questo può variare a seconda dell'immagine utilizzata. La stessa tecnica può essere facilmente adattata a immagini e visualizzazioni personalizzate per lo stesso effetto. L'utilizzo di questo modo ti darà meno controllo su come l'applicazione apparirà su uno schermo più piccolo, ma presenta alcuni vantaggi. Il pacchetto dell'app conterrà una sola immagine anziché una copia più piccola e più grande. Se la tua applicazione ha molte immagini, potrebbe effettivamente fare la differenza nella dimensione del file. Inoltre, questo è attualmente l'unico modo per avere una grafica ad alta risoluzione sull'iPad quando si raddoppia il pixel. Gli elementi di testo e di interfaccia utente Apple saranno ancora pixelati, ma immagini a risoluzione più elevata miglioreranno l'esperienza dell'utente fino a quando Apple non aggiungerà il supporto ufficiale per la doppia risoluzione sull'iPad.
Accentsconagua