Créer une application universelle pour iOS

Xcode rend le codage des applications universelles simple. Cela dit, l'ensemble du processus n'est pas automatique. Il nécessite encore beaucoup de travaux supplémentaires pour optimiser les contrôleurs de vues en raison des différences de tailles d'écran des appareils. De toute évidence, le contrôleur de vues pour l'iPhone (et iPod touch) diffère de celui de l'iPad.

Avec Xcode, vous pouvez créer l'interface utilisateur à l'aide de « Interface Builder » (et donc des fichiers nib) ou « Storyboard ». Le processus de création d'une application universelle varie en fonction de ce que vous utilisez pour la conception de l'interface utilisateur. Dans ce tutoriel, nous allons vous donner la procédure pas à pas pour les deux approches et construire une application très simple comme démonstration.

Lorsque vous créez un projet Xcode, il vous est proposé une option pour définir les périphériques pris en charge. Choisissez « Universal » et Xcode va automatiquement créer un projet pour tous les appareils iOS.

Vous trouverez deux fichiers « Storyboard » différents, un pour iPhone/iPod touch et un autre pour iPad. Si vous regardez le résumé du projet (onglet « résumé » dans les paramètres du projet), vous devriez voir deux sections d'information de déploiement pour les différents appareils.

Comme vous pouvez le voir, chaque périphérique possède sa propre version de « Storyboard ». Ainsi, vous pouvez concevoir une interface personnalisée pour les différents appareils dans un projet Xcode unique. Vous pouvez définir des versions différentes des vues ou des contrôleurs de vues dans chaque « Storyboard ». Supposons que vous ouvrez l'application iPhone, la version iPhone de « Storyboard » sera utilisée et vous aurez alors les vues de la version pour iPhone.

Nous allons développer une application très simple pour illustrer comment vous pouvez créer une application universelle en utilisant « Storyboard ». En supposant que vous ayez créé un projet Xcode pour périphériques universels (vous pouvez aussi télécharger le modèle du projet et passer ce paragraphe), nous allons tout d'abord commencer par la version iPhone de « Storyboard » (c'est-à-dire MainStoryboard_iPhone.storyboard) et la conception de l'interface utilisateur.

Tout d'abord, faites glisser une image dans le contrôleur de vues et définissez-la comme background-menu.png. Ensuite, ajoutez un bouton au contrôleur. Sous l'inspecteur d'attributs, changez le type de bouton pour « personnaliser » et modifiez l'image du bouton pour button_play.png. Vous allez vous retrouver avec un « Storyboard » semblable à l'image ci-dessous :

Maintenant, passez à la version iPad de « Storyboard ». Par défaut, Xcode devrait déjà avoir généré un contrôleur de vues adapté à l'iPad. Encore une fois, faites glisser l'image dans le contrôleur de vues. Cette fois, définissez l'image comme background-menu~ipad.png. Le suffixe « ~ipad » indique qu'il s'agit d'une image pour l'iPad. Ensuite, ajoutez un bouton à la vue et définissez l'image comme button_play ~ ipad.png. Il faut également modifier le type de bouton en le positionnant à « custom ».

C'est tout ! Vous avez construit une application universelle. Compilez, exécutez l'application et testez-la avec le simulateur iPhone et iPad.

Devez-vous utiliser une seule classe contrôleur de vues pour iPhone et iPad ? Ou bien des classes contrôleur de vues différentes ? En général, il est plus facile d'utiliser des contrôleurs de vues différents pour chaque plate-forme. Si l'aspect du contrôleur de vues est vraiment semblable, comme dans cet exemple, vous pouvez utiliser une seule classe pour les deux plates-formes. Mais assurez-vous que votre code gère les différences entre l'iPad et l'iPhone.

Le SDK iOS fournit la macro UI_USER_INTERFACE_IDIOM pour vous permettre de créer du code conditionnel afin de supporter les fonctionnalités spécifiques à un périphérique. Cette macro vous permet de déterminer facilement le type de périphérique. Si c'est un iPad, la valeur retournée par la macro sera UIUserInterfaceIdiomPad. Si c'est un iPhone ou un iPod Touch, la valeur retournée sera UIUserInterfaceIdiomPhone. Une instruction conditionnelle typique ressemblerait à ceci :

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
{
        // Place iPhone/iPod specific code here...
} else {
        // Place iPad-specific code here...
}

Continuons avec notre exemple. Le projet Xcode inclut une classe de ViewController qui est associée avec le contrôleur de vues des deux versions « Storyboard iPhone » et « Soryboard iPad ».

Tout d'abord, créons une connexion « Action » entre le bouton « Play » et ViewController.h. Associons la même action aux boutons « Play » des deux versions de « Storyboard ».

Dans ViewController.m, modifiez la méthode « play » avec le code suivant :

- (IBAction)play:(id)sender {
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
        // For iPhone
        UIAlertView *playAlert = [[UIAlertView alloc] initWithTitle:@"New Game" message:@"Start Playing..." delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
        [playAlert show];
       
    } else {
        // For iPad
        UIAlertView *playAlert = [[UIAlertView alloc] initWithTitle:@"Game Over" message:@"Just ended..." delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
        [playAlert show];
    }
}

Ce que nous venons de faire, c'est afficher deux messages d'alerte différents sur iPhone et iPad. Compilez et exécutez l'application à nouveau en utilisant le simulateur de l'iPhone et de l'iPad. Vous verrez les différents messages d'alerte en fonction de l'appareil que vous utilisez.

Cet exemple est très simple, mais il montre la façon dont vous pouvez différencier le type de périphérique lorsque vous souhaitez avoir une classe commune de contrôleur de vues.

Bien, vous venez d'apprendre les bases du développement d'une application universelle. À la place de « Storyboard », vous pouvez aussi utiliser « Interface Builder » pour créer l'interface utilisateur. Dans ce cas, vous allez créer deux fichiers nib, un pour l'iPhone et un pour l'iPad. Le fichier nib de l'iPad est souvent indiqué par le suffixe « ~ ipad ».

Nous n'entrerons pas dans les détails de code, mais généralement, nous avons un branchement conditionnel permettant de choisir le fichier nib à charger en fonction du périphérique. Voici l'extrait de code, vous pouvez utiliser :

+ (id) loadFromXib {
    NSString *xibName = NSStringFromClass(self);
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
        xibName = [xibName stringByAppendingString:@"~ipad"];
    }
    return [self loadFromXibNamed:xibName];
}

