{"id":4938,"date":"2010-11-04T13:21:20","date_gmt":"2010-11-04T12:21:20","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=4938"},"modified":"2010-11-04T13:21:20","modified_gmt":"2010-11-04T12:21:20","slug":"t079-ottimizzare-la-grafica-delle-nostre-applicazioni-iphone-per-il-retina-display","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t079-ottimizzare-la-grafica-delle-nostre-applicazioni-iphone-per-il-retina-display\/","title":{"rendered":"T#079 – Ottimizzare la grafica delle nostre Applicazioni iPhone per il Retina Display"},"content":{"rendered":"

\"t079-ottimizzare-applicazioni-per-il-Retina-Display-01\"<\/a> Con l’arrivo sul mercato degli ultimi modelli di iDevices: iPhone 4 e iPod Touch 4G, entrambi dotati dell’ormai famoso “retina display”, per gli sviluppatori \u00e8 nata l’esigenza di pianificare l’ottimizzazione della grafica delle loro applicazioni (esistenti e in sviluppo) per i differenti display esistenti. Ogni sviluppatore dovrebbe preoccuparsi infatti di far si che le sue creazioni vengano visualizzate al meglio sia sui precedenti device (iPhone 3G, 3GS, e iPod Touch vari) che su quelli di ultima generazione, che godono appunto di una risoluzione maggiore.<\/p>\n

Cominciamo con il dire (se qualcuno ancora non lo sapesse) che il Retina Display introdotto nel nuovo iPhone gode di una risoluzione di 960\u00d7640 con una densit\u00e0 di pixel di 326 pixel per pollice. Questo significa che se la nostra grafica \u00e8 ottimizzata esclusivamente per la risoluzione di 480×320 (dei “vecchi” device), \u00e8 evidente che su un display di ultima generazione, il quale offre quattro volte il numero di pixel degli display precedenti , l’immagine risulter\u00e0 inevitabilmente sgranata!<\/p>\n

Ora, non voglio certo proporvi la guida definitiva per risolvere tutte le situazioni possibili e immaginabili, ma proporvi semplicemente un buon punto di partenza, che sicuramente sar\u00e0 utile a molti di voi. Vedremo, con un piccolo esempio, un semplice metodo per ottimizzare un’immagine presente nel nostro programma e l’icona del programma stesso.<\/p>\n

Prepariamo la grafica per il nostro esempio<\/h4>\n

Come ben saprete, fino ad oggi dovevamo prevedere 2 icone per la nostra applicazione, o meglio la stessa icona di 2 differenti dimensioni. Una, pari a 57×57 pixel, quella che verr\u00e0 poi mostrata nella springboard e che occorre inserire all’interno del progetto e l’altra di 512×512 pixel (da non inserire all’interno dell’applicazione), che verr\u00e0 poi inviata ad Apple e utilizzata all’interno dell’App Store. Oggi dovremo prevedere una terza dimensione per la nostra icona, ottimizzata appunto per i retina display, che dovr\u00e0 avere dimensioni 114×114 pixel. Ovviamente sar\u00e0 conveniente partire da quella pi\u00f9 grande (512×512) per poi ricavare quelle pi\u00f9 piccole tramite semplice ridimensionamento dell’immagine stessa, prima quella da 114×114 e infine quella da 57×57.<\/p>\n

Per quanto riguarda le immagini del nostro esempio, invece, dovranno essere presenti nel progetto in due grandezze differenti: 480×320 (per i “vecchi” dispositivi) e 960×640 pixel (per in nuovi).<\/p>\n

Le dimensioni non bastano, dovremmo infatti preoccuparci di qualche altro piccolo accorgimento. Vediamo di cosa si tratta con il nostro piccolo esempio pratico.<\/p>\n

Partiamo con il progetto<\/h4>\n

Apriamo Xcode > New Project > View Based Application. Diamo un nome a piacere alla nostra applicazione e proseguiamo.<\/p>\n

Importiamo all’interno del nostro progetto 4 file grafici precedentemente preparati secondo le specifiche riportate sopra (sia le icone che le immagini), trascinandole semplicemente all’interno della cartella “Resources” in Xcode. Facciamo attenzione a mettere la spunta su “Copy items into destination group\u2019s folder (if needed)”, che far\u00e0 in modo di copiare i file all’interno della cartella di destinazione.<\/p>\n


\n\"t079-ottimizzare-applicazioni-per-il-Retina-Display-02\"<\/a>
\n<\/center><\/p>\n

Assicuriamoci che l’icona ottimizzata per i vecchi iPhone sia nominata “icon.png” e quella per iPhone 4 “icon@2x.png” e che le immagini siano nominate rispettivamente “wallpaper.jpg” e “wallpaper@2x.jpg”.<\/p>\n

Apriamo il file .plist ed aggiungiamo una nuova riga sotto la voce “icon files” per settare le 2 icone.<\/p>\n


\n\"t079-ottimizzare-applicazioni-per-il-Retina-Display-03\"<\/a>
\n<\/center><\/p>\n

Salviamo il file plist e chiudiamolo.<\/p>\n

Facciamo ora doppio-click sul file “ViewController.xib” che aprir\u00e0 Interface Builder. Aggiungiamo quindi una semplice “UIImageView” (di dimensione che prenda tutto lo schermo) alla nostra View. Andiamo a selezionare l’immagine da visualizzare all’interno dell’ “Image View” ed ecco un primo “strano” comportamento che richiede la nostra attenzione. Ci accorgeremo infatti di una cosa:<\/p>\n


\n\"t079-ottimizzare-applicazioni-per-il-Retina-Display-04\"<\/a>
\n<\/center><\/p>\n

Nonostante abbiamo importato nel progetto diverse immagini, per la precisione 4, (2 icone e 2 immagini di dimensioni e nome file differenti) potremmo scegliere soltanto tra 2 di essi, (nel nostro esempio i file .png e .jpg)!<\/p>\n

Perch\u00e8? Dove sono finiti i file “…@2x.png” e “…@2x.jpg” ?!?<\/p>\n

Ed ecco che l’ambiente di sviluppo ci viene incontro semplificandoci la vita. Le immagini che terminano per “@2x.png” o “@2x.jpg” sono infatti quelle che il sistema sostituir\u00e0 automaticamente alle rispettive .png e .jpg quando l’applicazione verr\u00e0 installata su un dispositivo con display Retina !!!<\/p>\n

Tutto qui!<\/p>\n

Se da una parte avremo pi\u00f9 lavoro lato grafica, almeno non dovremmo preoccuparci di gestire il tutto via codice se non con questi piccoli accorgimenti.<\/p>\n

Naturalmente per ottimizzare applicazioni pi\u00f9 complesse (tipo giochi) che sfruttano magari OpenGL e via dicendo, le cose probabilmente si complicano notevolmente, ma questo non fa per me \ud83d\ude09<\/p>\n

Salviamo e chiudiamo IB. Da Xcode compiliamo la nostra applicazione ed ecco apparire il risultato sul simulatore iPhone:<\/p>\n


\n\"t079-ottimizzare-applicazioni-per-il-Retina-Display-05\"<\/a>
\n<\/center><\/p>\n

Adesso dobbiamo vedere se tutto funziona per bene anche sul retina display!<\/p>\n

Dal men\u00f9 del simulatore apriamo Hardware > Dispositivo > iPhone (Retina)<\/p>\n


\n\"t079-ottimizzare-applicazioni-per-il-Retina-Display-06\"<\/a>
\n<\/center><\/p>\n

Apriamo nuovamente la nostra applicazione e noteremo che sul retina display verr\u00e0 visualizzata l’immagine da noi preparata per iPhone 4 (per rendere le differenze pi\u00f9 evidenti ho pensato di aggiungere una scritta rossa nella versione retina, che potesse identificare meglio le immagini utilizzate nell’esempio).<\/p>\n


\n\"t079-ottimizzare-applicazioni-per-il-Retina-Display-07\"<\/a>
\n<\/center><\/p>\n

In conclusione<\/h4>\n

Il mio esempio non risolver\u00e0 sicuramente tutte le situazioni, ma \u00e8 sicuramente un buon punto di partenza per cominciare ad ottimizzare le nostre applicazioni per i nuovi display!<\/p>\n

Alla prossima<\/p>\n

\"\"<\/a> Se avete problemi con il tutorial, questo \u00e8 il nostro file di progetto.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Con l’arrivo sul mercato degli ultimi modelli di iDevices: iPhone 4 e iPod Touch 4G, entrambi dotati…<\/p>\n","protected":false},"author":489,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[24,472,471,211,467],"class_list":["post-4938","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-interface-builder","tag-ottimizzare-grafica-iphone","tag-ottimizzare-grafica-retina","tag-ragazzetto","tag-retina-display"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/4938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/489"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=4938"}],"version-history":[{"count":6,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/4938\/revisions"}],"predecessor-version":[{"id":4998,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/4938\/revisions\/4998"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=4938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=4938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=4938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}