Lucrul cu afișajul iPhone 5

Acest tutorial va examina pașii necesari pentru a vă asigura că aplicațiile dvs. iOS vor continua să arate excelent atunci când sunt afișate pe noul ecran iPhone 5.


Descărcați cele mai recente instrumente

Pentru a crea aplicații compatibile cu iOS 6 și iPhone 5, va trebui să vă asigurați că aveți instalat Xcode 4.5 (sau o versiune ulterioară) și SDK-ul iOS 6 pe mașina dvs. de dezvoltare. Cu Xcode deschis, selectați Xcode> Despre Xcode din meniu pentru a verifica versiunea instalată curent.

Pentru a obține cele mai recente instrumente, va trebui să accesați Centrul pentru dezvoltatori Apple după ce v-ați înregistrat ca dezvoltator Apple.

Aș recomanda să faceți pasul suplimentar de instalare a simulatoarelor iOS 5.1 și iOS 5.0 și a "instrumentelor de linie de comandă" după ce instalați ultima versiune de Xcode. Pentru aceasta, selectați Xcode> Preferințe și apoi du-te la Descărcări tab. Instalați opțiunile suplimentare listate. Când ați făcut acest lucru, fereastra ar trebui să arate astfel:


Utilizați o imagine de lansare implicită pentru iPhone 5

Va trebui să includeți o imagine numită [email protected] în proiectul dvs. pentru a profita din plin de afișajul iPhone 5. Poate părea arbitrară, dar existența acestui fișier este ceea ce va determina dacă aplicația dvs. rulează în modul letterbox (adică cu benzi negre deasupra și dedesubtul conținutului) sau în modul ecran complet.

Desigur, [email protected] fișierul are și un alt scop: acesta va fi imaginea implicită afișată atunci când aplicația dvs. se încarcă pe un iPhone 5. Aceasta are aceeași funcție ca și Default.png fișier pentru dispozitive iPhone / iPod touch non-retină și [email protected] fișier pentru iPhone 4 / 4S.

Când executați un proiect în Xcode 4.5 fără [email protected] fișier, puteți obține un popup automat cum ar fi acesta:

Dacă da, continuați și faceți clic pe "Adăugați" pentru ca Xcode să creeze un lansator negru solid pentru dvs., nu uitați să îl schimbați mai târziu la ceva mai potrivit pentru aplicația dvs..

Dacă nu vedeți pop-up-ul Xcode, puteți salva această imagine în computer și trageți-l în zona de navigare a proiectului Xcode pentru ao adăuga la proiect. O imagine de lansare netedă neagră nu este ideală, dar va satisface cerința și va pune aplicația în modul ecran complet.

Construiți și rulați proiectul pe un iPhone 5. În mod ideal, ar trebui să fiți bine să mergeți fără alte ajustări! Cu toate acestea, există o serie de motive pentru care este posibil ca aplicația dvs. să nu aibă dreptate la noua rezoluție. A doua jumătate a acestui tutorial va cuprinde aplicațiile de depanare care nu se pot afișa în mod corespunzător după ce urmați acest pas.


Tranziția la dispozitivele dinamice

Dezvoltatorii iOS au fost oarecum răsfățați în comparație cu colegii lor Android atunci când vine vorba să vizualizeze programarea layout-ului. În primul rând, toate ecranele inițiale iPhone și iPod touch au avut aceeași rezoluție a afișajului: 320x480 pixeli. Când ecranul retinei utilizat de iPhone 4 și 4S a fost introdus în 2010, rezoluția afișajului sa dublat la 640x960 pixeli, însă dezvoltatorii încă erau capabil să se refere la dimensiunea ecranului în cod ca 320x480. De ce? Pentru că prin iOS 4 Apple a introdus conceptul de "puncte logice" în UIKit. Aceste puncte ar putea hărți pe pixeli fizic dinamic prin intermediul contentScaleFactor proprietate a UIView clasă. contentScaleFactor a fost apoi setat să oglindă în mod logic modificarea rezoluției, implicând 1.0 pe iPhone 3G / 3GS și 2.0 pe 4 / 4S.

Pentru a cita din Ghidul de desen și imprimare al Apple pentru iOS:


