Share
Questo tutorial esaminerà i passaggi necessari per garantire che le tue app iOS continuino ad avere un bell'aspetto quando vengono visualizzate sul nuovo schermo di iPhone 5.
Per creare app compatibili con iOS 6 e iPhone 5, devi assicurarti di avere Xcode 4.5 (o successivo) e l'SDK di iOS 6 installato sul tuo computer di sviluppo. Con Xcode aperto, selezionare Xcode> Informazioni su Xcode dalla barra dei menu per verificare la versione attualmente installata.
Per ottenere gli strumenti più recenti, devi andare all'Apple Developer Center dopo esserti registrato come sviluppatore Apple.
Vorrei raccomandare di fare il passo aggiuntivo di installare sia i simulatori iOS 5.1 e iOS 5.0 sia gli "strumenti da riga di comando" dopo aver installato l'ultima versione di Xcode. Per fare ciò, selezionare Xcode> Preferenze e poi vai al download scheda. Installa le opzioni aggiuntive elencate. Quando hai finito, la finestra dovrebbe apparire così:
Dovrai includere un'immagine chiamata [email protected] nel tuo progetto per sfruttare appieno il display dell'iPhone 5. Può sembrare arbitrario, ma l'esistenza di questo file è ciò che determinerà se l'applicazione viene eseguita in modalità letterbox (cioè con bande nere sopra e sotto il contenuto) o in modalità schermo intero.
Certo, il [email protected] il file ha anche un altro scopo: sarà l'immagine predefinita mostrata quando l'applicazione viene caricata su un iPhone 5. Questa funzione ha la stessa funzione di Default.png file per dispositivi iPhone / iPod touch non retina e [email protected] file per iPhone 4 / 4S.
Quando si esegue un progetto in Xcode 4.5 senza il [email protected] file, potresti ottenere un popup automatico come questo:
In tal caso, andare avanti e fare clic su "Aggiungi" per fare in modo che Xcode crei un launcher nero solido, ricordarsi di cambiarlo in un secondo momento più appropriato per la propria applicazione.
Se non vedi il popup Xcode, puoi salvare questa immagine sul tuo computer e poi trascinarla nell'area del navigatore del progetto Xcode per aggiungerla al tuo progetto. Una semplice immagine di avvio nera non è l'ideale, ma soddisferà i requisiti e posizionerà la tua app in modalità a schermo intero.
Costruisci ed esegui il tuo progetto su un iPhone 5. Idealmente, dovresti essere bravo a non apportare ulteriori modifiche! Tuttavia, ci sono una serie di motivi per cui la tua app potrebbe non sembrare corretta alla nuova risoluzione. La seconda metà di questo tutorial coprirà le applicazioni di debug che non vengono visualizzate correttamente dopo aver seguito questo passaggio.
Gli sviluppatori iOS sono stati alquanto coccolati rispetto ai loro colleghi Android quando si tratta di visualizzare la programmazione del layout. Per cominciare, tutti gli schermi iniziali per iPhone e iPod avevano la stessa risoluzione: 320x480 pixel. Quando nel 2010 è stato introdotto il display retina utilizzato da iPhone 4 e 4S, la risoluzione dello schermo è raddoppiata a 640x960 pixel, ma gli sviluppatori erano ancora in grado di riferirsi alle dimensioni dello schermo nel codice come 320x480. Perché? Perché con iOS 4 Apple ha introdotto il concetto di "punti logici" in UIKit. Questi punti potrebbero mappare i pixel fisici in modo dinamico tramite il contentScaleFactor proprietà del UIView classe. Il contentScaleFactor è stato quindi impostato per rispecchiare in modo logico la modifica della risoluzione di default su 1.0 su iPhone 3G / 3GS e 2.0 su 4 / 4S.
Per citare la guida di disegno e stampa di Apple per iOS:
Il sistema mappa automaticamente i punti nello spazio delle coordinate della vista in pixel nello spazio delle coordinate del dispositivo, ma questa mappatura non è sempre uno a uno. Questo comportamento porta ad un fatto importante che dovresti sempre ricordare:
Un punto non corrisponde necessariamente a un pixel fisico.
Lo scopo dell'utilizzo dei punti (e del sistema di coordinate logiche) è quello di fornire una dimensione consistente di output indipendente dal dispositivo. Per la maggior parte degli scopi, la dimensione reale di un punto è irrilevante. L'obiettivo dei punti è fornire una scala relativamente coerente che è possibile utilizzare nel codice per specificare la dimensione e la posizione delle viste e il contenuto visualizzato. Il modo in cui i punti sono effettivamente mappati ai pixel è un dettaglio che viene gestito dai framework di sistema. Ad esempio, su un dispositivo con uno schermo ad alta risoluzione, una linea larga un punto potrebbe effettivamente generare una linea larga due pixel fisici. Il risultato è che se si disegna lo stesso contenuto su due dispositivi simili, con uno solo di essi con uno schermo ad alta risoluzione, il contenuto sembra avere le stesse dimensioni su entrambi i dispositivi.
Quindi, come sviluppatori iOS abbiamo avuto abbastanza facile grazie a questa innovazione. Tuttavia, con l'introduzione della risoluzione 640x1136px di iPhone 5, l'utilizzo di una dimensione verticale di 480 punti non riempirà più tutto lo spazio verticale disponibile.
Per vedere questo in azione, supponiamo che un programmatore stia cercando di aggiungere una vista di sfondo personalizzata in modo programmatico al controller della vista radice della propria applicazione. Fai finta che il programmatore abbia scritto questo codice per farlo:
UIView * customBackgroundView = [[Allocazione UIView] initWithFrame: CGRectMake (0.0f, 0.0f, 320.0f, 480.0f)]; customBackgroundView.backgroundColor = [UIColor redColor]; customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.view addSubview: customBackgroundView];
Prima dell'iPhone 5, il blocco di codice sopra avrebbe funzionato bene. I punti logici 320x480 si associano a 640x960 con il fattore di scala 2.0 predefinito di iPhone 4 / 4S. Tuttavia, su iPhone 5, l'altezza verrà comunque mappata a 960 pixel e verrà visualizzata brevemente:
Risolvere questo problema è abbastanza semplice:
UIView * customBackgroundView = [[Allocazione UIView] initWithFrame: CGRectMake (0.0f, 0.0f, self.view.frame.size.width, self.view.frame.size.height)]; customBackgroundView.backgroundColor = [UIColor redColor]; customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.view addSubview: customBackgroundView];
In questo scenario, abbiamo dovuto semplicemente modificare la dimensione della vista root corrente per posizionare la nuova vista di sfondo personalizzata sull'intera area.
Per un altro esempio, supponiamo che il programmatore volesse creare una nuova vista a livello di programmazione nel loadview: metodo:
- (void) loadView CGRect applicationFrame = [[UIScreen mainScreen] applicationFrame]; UIView * customView = [[UIView alloc] initWithFrame: applicationFrame]; customView.backgroundColor = [UIColor redColor]; customView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; self.view = customView;
Il applicationFrame proprietà di UIScreen restituirà i limiti del rettangolo del frame utilizzati per la finestra dell'applicazione corrente, meno l'area occupata dalla barra di stato (se visibile). In alternativa puoi ottenere solo il rettangolo di delimitazione dello schermo con [Limiti di [UIScreen mainScreen]]. Entrambi i valori verranno restituiti in punti logici, non in pixel.
Sebbene gli esempi di codice sopra riportati siano utili, sono anche piuttosto limitati. In pratica, potresti dover gestire scenari più complessi che implicano il dimensionamento dinamico di molte visualizzazioni secondarie a seconda dell'altezza dello schermo del dispositivo.
Fortunatamente, ci sono almeno tre diversi approcci che puoi usare per farlo.
Il UIView proprietà autoresizingMask è un mezzo semplice ma efficace per garantire che gli oggetti sotto-vista si adattino dinamicamente rispetto alla loro superview. Nello snippet di codice precedente, l'ho usato per assicurarmi che sia la larghezza che l'altezza dell'oggetto di visualizzazione dello sfondo personalizzato si adattassero in modo appropriato con le modifiche di orientamento:
customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
Si noti che il autoresizingMask la proprietà può essere controllata visivamente anche da Xcode / Interface Builder.
La maggior parte delle applicazioni che usano controlli UIKit e contenitori predefiniti dovrebbero essere in grado di funzionare perfettamente su iPhone 5 combinando i valori delle variabili per la creazione dei frame (come mostrato in precedenza) e impostando le proprietà di autoresizing intelligente nelle sottoview.
Fare riferimento alla documentazione ufficiale di Apple e alla guida alla programmazione delle viste per ulteriori informazioni.
Il nuovo sistema di layout automatico introdotto con iOS 6 fornisce un metodo avanzato per il controllo del posizionamento della vista. Layout automatico utilizza un sistema di vincoli per spiegare e rafforzare le relazioni di visualizzazione. L'unico svantaggio di utilizzare il layout automatico è che non è compatibile con iOS 5 e precedenti.
Un'ulteriore copertura di Auto Layout va oltre lo scopo di questo tutorial. Coloro che desiderano saperne di più devono consultare la Cocoa Auto Layout Guide di Apple e la sessione Introduzione al layout automatico del WWDC 2012.
Un altro approccio adottato da alcuni è quello di provare a verificare se il dispositivo corrente è un iPhone 5 in fase di esecuzione. La versione più avanzata di ciò che ho trovato proviene da questa risposta su StackOverflow.
Di seguito è riportata una versione leggermente modificata delle macro create nel post StackOverflow:
#define IS_IPHONE ([[[UIDevice currentDevice] model] isEqualToString: @ "iPhone"]) #define IS_IPOD ([[[UIDevice currentDevice] model] isEqualToString: @ "iPod touch"]) #define IS_HEIGHT_GTE_568 [[UIScreen mainScreen] limiti ] .size.height> = 568.0f #define IS_IPHONE_5 (IS_IPHONE && IS_HEIGHT_GTE_568)
Il primo e il secondo controllo macro per vedere se il dispositivo corrente è un iPhone o iPod touch utilizzando il UIDevice classe.
La terza macro controlla se l'altezza dello schermo è maggiore o uguale al valore in virgola mobile 568. Ricorda dall'alto che il [Limiti di [UIScreen mainScreen]] messaggio restituirà la finestra di delimitazione della finestra dell'applicazione nei punti logici e che 568 punti logici verranno mappati a 1136 pixel con la vista predefinita contentScaleFactor di 1,0.
Infine, la quarta macro combina due delle macro precedenti in una IS_IPHONE_5 macro che (per il momento) dovrebbe restituire VERO solo se il codice è in esecuzione su un iPhone 5. Potresti usare la versione finale nel tuo codice come questo:
if (IS_IPHONE_5) NSLog (@ "Ehi, questo è un iPhone 5! Beh, forse ... che anno è?"); else NSLog (@ "Bummer, questo non è un iPhone 5 ...");
Sebbene l'approccio sopra riportato sia potenzialmente utile, è anche soggetto a errori. Ad esempio, cosa succede se l'iPhone 6 viene rilasciato con dimensioni completamente nuove? Vorrei sconsigliare l'utilizzo di questo approccio se possibile. Invece, attenersi a Autoresizing Masks o Auto Layout se è possibile far funzionare uno di questi approcci.
Questo tutorial ha spiegato i vari metodi disponibili per ospitare il display ingrandito di iPhone 5. Se hai faticato ad adeguarti alle nuove dimensioni dello schermo, spero che tu abbia trovato utile il contenuto!
Sentiti libero di lasciare qualsiasi commento nella sezione commenti qui sotto. Puoi anche connetterti con me su Twitter, Google Plus o LinkedIN. Saluti!
Accentsconagua