Utilisation de la localisation watchOS dans Xamarin

Adaptation de vos applications watchOS pour plusieurs langues

Les applications watchOS sont localisées à l’aide des méthodes iOS standard :

• Utilisation de l’ID de localisation sur les éléments storyboard,
• Fichiers .strings associés au storyboard et
• Fichiers Localizable.strings pour le texte utilisé dans le code.

Les storyboards et ressources par défaut se trouvent dans un répertoire de base , et les traductions spécifiques à la langue et d’autres ressources sont stockées dans des répertoires .lproj . Le système d’exploitation iOS et Watch utilise automatiquement la sélection de langue de l’utilisateur pour charger les chaînes et ressources appropriées.

Étant donné qu’une application Apple Watch a deux parties - Watch App and Watch Extension - les ressources de chaîne localisées sont requises à deux emplacements, selon la façon dont elles sont utilisées.

Le texte localisé et les ressources seront différents dans l’application espion et l’extension espion.

Regarder l’application

L’application espion contient le storyboard qui décrit l’interface utilisateur de l’application. Tous les contrôles (tels que Label et Image) qui prennent en charge la localisation ont un ID de localisation.

Chaque répertoire .lproj spécifique à la langue doit contenir des fichiers .strings avec les traductions de chaque élément (à l’aide de l’ID de localisation), ainsi que des images référencées par le storyboard.

Espion d’extension

L’extension watch est l’emplacement où le code de votre application s’exécute. Tout texte affiché à l’utilisateur à partir du code doit être localisé dans l’extension et non dans l’application espion.

L’extension doit également contenir des répertoires .lproj spécifiques à la langue, mais les fichiers .strings nécessitent uniquement des traductions pour du texte utilisé dans votre code.

Globalisation de la solution Watch

La mondialisation est le processus de localisation d’une application. Pour les applications de surveillance, cela signifie la conception du storyboard avec différentes longueurs de texte à l’esprit, en veillant à ce que chaque disposition de l’écran s’ajuste correctement en fonction du texte affiché. Vous devez également vous assurer que toutes les chaînes référencées dans le code d’extension watch peuvent être traduites à l’aide de la LocalizedString méthode.

Regarder l’application

Par défaut, l’application espion n’est pas configurée pour la localisation. Vous devez déplacer le fichier storyboard par défaut et créer d’autres répertoires pour vos traductions :

1. Créez le répertoire Base.lproj et déplacez l’interface.storyboard dans celle-ci.

2. Créez des <répertoires language.lproj> pour chaque langue que vous souhaitez prendre en charge.

3. Les répertoires .lproj doivent contenir un fichier texte Interface.strings (le nom du nom du fichier doit correspondre au nom du storboard). Vous pouvez éventuellement placer toutes les images qui nécessitent une localisation dans ces répertoires.

Le projet d’application espion ressemble à ceci après que ces modifications ont été apportées (seuls les fichiers en anglais et en espagnol ont été ajoutés) :

Texte du storyboard

Lorsque vous modifiez le storyboard, sélectionnez chaque élément et notez l’ID de localisation qui apparaît dans le panneau Propriétés :

Dans le dossier Base.lproj, créez des paires clé-valeur comme indiqué ci-dessous, où la clé est formée par l’ID de localisation et un nom de propriété sur le contrôle, joint par un point (.).

"AgC-eL-Hgc.title" = "WatchL10nEN"; // interface controller title
"0.text" = "Welcome to WatchL10n"; // Welcome
"1.text" = "Language settings are in Apple Watch App"; // How to change language
"2.title" = "Greetings"; // Greeting
"6.title" = "Detail";
"39.text" = "Second screen";