În iOS există o distincție între coordonatele pe care le specificați în codul de desen și pixelii dispozitivului de bază. Atunci când se utilizează tehnologii de desen nativ, cum ar fi Quartz, UIKit și Core Animation, spațiul coordonat al desenului și spațiul de coordonate al vederii sunt ambele spații de coordonate logice, distanțele măsurate în puncte. Aceste sisteme de coordonate logice sunt decuplate de spațiul de coordonate al dispozitivului folosit de cadrele de sistem pentru a gestiona pixelii pe ecran.

Sistemul măsoară automat punctele din spațiul de coordonate al vizualizării la pixeli în spațiul de coordonate al dispozitivului, dar această mapare nu este întotdeauna una la una. Acest comportament conduce la un fapt important pe care ar trebui să-l amintiți mereu:

Un punct nu corespunde neapărat unui pixel fizic.

Scopul utilizării punctelor (și a sistemului de coordonate logice) este de a asigura o dimensiune constantă a ieșirii care este independentă de dispozitiv. În majoritatea scopurilor, dimensiunea reală a unui punct este irelevantă. Scopul punctelor este de a oferi o scară relativ consistentă pe care o puteți utiliza în codul dvs. pentru a specifica dimensiunea și poziția vizualizărilor și conținutul redat. Modul în care punctele sunt de fapt mapate la pixeli este un detaliu care este tratat de cadrele de sistem. De exemplu, pe un dispozitiv cu un ecran cu rezoluție înaltă, o linie care are un punct lărgit poate duce de fapt la o linie care are doi pixeli fizici. Rezultatul este că, dacă desenați același conținut pe două dispozitive similare, numai unul având ecran cu rezoluție ridicată, conținutul pare să aibă aproximativ aceeași dimensiune pe ambele dispozitive.

Deci, dezvoltatorii iOS l-au avut destul de ușor datorită acestei inovații. Cu toate acestea, odată cu introducerea rezoluției de 640x1136px a iPhone 5, utilizarea unei dimensiuni verticale de 480 de puncte nu va mai umple tot spațiul disponibil vertical.

Pentru a vedea acest lucru în acțiune, presupuneți că un programator încearcă să adauge în mod programat o vizualizare personalizată de fundal la controlerul de vizualizare rădăcină a aplicației lor. Pretindeți că programatorul a scris acest cod pentru a face acest lucru:

 UIView * customBackgroundView = [[UIView alocare] initWithFrame: CGRectMake (0.0f, 0.0f, 320.0f, 480.0f)]; customBackgroundView.backgroundColor = [UICcolor redColor]; customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.view addSubview: customBackgroundView];

Înainte de iPhone 5, blocul de cod de mai sus ar fi funcționat foarte bine. Punctele logice de 320x480 ar fi mapate la 640x960 cu factorul de scală implicit 2.0 al iPhone 4 / 4S. Cu toate acestea, pe iPhone 5, înălțimea va fi încă cartografiată la 960 de pixeli și va apărea scurt:

Rezolvarea acestei probleme este destul de simplă:

 UIView * customBackgroundView = [[UIView alocare] initWithFrame: CGRectMake (0.0f, 0.0f, self.view.frame.size.width, self.view.frame.size.height)]; customBackgroundView.backgroundColor = [UICcolor redColor]; customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.view addSubview: customBackgroundView];

În acest scenariu, a trebuit doar să tragem dinamic dimensiunea ecranului rădăcină curent pentru a plasa noua vizualizare de fundal personalizată pe întreaga suprafață.

Pentru un alt exemplu, să presupunem că programatorul a vrut să creeze o nouă vizualizare în program loadView: metodă:

 - (void) loadView aplicația CGRectFrame = [[UIScreen mainScreen] applicationFrame]; UIView * customView = [[UIView alocare] initWithFrame: applicationFrame]; customView.backgroundColor = [UICcolor redColor]; customView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; self.view = customView; 

applicationFrame proprietatea UIScreen va returna limitele dreptunghiului cadrului utilizate pentru fereastra aplicației curente, minus zona ocupată de bara de stare (dacă este vizibilă). Alternativ, puteți obține doar dreptunghiul delimitator al ecranului cu [[UIScreen mainScreen] limite]. Ambele valori vor fi returnate în puncte logice, nu în pixeli.

În timp ce exemplele de cod de mai sus sunt utile, ele sunt, de asemenea, oarecum limitate. În practică, este posibil să aveți de-a face cu scenarii mai complexe care implică dimensionarea dinamică a mai multor subviewuri în funcție de înălțimea ecranului dispozitivului.

Din fericire, există cel puțin trei abordări diferite pe care le puteți utiliza pentru a face acest lucru.

