Share
Cu iPad-ul și noul iPhone 4 câștigând popularitate, se pare că dispozitivele iOS se îndreaptă rapid spre afișaje de rezoluție superioară. Ecranele cu rezoluție mai mare dau, evident, o experiență mai bună pentru utilizatori, dar pentru a profita de aceasta, dezvoltatorii trebuie să își actualizeze aplicațiile. Acest articol vă va explica ce este vorba despre tot felul de probleme și cum să faceți aplicațiile dvs. să arate bine pe rezoluții mai mari, demonstrând două tehnici de optimizare grafică.
IPad are un ecran mai mare, deci are o rezoluție mai mare. Cu iPhone 4, cu toate acestea, Apple a făcut ceva diferit: au crescut rezoluția fără a schimba dimensiunea fizică a ecranului. Acest lucru face ca o densitate mai mare a pixelilor, pixelii să fie mai mici și mai bine împachetați. Intr-un centimetru patrat al ecranului iPhone 4 se afla aproximativ 106 mii pixeli (la 326 PPI sau Pixeli per Inch), in timp ce modelele mai vechi au doar 26.000 (la 163 PPI) intr-un inch - de 4 ori mai putin! Acest lucru face ca grafica pe ecran să pară ca linii continue, deoarece ochiul tău nu poate vedea pixelii individuali. Apple numește această tehnologie "ecranul retinei" deoarece afirmă că ochiul uman (retina) nu poate vedea fizic pixelii la această rezoluție.
Unul dintre marile lucruri despre dezvoltarea iPhone-ului, în comparație cu alte platforme, este că știi exact dimensiunea și rezoluția aplicației pe care ar fi afișat-o, astfel încât să poți proiecta și crea pentru a răspunde acestor dimensiuni în mod specific. Pentru a păstra acest avantaj cât mai mult posibil, Apple a dublat exact rezoluția - fiecare pixel este înlocuit cu 4 pixeli mai mici. Aceasta înseamnă că, chiar dacă alegeți să nu profitați de ecranul Retina, aplicația dvs. va arăta la fel ca în prezent.
Pe iPad, unde atât ecranul, cât și rezoluția sunt mai mari, Apple a permis "Pixel Doubling", care aruncă în aer aplicațiile dvs. la o dimensiune de 4 ori. În ceea ce privește pixelii, aplicația dvs. după dublare este de aceeași dimensiune ca și în afișajul retinei. În acest fel, trebuie să optimizați aplicația o singură dată, pentru o dublare a rezoluției - pe iPad și iPhone 4 (cu excepția cazului în care, desigur, doriți să creați o versiune specifică iPad.)
Trebuie să țineți un iPhone 4 în mâinile dvs. pentru a-ți aprecia cu adevărat ecranul și importanța actualizării graficelor aplicației. Aplicațiile optimizate arată mult mai bine decât cele care nu sunt și actualizarea nu este la fel de greu de crezut.
Deja fără a face un lucru, orice element prestabilit de Apple furnizat de Cocoa UI va fi redat la o rezoluție mai mare pe iPhone 4. Text, Web Views și altele asemenea se vor actualiza automat, așa că dacă construiți aplicația în întregime din elementele implicite de UI pe care le aveți nu există optimizări pentru afișarea retinei! Cu toate acestea, toate imaginile sau elementele de interfață personalizată ale imaginii pe care le aveți în aplicație necesită mai multă muncă.
Primul pas este să faceți o versiune de rezoluție mai mare a fiecărei imagini. Acest lucru va fi demonstrat în Photoshop, dar aceleași principii pot fi aplicate în orice program grafic.
Ori de câte ori proiectați o interfață în Photoshop, ar trebui să utilizați cât mai mult posibil metode nedistructive. Crearea de forme cu grafică vectorială, utilizând obiecte inteligente și stiluri de straturi în locul filtrelor, permite o mai mare flexibilitate în timpul procesului de proiectare. Când totul este editat, modificările mici sunt mai ușoare, iar crearea de grafice cu rezoluție mai mare devine foarte simplă.
Ca o demonstrație, vom crea un buton simplu și apoi vom face o versiune de înaltă rezoluție a acestuia.
Ar trebui să lucrați pe interfața principală în rezoluția "veche" de 320x480. Acest lucru vă va permite să aveți o idee mai bună despre ceea ce creați. Lucrând de la început pe dimensiunea completă de 640x960 ar putea fi confuză, pentru că arată foarte mare pe majoritatea monitoarelor - și când vizualizați designul pe iPhone, este posibil să descoperiți că butoanele care păreau mari în Photoshop sunt brusc mici. Cele mai multe dispozitive iOS sunt încă 320x480 și ar trebui să vizați această rezoluție atunci când proiectați.
Creați un document nou, la 320 × 480 și 163 ppi (iPhone 3G) și utilizând Instrumentul Shape, desenați un dreptunghi rotunjit. Asigurați-vă că creați un "Shape Layer" și nu desenați o formă raster sau o cale. Stilul dreptunghiului arata ca un buton cu stiluri de strat cum ar fi Gradient Overlay, Stroke, Inner Glow si Drop Shadow pentru a da o adancime si a forma.
Pentru a face versiunea mare, selectați Dimensiune imagine din meniul Imagine și dublați ppi la 326, iPhone 4 ppi. Acest lucru va dubla dimensiunea imaginii noastre la 640 × 960. Asigurați-vă că sunt bifate stilurile de scalare și faceți clic pe OK. Asigurați-vă că totul este scalat corect. Puteți adăuga mici detalii sau texturi subtile, care vor face ca aplicația dvs. să strălucească pe ecranul retinei. Aveți acum o versiune mai mare a interfeței dvs. utilizator, gata să taie și să salveze.
Acum că avem interfața noastră în rezoluția Retina, trebuie să o aplicăm aplicației noastre. Există două modalități de a face acest lucru, fiecare cu argumente pro și contra.
Modul oficial de adăugare a unei soluții de înaltă rezoluție pentru aplicația dvs. este să aveți două versiuni ale fiecărei imagini, una în rezoluție "obișnuită" și una în rezoluție dublă. Ori de câte ori aplicația dvs. este vizualizată pe ecranul Retina, imaginea mai mare va fi încărcată automat. Această metodă permite un control complet și precis al modului în care va arăta aplicația dvs. în fiecare caz și este foarte ușor de aplicat aplicațiilor existente.
Fișierul imagine de dimensiune completă ar trebui să fie denumit oricum doriți, cum ar fi "Button.png". Utilizați acest nume de imagine în codul dvs. și în interfața de creație ori de câte ori doriți să faceți referire la imagine. Imaginea cu dimensiunea dublă ar trebui să fie de două ori mai mare decât dimensiunea potrivită a imaginii mai mici și numită exact la fel cu "@ 2x" atașat la nume. În exemplul nostru, îl numim "[email protected]".
Din păcate, această tehnică nu va funcționa pe iPad; o aplicație dublată cu pixeli nu va încărca resursa de rezoluție mai mare. Acest lucru va fi probabil abordat în viitorul update iOS 4, care este programat să vină la iPad în această toamnă.
O metodă alternativă de a adăuga suport de înaltă rezoluție utilizează scalarea. Încărcați numai o resursă mare de imagine, apoi scalați-o la 50% în codul dvs. sau utilizând Interface Builder.
Pentru a face acest lucru folosind Interface Builder, creați un nou buton Round Rect (UIButton) și deschideți Inspectorul de atribute (Command-1.). Setați tipul butonului la "Custom" și selectați imaginea mare ca fundal. Scrieți ceea ce doriți în atributul Titlu și stilul butonului dacă doriți. Pentru a face dimensiunea corectă a butonului nostru, accesați fila Dimensiune și modificați lățimea și înălțimea butonului la jumătate din imaginea imaginii. Imaginea butonului, de exemplu, este de 300x102, deci butonul va fi de 150x51. Deoarece am scalat cu exact 50%, chiar și algoritmul simplu de scalare folosit de Cocoa Touch arată destul de bine, având în vedere că imaginea noastră este făcută din două pixeli și numere de pixeli cu dimensiuni egale, ușor de împărțit cu 2.
Rezultatul este la fel de bun ca imaginea dimensionată specific când este scalată, dar aceasta poate varia în funcție de imaginea utilizată. Aceeași tehnică poate fi ușor adaptată imaginilor și vederilor personalizate pentru același efect. Utilizarea acestui mod vă va oferi un control mai redus asupra modului în care aplicația dvs. va arăta pe un ecran mai mic, dar are câteva avantaje. Banda de aplicații va conține una din fiecare imagine în locul unei copii mai mici și mai mari. Dacă aplicația dvs. are o mulțime de imagini, s-ar putea să facă o diferență în dimensiunea fișierului. În plus, aceasta este în prezent singura modalitate de a avea grafică de înaltă rezoluție pe iPad atunci când dublarea pixelilor. Elementele de text și Apple UI vor fi în continuare pixelate, însă imaginile cu rezoluție mai mare vor îmbunătăți experiența utilizatorului până când Apple va adăuga suport oficial pentru rezoluția dublă pe iPad.
Accentsconagua