Notez dans cet exemple qu’un ID de localisation peut être une chaîne numérique simple (par exemple. « 0 », « 1 », etc. ou une chaîne plus complexe (telle que « AgC-eL-Hgc »). Label les contrôles ont une Text propriété et Buttondes s ont une Title propriété, qui est reflétée de la façon dont leurs valeurs localisées sont définies. Veillez à utiliser le nom de la propriété en minuscules, comme illustré dans l’exemple ci-dessus.

Lorsque le storyboard est affiché sur la montre, les valeurs correctes sont automatiquement extraites et affichées en fonction de la langue sélectionnée par l’utilisateur.

Storyboard Images

L’exemple de solution inclut également une gradient@2x.png image dans chaque dossier de langue. Cette image peut être différente pour chaque langue (par exemple, il peut avoir du texte incorporé qui a besoin de traduire, ou utiliser l’iconographie localisée).

Définissez simplement la propriété Image de l’image dans le storyboard et l’image correcte sera affichée sur la montre en fonction de la langue sélectionnée par l’utilisateur.

Remarque : étant donné que toutes les Montres Apple ont des écrans Rétine, seule la version @2x de l’image est requise. Vous n’avez pas besoin de spécifier @2x dans le storyboard.

Espion d’extension

L’extension watch nécessite une structure de répertoires similaire pour prendre en charge la localisation, mais il n’existe aucun storyboard. Les chaînes localisées dans l’extension sont uniquement celles référencées par le code C#.

Chaînes dans le code

Le fichier Localizable.strings a une structure légèrement différente de celle associée à un storyboard. Dans ce cas, nous pouvons choisir n’importe quelle chaîne « clé » ; La recommandation d’Apple est d’utiliser une clé qui reflète le texte réel affiché dans la langue par défaut :

"Breakfast time" = "Breakfast time!"; // morning
"Lunch time" = "Lunch time!"; // midday
"Dinner time" = "Dinner time!"; // evening
"Bed time" = "Bed time!"; // night

La NSBundle.MainBundle.LocalizedString méthode est utilisée pour résoudre les chaînes dans leurs équivalents traduits, comme indiqué dans le code ci-dessous.

var display = "Breakfast time";
var localizedDisplay =
  NSBundle.MainBundle.LocalizedString (display, comment:"greeting");
displayText.SetText (localizedDisplay);

Images dans le code

Les images remplies par le code peuvent être définies de deux manières.

1. Vous pouvez modifier un Image contrôle en définissant sa valeur sur le nom de chaîne d’une image qui existe déjà dans l’application Espion, par exemple

   displayImage.SetImage("gradient"); // image in Watch App (as shown above)
   

2. Vous pouvez déplacer une image de l’extension vers la montre à l’aide FromBundle de laquelle l’application choisit automatiquement l’image appropriée pour la sélection de langue de l’utilisateur. Dans l’exemple de solution, il existe une image language@2x.png dans chaque dossier de langue et elle est affichée à DetailController l’aide du code suivant :

   using (var image = UIImage.FromBundle ("language")) {
       displayImage.SetImage (image);
   }
   

   Notez que vous n’avez pas besoin de spécifier le @2x lors de la référence au nom de fichier de l’image.

La deuxième méthode s’applique également si vous téléchargez une image à partir d’un serveur distant pour effectuer le rendu sur la montre ; Toutefois, dans ce cas, vous devez vous assurer que l’image que vous téléchargez est correctement localisée en fonction des préférences de l’utilisateur.

Localisation

Une fois que vous avez configuré votre solution, les traducteurs devront traiter vos fichiers et images .strings pour chaque langue que vous souhaitez prendre en charge.

Vous pouvez créer autant de répertoires .lproj que vous en avez besoin (un pour chaque langue prise en charge). Ils sont nommés à l’aide de codes de langue, tels que en, es, de, ja, pt-BR, etc. (pour l’anglais, l’espagnol, l’allemand, le japonais et le portugais (brésilien) respectivement).

L’exemple attaché utilise des traductions (générées par l’ordinateur) pour montrer comment localiser une application watchOS.

Regarder l’application

Ces valeurs sont utilisées pour traduire l’interface utilisateur définie dans le storyboard de l’application espion. La valeur de clé est une combinaison de l’ID de localisation de chaque contrôle storyboard et de la propriété traduite.

Il est recommandé d’ajouter des commentaires contenant le texte d’origine au fichier afin que les traducteurs sachent ce que la traduction doit être.

es.lproj/Interface.strings

Les chaînes de langue espagnole (traduites par l’ordinateur) pour le storyboard sont indiquées ci-dessous. Il est utile d’ajouter des commentaires à chaque ligne, car il est difficile de savoir à quoi l’ID de localisation fait référence dans le cas contraire :

"AgC-eL-Hgc.title" = "Spanish"; // app screen heading
"0.text" = "Bienvenido a WatchL10n"; // Welcome to WatchL10n
"1.text" = "Ajustes de idioma están en Apple Watch App"; // Change the language in the Apple Watch App
"2.title" = "Saludos"; // Greetings
"6.title" = "2nd"; // second screen heading
"39.text" = "Segunda pantalla"; // second screen

Espion d’extension

Ces valeurs sont utilisées dans le code pour traduire des informations avant d’être affichées à l’utilisateur. La clé est sélectionnée par le développeur pendant qu’il écrit du code et contient généralement la chaîne réelle à traduire.

Fichier es.lproj/Localizable.strings

Chaînes de langue spansish (traduites par l’ordinateur) :

"Breakfast time" = "la hora del desayuno"; // morning
"Lunch time" = "hora de comer"; // midday
"Dinner time" = "hora de la cena"; // evening
"Bed time" = "la hora de dormir"; // night

Test

La méthode de modification des préférences linguistiques diffère entre le simulateur et les appareils physiques.

Simulateur

Sur le simulateur, sélectionnez la langue à tester à l’aide de l’application iOS Paramètres (icône d’engrenages gris dans l’écran d’accueil du simulateur).

Espion d’appareil

Lorsque vous effectuez des tests avec une montre, modifiez la langue de la montre dans l’application Apple Watch sur l’i Téléphone jumelé.