Comment développer une application iOS multilingue

Trouver une application iOS multilingue sous Apple Store est de plus en plus fréquent. Dans ce tutoriel nous allons voir ensemble comment développer une application de ce genre.

Nous allons étudier l'utilisation avancée de NSLocalizedString. Elle consiste à afficher le contenu approprié selon le choix de la langue de l'utilisateur.

La première étape consiste à créer un projet xcode, pour cela lancez-le et créez un nouveau projet.

Faites Next puis donnez un nom à votre projet, dans mon exemple j'ai choisi de l'appeler Location.

Nous allons procéder maintenant à la mise en forme (très basique) c'est-à-dire : ajouter les boutons dont nous avons besoin et un peu de couleur. Rendez-vous maintenant sur la fenêtre de gauche qui liste tous vos fichiers. Cliquez sur le fichier MainStoryboard.storyboard, vous devriez obtenir la fenêtre ci-dessous :

Xcode vous a créé de base un projet contenant un ViewController. Ajoutez à cette vue deux Round Rect Button, puis nommez l'un français et l'autre english. En effet, l'application que nous sommes en train de créer permettra d'afficher le contenu approprié en français ou en anglais.

II-A. Ajout des méthodes liées à l'appui sur les boutons▲

Tout d'abord, cliquez sur le menu Editor situé en haut à droite de votre IDE qui vous permettra d'afficher le ficher d'entête lié à votre vue.

Pour ajouter une méthode à votre bouton : maintenez la touche ctrl, cliquez sur un bouton puis déplacez votre curseur vers le fichier d'entête ouvert sur votre droite. Placez le curseur de la souris entre @interface ViewController : UIViewController et @end, puis relâchez la souris et la touche ctrl. Une petite fenêtre semblable à celle-ci devrait apparaître :

II-B. Description de la fenêtre▲

II-C. Configuration de l'objet▲

Pour résumer, un fichier xib vous permet d'éditer graphiquement votre View comme on le fait avec le storyboard.

Allez sur le menu fichier -> new-> File… vous arrivez sur cette fenêtre :

Choisissez Objective-C class, faites Next.

Donnez un nom à votre classe dans le champ class, cochez la case With XIB for user interface et pour finir dans le champ Subclass of choisissez UIViewController.

Faites Next pour finir et enregistrer votre classe.

Vous remarquerez qu'en plus de vos fichiers DetailViewController.m et DetailViewController.h vous avez un troisième fichier DetailViewController.xib, il a le même rôle que le storyboard. Il vous permet d'éditer graphiquement votre application.

Cliquez sur ce fichier une fois pour le sélectionner et ajoutez-y un objet UILabel, élargissez de façon à ce qu'il occupe la moitié de votre vue puis allez sur votre fenêtre située à droite de votre IDE afin d'accéder aux propriétés de votre UILabel, ajoutez un nombre de lignes supérieur à 1, pour ma part j'ai choisi cinq lignes. Répétez la même procédure qu'on a faite pour les deux boutons, mais en choisissant comme type de connexion Outlet. Donnez-lui un nom. Dans notre exemple, j'ai choisi de l'appeler quoteLabel.

Ouvrez ensuite le fichier .m correspondant et rajoutez entre @implementation DetailViewController :

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

@synthesize quoteLabel;

III-A. Ajout des fichiers Localizable.Strings▲

III-B. Quel est son fonctionnement ?▲

Les fichiers Localizable.strings contiennent une clé et sa valeur. La clé choisie doit être toujours la même dans tous les autres fichiers Localizable.strings. Elle doit respecter la syntaxe suivante : « [clé]» = « [valeur] » ;

Exemple :

« parcsjardins » = « Gardens and Parks »;

Maintenant nous allons ajouter ces fichiers dans notre projet, pour cela, allez dans le menu Fichier (de xcode) New -> File…

Choisissez ensuite le menu Ressource d'iOS puis le type Strings File.

Faites ensuite Next pour enregistrer votre fichier et nommez-le Localizable.strings.

Vous avez maintenant votre fichier Localizable.strings qui apparaît dans la fenêtre, listant tous les fichiers de votre projet, à gauche de votre IDE. Nous allons maintenant l'affecter à une langue. Pour cela, cliquez sur le fichier et sur la partie gauche de vote IDE :

Comme le montre la capture d'écran ci-dessus, cliquez sur Localize… et choisissez la langue anglaise. Nous allons maintenant ajouter le fichier de Localizable.string pour la langue française.

Cliquez sur le nom de votre projet.

Allez dans l'onglet info, puis la section Localizations cliquez sur le plus et choisissez la langue française. Décochez les fichiers ressources MainStoryboard.storyboard et InfoPlist.strings pour ne garder que Localizable.strings. Validez votre opération et ça y est vous avez vos deux fichiers de localisation qui apparaissent sur la fenêtre gauche de votre projet.

Ouvrez maintenant le fichier Localizable.strings(english) pour y coller le texte ci-dessous :

« citation » = « « It's hard enough to find an error in your code when you're looking for it. It's even harder when you've assumed your code is error-free. » - Steve McConnell »;

Puis dans le fichier Localizable.strings(french) celui-ci :

« citation » = « « Il est assez difficile de trouver une erreur dans son code quand on la cherche. C'est encore bien plus dur quand on est convaincu que le code est juste. » - Steve McConnell »;

Nous avons maintenant fini avec ces deux fichiers. Nous allons créer la classe qui va nous retourner le contenu adéquat selon la langue choisie.

