Share
Ce didacticiel passera en revue les étapes nécessaires pour que vos applications iOS continuent d'avoir une belle apparence lorsqu'elles sont affichées sur le nouvel écran de l'iPhone 5..
Pour créer des applications compatibles avec iOS 6 et l'iPhone 5, vous devez vous assurer que vous disposez de Xcode 4.5 (ou version ultérieure) et du SDK iOS 6 installés sur votre ordinateur de développement. Avec Xcode ouvert, sélectionnez Xcode> À propos de Xcode depuis la barre de menus pour vérifier la version actuellement installée.
Pour obtenir les derniers outils, vous devez vous rendre au Centre de développement Apple après vous être inscrit en tant que développeur Apple..
Je vous recommande de suivre l'étape supplémentaire consistant à installer les simulateurs iOS 5.1 et iOS 5.0 ainsi que les "outils de ligne de commande" après avoir installé la dernière version de Xcode. Pour ce faire, sélectionnez Xcode> Préférences et ensuite aller au Téléchargements languette. Installez les options supplémentaires répertoriées. Lorsque vous avez terminé, la fenêtre devrait ressembler à ceci:
Vous devrez inclure une image nommée [email protected] dans votre projet afin de tirer pleinement parti de l'écran de l'iPhone 5. Cela peut sembler arbitraire, mais l’existence de ce fichier est ce qui déterminera si votre application fonctionne en mode boîte aux lettres (c'est-à-dire avec des bandes noires au-dessus et en dessous du contenu) ou en mode plein écran.
Bien sûr, le [email protected] Ce fichier a également une autre fonction: il s’agira de l’image par défaut affichée lors du chargement de votre application sur un iPhone 5. Elle remplit la même fonction que le Default.png fichier pour les appareils iPhone / iPod touch sans rétine et le [email protected] fichier pour l'iPhone 4 / 4S.
Lors de l’exécution d’un projet dans Xcode 4.5 sans le [email protected] fichier, vous pouvez obtenir un popup automatique comme celui-ci:
Si tel est le cas, continuez et cliquez sur "Ajouter" pour que Xcode crée un lanceur noir solide pour vous. Rappelez-vous simplement de le changer plus tard pour quelque chose de plus approprié pour votre application..
Si vous ne voyez pas la fenêtre contextuelle Xcode, vous pouvez enregistrer cette image sur votre ordinateur, puis la faire glisser dans la zone de navigation du projet Xcode pour l'ajouter à votre projet. Une image de lancement tout en noir n'est pas idéale, mais elle satisfera à l'exigence et place votre application en mode plein écran..
Construisez et exécutez votre projet sur un iPhone 5. Idéalement, vous devriez pouvoir continuer sans aucun ajustement supplémentaire! Cependant, il existe plusieurs raisons pour lesquelles votre application peut ne pas regarder correctement la nouvelle résolution. La deuxième moitié de ce didacticiel couvrira les applications de débogage dont l'affichage ne s'affiche pas correctement après avoir suivi cette étape..
Les développeurs iOS ont été un peu choyés par rapport à leurs pairs Android en ce qui concerne la programmation de la mise en page. Pour commencer, tous les écrans initiaux de l'iPhone et de l'iPod touch avaient la même résolution: 320x480 pixels. Lorsque la rétine utilisée par les iPhone 4 et 4S a été introduite en 2010, la résolution d’affichage a doublé pour atteindre 640 x 960 pixels. étaient encore capable de se référer à la taille de l'écran dans le code comme 320x480. Pourquoi? Parce qu'avec iOS 4, Apple a introduit le concept de "points logiques" dans UIKit. Ces points pourraient mapper dynamiquement sur des pixels physiques via la contentScaleFactor propriété du UIView classe. le contentScaleFactor a ensuite été configuré pour refléter logiquement le changement de résolution en mettant par défaut à 1,0 sur l'iPhone 3G / 3GS et à 2,0 sur le 4 / 4S.
Pour citer le guide de dessin et d’impression d’Apple pour iOS:
Le système mappe automatiquement les points dans l'espace de coordonnées de la vue en pixels dans l'espace de coordonnées du périphérique, mais cette mappage n'est pas toujours un à un. Ce comportement conduit à un fait important dont vous devez toujours vous souvenir:
Un point ne correspond pas nécessairement à un pixel physique.
L’utilisation de points (et du système de coordonnées logiques) a pour objectif de fournir une taille de sortie cohérente, indépendante du périphérique. Dans la plupart des cas, la taille réelle d'un point n'est pas pertinente. Le but des points est de fournir une échelle relativement cohérente que vous pouvez utiliser dans votre code pour spécifier la taille et la position des vues et du contenu rendu. La manière dont les points sont réellement mappés en pixels est un détail géré par les infrastructures système. Par exemple, sur un périphérique doté d'un écran haute résolution, une ligne d'une largeur égale à un point peut avoir pour résultat une ligne d'une largeur de deux pixels physiques. Le résultat est que si vous dessinez le même contenu sur deux appareils similaires, un seul d'entre eux disposant d'un écran haute résolution, le contenu semble avoir à peu près la même taille sur les deux appareils..
Donc, en tant que développeurs iOS, nous avons eu assez facilement grâce à cette innovation. Cependant, avec l'introduction de la résolution de 640x1136px de l'iPhone 5, l'utilisation d'une taille verticale de 480 points ne remplira plus tout l'espace vertical disponible..
Pour voir cela en action, supposons qu'un programmeur tente d'ajouter une vue d'arrière-plan personnalisée par programme au contrôleur de vue racine de leur application. Prétendez que le programmeur a écrit ce code pour le faire:
UIView * customBackgroundView = [[UIView alloc] initWithFrame: CGRectMake (0.0f, 0.0f, 320.0f, 480.0f)]; customBackgroundView.backgroundColor = [UIColor redColor]; customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.view addSubview: customBackgroundView];
Avant l'iPhone 5, le bloc de code ci-dessus aurait très bien fonctionné. Les points logiques 320x480 correspondraient à 640x960 avec le facteur d'échelle par défaut 2.0 de l'iPhone 4 / 4S. Cependant, sur l'iPhone 5, la hauteur restera toujours mappée à 960 pixels et deviendra courte:
Résoudre ce problème est assez simple:
UIView * customBackgroundView = [[UIView alloc] 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];
Dans ce scénario, nous devions simplement extraire dynamiquement la taille de la vue racine actuelle afin de placer la nouvelle vue d’arrière-plan personnalisée sur l’ensemble de la zone..
Pour un autre exemple, supposons que le programmeur veuille créer une nouvelle vue par programme dans le loadView: méthode:
- (void) loadView CGRect applicationFrame = [[UIScreen mainScreen] applicationFrame]; UIView * customView = [[UIView alloc]] initWithFrame: applicationFrame]; customView.backgroundColor = [UIColor redColor]; customView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; self.view = customView;
le applicationFrame propriété de UIScreen renverra les limites du rectangle du cadre utilisées pour la fenêtre de l'application en cours, moins la surface occupée par la barre d'état (si visible). Vous pouvez également obtenir uniquement le rectangle de délimitation de l'écran avec [[UIScreen mainScreen]] bornes]. Les deux valeurs seront retournées en points logiques, pas en pixels.
Bien que les exemples de code ci-dessus soient utiles, ils sont également quelque peu limités. En pratique, vous devrez peut-être faire face à des scénarios plus complexes impliquant le dimensionnement dynamique de nombreuses sous-vues en fonction de la hauteur de l'écran du périphérique..
Heureusement, il existe au moins trois approches différentes que vous pouvez utiliser pour le faire..
le UIView propriété masque de redimensionnement est un moyen simple mais efficace de s’assurer que les objets de sous-vue s’ajustent dynamiquement par rapport à leur vue d’ensemble. Dans l'extrait de code ci-dessus, je l'ai utilisé pour m'assurer que la largeur et la hauteur de l'objet de vue d'arrière-plan personnalisé seraient mises à l'échelle de manière appropriée avec les changements d'orientation:
customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
Notez que le masque de redimensionnement Cette propriété peut également être contrôlée visuellement depuis Xcode / Interface Builder..
La plupart des applications qui utilisent des contrôles UIKit et des conteneurs par défaut devraient pouvoir fonctionner correctement sur l'iPhone 5 en combinant des valeurs variables pour la création de trames (comme indiqué précédemment) et en définissant des propriétés intelligentes de redimensionnement automatique sur des sous-vues..
Reportez-vous à la documentation officielle Apple et au guide de programmation View pour plus d'informations..
Le nouveau système de mise en page automatique introduit avec iOS 6 fournit une méthode avancée pour contrôler le placement des vues. La mise en page automatique utilise un système de contraintes pour expliquer et appliquer les relations de vue. Le seul inconvénient de la mise en page automatique est qu’elle n’est pas compatible avec iOS 5 et les versions antérieures..
Une couverture supplémentaire de la mise en page automatique dépasse le cadre de ce didacticiel. Ceux qui veulent en savoir plus devraient consulter le Guide de mise en forme automatique Cocoa d’Apple et la session Introduction à la mise en page automatique de la WWDC 2012..
Une autre approche adoptée par certains consiste à essayer de vérifier si le périphérique actuel est un iPhone 5 au moment de l'exécution. La version la plus avancée de ceci que j'ai trouvée est issue de cette réponse sur StackOverflow.
Voici une version légèrement modifiée des macros créées dans la publication StackOverflow:
#define IS_IPHONE ([[[[UIDevice currentDevice] modèle] estEqualToString: @ "iPhone"]) #define IS_IPOD ([[[UIDevice currentDevice] modèle] estEqualToString: @ "iPod touch"]) #define IS_HEINT_GTE_5 [[ID] ] .size.height> = 568.0f #define IS_IPHONE_5 (IS_IPHONE && IS_HEIGHT_GTE_568)
La première et la deuxième macro vérifient si le périphérique actuel est un iPhone ou un iPod touch à l’aide du UIDevice classe.
La troisième macro vérifie si la hauteur de l'écran est supérieure ou égale à la valeur en virgule flottante 568. Rappelez-vous qu'au-dessus de [[UIScreen mainScreen]] bornes] message retournera le cadre de sélection de la fenêtre de l'application en points logiques, et que 568 points logiques mapperont sur 1136 pixels avec la vue par défaut contentScaleFactor de 1,0.
Enfin, la quatrième macro combine deux des macros précédentes dans un IS_IPHONE_5 Macro qui (pour le moment) ne devrait renvoyer VRAI que si le code est exécuté sur un iPhone 5. Vous pouvez utiliser la version finale dans votre propre code, comme ceci:
if (IS_IPHONE_5) NSLog (@ "Hé, c'est un iPhone 5! Bien, peut-être… quelle année est-ce?"); else NSLog (@ "Bummer, ce n'est pas un iPhone 5…");
Bien que l'approche ci-dessus soit potentiellement utile, elle est également sujette aux erreurs. Par exemple, que se passe-t-il si l'iPhone 6 est publié avec de toutes nouvelles dimensions? Je vous déconseille d'utiliser cette approche si possible. Au lieu de cela, restez sur Autoresizing Masks ou Auto Layout si vous pouvez faire fonctionner l'une de ces approches.
Ce didacticiel explique les différentes méthodes disponibles pour installer l’écran de l’iPhone 5 agrandi. Si vous avez du mal à vous adapter à la nouvelle taille de l'écran, j'espère que vous avez trouvé le contenu utile.!
N'hésitez pas à laisser vos commentaires dans la section commentaires ci-dessous. Vous pouvez également communiquer avec moi sur Twitter, Google Plus ou LinkedIN. À votre santé!
Accentsconagua