En plus des deux versions « Storyboard » ou « Interface Builder », vous devez créer deux versions pour les fichiers de ressources. Par exemple, si vous utilisez des images, vous devrez peut-être ajouter des versions plus grandes (ou en plus haute résolution) pour supporter les périphériques iPad. Pour faire simple, nous parlerons brièvement de trois types de ressources : les images de lancement, les icônes applicatives et les images de l'application.

6-1. Les images de lancement▲

Une application universelle doit fournir des images de lancement pour l'iPhone et l'iPad. En général, vous devez inclure une image de lancement dans une orientation portrait aussi bien pour les périphériques iPhone que pour les périphériques iPad.

Les applications iPhone nécessitent une seule image de lancement avec une orientation portrait, alors que les applications iPad exigent généralement des images différentes pour les orientations portrait et paysage. En bref, vous devez fournir les images de lancement suivantes pour une application universelle :

• image de lancement pour iPhone non-retina (320×480) ;
• image de lancement pour iPhone retina 4 and 4S (640×960) ;
• image de lancement pour iPhone retina 5 (640×1136) ;
• image de lancement pour iPad non-retina (1024×768) ;
• image de lancement pour iPad retina (2048×1536).

Xcode 5 introduit un catalogue qui simplifie la gestion des images de lancement et des icônes applicatives. Dans les paramètres généraux de votre projet, vous devriez trouver les sections « icônes applicatives » et « images de lancement ».

Appuyez sur le bouton en forme de flèche des images de lancement pour accéder au catalogue. Ce dernier contient toutes les images statiques de lancement que l'application affiche durant son exécution. Vous pouvez faire glisser l'image à partir du catalogue pour la mettre en image appropriée.

Pour les besoins de l'image de lancement, vous pouvez vous référer au document Apple's iOS Human Interface Guidelines.

6-2. Les icônes applicatives▲

Comme pour les images de lancement, vous devez fournir différentes versions d'icônes applicatives conformes aux exigences d'Apple. Si vous loupez une des icônes applicatives, l'application ne pourra pas être soumise dans l'App Store.

Comme évoqué dans la section précédente, vous devez fournir différentes versions d'icônes applicatives afin de supporter les différentes résolutions d'écran. Les noms de ces fichiers peuvent être ce que vous voulez, mais tous les fichiers doivent être au format PNG.

Ci-dessous, les dimensions des icônes comme l'exige Apple :

• icône applicative pour iPhone non-retina - 57×57 pixels pour iOS 6 ou moins, 60×60 pixels pour iOS 7 ;
• icône applicative pour iPhone retina - 114×114 pixels pour iOS 6 ou moins, 120×120 pixels pour iOS 7 ;
• icône applicative pour iPad non-retina - 72×72 pixels pour iOS 6 ou moins, 76×76 pixels pour iOS 7 ;
• icône applicative pour iPad retina - 144×144 pixels pour iOS 6 ou moins, 156×156 pixels pour iOS 7.

En option, vous pouvez remplir l'icône avec des paramètres et un projecteur. Le catalogue d'icônes montre clairement les tailles requises pour ces dernières.

Pour attribuer une icône à l'application, le plus simple est de le faire via le catalogue des icônes. Pour cela, Il suffit de glisser votre icône dans l'image de l'application et c'est tout.

6-3. Les images de l'application▲

Pour répondre aux exigences de l'application universelle, outre les images de lancement et les icônes applicatives, vous devez également créer deux ensembles différents d'images d'applications, une version pour iPhone et une autre plus grande pour l'iPad. Pour être précis, vous devez créer quatre versions différentes d'images de l'application. Voici un exemple :

Comme pour les images de lancement, nous utilisons le suffixe « ~ ipad » pour indiquer les images de l'iPad.

Prenons le bouton button_buy.png comme exemple. Disons que vous souhaitez ajouter un bouton « Buy »dans « Storyboard ». Pour la version iPhone du « Storyboard », vous devez affecter le fichier button_buy.png comme image, alors que vous devez utiliser le fichier button_buy~ipad.png dans la version iPad de « Storyboard ». Vous n'avez pas besoin d'affecter les images « @2x », iOS les charge automatiquement sur les périphériques « retina ».

Ce tutoriel vous donne une brève introduction à la création d'une application universelle et vous guide à travers les exigences telles que l'image de lancement, l'icône applicative et les fichiers ressources. Vous devriez maintenant avoir une idée sur la façon dont l'application universelle est créée avec « Storyboard ». Pour en savoir plus sur l'application universelle, vous pouvez vous référer à Apple's official developer doc.

Pour votre information, vous pouvez télécharger le projet Xcode de l'exemple à partir d'ici. Vous aurez besoin d'utiliser Xcode 5 pour l'ouvrir.

Ce tutoriel est extrait du prochain iOS Game Starter Kit. Comme toujours, si vous avez des questions ou des suggestions, n'hésitez pas à nous laisser un commentaire.

7-1. Remerciements▲