Afișează Autoresize

UIView proprietate autoresizingMask este un mijloc simplu dar eficient pentru a se asigura că obiectele sub-vizuale se ajustează dinamic în raport cu supravegherea lor. În fragmentul de cod de mai sus, am folosit acest lucru pentru a vă asigura că atât lățimea cât și înălțimea obiectului de vizualizare particularizată de fundal s-ar potrivi corespunzător cu modificările de orientare:

 customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

Rețineți că autoresizingMask proprietatea poate fi controlată vizual din interiorul Xcode / Interface Builder.

Cele mai multe aplicații care folosesc comenzile UIKit și containerele implicite ar trebui să poată funcționa foarte bine pe iPhone 5 prin combinarea valorilor variabilelor pentru crearea cadrelor (după cum se arată mai devreme) și setarea proprietăților inteligente de autorezonare pe subrevisele.

Consultați documentația oficială Apple și ghidul de programare a vizualizării pentru mai multe informații.

Sistemul de configurare automată

Noul sistem Auto Layout introdus cu iOS 6 oferă o metodă avansată pentru controlul poziționării în vizualizare. Auto Layout utilizează un sistem de constrângeri pentru a explica și impune relațiile de vizualizare. Singurul dezavantaj în utilizarea funcției Auto Layout este că nu este compatibil cu iOS 5 și anterior.

Acoperirea suplimentară a funcției Auto Layout este dincolo de scopul acestui tutorial. Cei care doresc să învețe mai multe ar trebui să consulte Ghidul de aspect Cocoa Auto de la Apple și sesiunea introductivă WWDC 2012 Introducere în Auto Layout.

Testarea dispozitivelor

O altă abordare adoptată de unii este încercarea de a verifica dacă dispozitivul curent este un iPhone 5 în timpul rulării. Cea mai avansată versiune a acestui lucru am găsit din acest răspuns pe StackOverflow.

Următoarea este o versiune ușor modificată a macrocomenzilor create în postul StackOverflow:

 #define IS_IPHONE (modelul UIDevice currentDevice esteEqualToString: @ "iPhone"]) #define IS_IPOD (modelul [[[UIDevice currentDevice] esteEqualToString: @ "iPod touch"]) #define IS_HEIGHT_GTE_568 [[UIScreen mainScreen] ] .size.height> = 568.0f #define IS_IPHONE_5 (IS_IPHONE && IS_HEIGHT_GTE_568)

Primul și al doilea macro verifică dacă dispozitivul curent este un iPhone sau un iPod touch utilizând UIDevice clasă.

Cea de-a treia macrocomandă verifică dacă înălțimea ecranului este mai mare sau egală cu valoarea 568 în virgulă mobilă. Amintiți-vă de mai sus că [[UIScreen mainScreen] limite] mesajul va returna caseta de restricție a ferestrei aplicației în puncte logice și că 568 de puncte logice vor fi mapate la 1136 pixeli cu afișarea implicită contentScaleFactor de 1,0.

În cele din urmă, cea de-a patra macrocomandă combină două dintre macrocomenzile anterioare IS_IPHONE_5 macro (care deocamdată) ar trebui să returneze doar TRUE dacă codul rulează pe un iPhone 5. Ai putea folosi versiunea finală în propriul cod ca acesta:

 dacă (IS_IPHONE_5) NSLog (@ "Hei, acesta este un iPhone 5! Ei bine, poate ... ce an este?");  altceva NSLog (@ "Bummer, acest lucru nu este un iPhone 5 ..."); 

Deși abordarea de mai sus este potențial utilă, este, de asemenea, predispusă la erori. De exemplu, ce se întâmplă dacă iPhone-ul 6 este lansat cu dimensiuni complet noi? Aș sfătui să nu folosiți această abordare dacă este posibil. În schimb, lipiți de Mască de auto-redresare sau Auto Layout dacă puteți face una dintre aceste abordări să funcționeze.


Învelire

Acest tutorial a explicat diferitele metode disponibile pentru a activa ecranul iPhone 5 extins. Dacă v-ați străduit să vă adaptați la dimensiunea ecranului nou, sperăm că ați găsit conținutul util!

Simțiți-vă liber să lăsați orice comentariu pe care îl aveți în secțiunea de comentarii de mai jos. De asemenea, puteți să vă conectați cu mine pe Twitter, Google Plus sau LinkedIN. Noroc!

Cod