Créer une nouvelle classe objective-c, faites-la hériter de NSObject en la choisissant dans le menu déroulant sub of class. Nommez votre classe, pour l'exemple j'ai choisi de l'appeler LocalUser. Cette classe va contenir les méthodes qui vont nous permettre de parcourir les fichiers Localizable.strings et de nous retourner le bon contenu selon la langue choisie.

Ouvrez le fichier .h de cette classe et déclarez les méthodes suivantes :

@interface LocalUser : NSObject
{
    NSBundle *bundle;
}

- (void)initialize;
- (void)setLanguage:(NSString *)langue;
- (NSString *)get:(NSString *)key alter:(NSString *)alternate;

Puis dans le fichier .m leurs définitions :

#import "LocalUser.h"

@implementation LocalUser

/*
 * Méthode d'initialisation
 *
 */
- (void)initialize
{
    NSUserDefaults* defs = [NSUserDefaults standardUserDefaults];
    NSArray* languages = [defs objectForKey:@"AppleLanguages"];
    NSString *current = [languages objectAtIndex:0];
    [self setLanguage:current];
}

/* Cette méthode permet de
 * définir le bon fichier de localizable.strings
 *
 */
- (void)setLanguage:(NSString *)langue
{

    NSString *path = [[ NSBundle mainBundle ] pathForResource:langue ofType:@"lproj" ];
    bundle = [NSBundle bundleWithPath:path];
}

/* Cette méthode permet de récupérer la bonne traduction
 * en fonction de la clé passée en paramètre*/
- (NSString *)get:(NSString *)key alter:(NSString *)alternate
{
    NSString *word = [bundle localizedStringForKey:key value:alternate table:nil];
    return word;
}
@end

La classe ViewController est la classe qui a été générée lorsque vous avez créé votre projet. Nous allons ajouter dans le fichier .h la méthode

- (void) setLanguageAndRun:(NSString *)code;

Nous verrons à quoi elle nous sert dans le ficher .m.

Ouvrez maintenant le fichier ViewController.m, puis ajoutez le contenu ci-dessous :

#import "ViewController.h"
#import "DetailViewController.h"
#import "LocalUser.h"

// Nous importons les fichiers DetailViewController.h et LocalUser.h afin
// de pouvoir les utiliser et faire appel à leurs méthodes


@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)appuiFr:(id)sender {
    
    [self setLanguageAndRun:@"fr"];
    
}

- (IBAction)appuiEn:(id)sender {
    
     [self setLanguageAndRun:@"en"];
}

- (void)setLanguageAndRun:(NSString *)code
{
    LocalUser *myLocal = [[LocalUser alloc]init]; // on crée une instance de type de la classe LocaUser puis on l'initialise
    
    [[NSUserDefaults standardUserDefaults] setObject: [NSArray arrayWithObjects:code, nil] forKey:@"AppleLanguages"]; // On met à jour la langue choisie
    // par l'utilisateur
    [[NSUserDefaults standardUserDefaults] synchronize];
    [myLocal setLanguage:code]; // on sauvegarde ce choix
    DetailViewController *detailView = [[DetailViewController alloc]initWithNibName:@"DetailViewController" bundle:nil]; // On crée une instance de la classe DetailViewController qui 
    //représente la vue DetailViewController 
    [self.navigationController pushViewController:detailView animated:YES]; // On lance l'exécution de notre vue
}

@end

Explication :

Les méthodes - (IBAction)appuiFr:(id)sender et - (IBAction)appuiEn:(id)sender sont celles de nos deux boutons pour les langues anglaise et française. Elles exécutent une ou plusieurs actions définies par vous-même lorsque l'utilisateur agit en appuyant sur l'un des boutons. Dans notre cas l'exécution de ces deux méthodes fait appel à - (void) setLanguageAndRun:(NSString *)code qui prend en paramètre le code de la langue choisie par l'utilisateur en pour la l'anglais et fr pour le français.

Attention le code représentant chaque langue est normalisé consulter ce lien pour plus de détails.

C'est presque fini, c'est la dernière classe à éditer et nous aurons terminé notre projet.

Ouvrez le fichier DetailViewController.m afin d'y ajouter le code ci-dessous :

#import "DetailViewController.h"
#import "LocalUser.h"

@interface DetailViewController ()

@end

@implementation DetailViewController
@synthesize quoteLabel; // le nom de notre label qui nous sert pour l'affichage

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    LocalUser *myLocal = [[LocalUser alloc]init]; // on instancie un nouveau de type de la classe LocalUser
    
    [myLocal initialize]; // On fait appel à la méthode initialize
    
    quoteLabel.text = [myLocal get:@"citation" alter:@""]; // on fait appel à la méthode pour nous retourner le bon contenu selon la langue choisie et selon la clé passée en paramètre. Ici citation est le nom de la clé dont on voudrait afficher la valeur
    
    // Do any additional setup after loading the view from its nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

Maintenant, exécutez votre projet en cliquant sur Run.

Vous pouvez télécharger le projet ici

Faites encore Next pour choisir d'enregistrer de votre projet sous votre Mac. Ça y est votre projet a bien été créé.

Donnez-nous votre avis sur le forum : 2 commentaires

Merci à Torgarhttp://www.developpez.net/forums/u186569/torgar/ pour la relecture et correction, ainsi qu'à kOrt3xhttp://www.developpez.net/forums/u116167/kort3x/ pour la gabarisation.