Localiser la bibliothèque d’interface utilisateur dans une application
La localisation est un élément clé pour offrir des produits pouvant être utilisés dans le monde entier par des personnes qui parlent différentes langues. La bibliothèque d’interface utilisateur Azure Communication Services fournit une prise en charge prête à l’emploi pour certaines langues et fonctionnalités, telles que la lecture de droite à gauche (RTL). Les développeurs peuvent fournir leurs propres fichiers de localisation pour la bibliothèque d’interface utilisateur.
Dans cet article, vous allez apprendre à configurer la localisation correctement à l’aide de la bibliothèque d’interface utilisateur dans votre application.
Prérequis
- Compte Azure avec un abonnement actif. Créez un compte gratuitement.
- Une ressource Communication Services déployée. Créez une ressource Communication Services.
- Un jeton d’accès utilisateur pour activer le client d’appel. Obtenez un jeton d’accès utilisateur.
- Facultatif : terminez le guide de démarrage rapide pour prendre en main les composites de la bibliothèque d’interface utilisateur.
Configurer la localisation
Pour obtenir une documentation détaillée et des démarrages rapides sur la bibliothèque d’interface utilisateur web, consultez le Storybook de la bibliothèque d’interface utilisateur web.
Pour plus d’informations, consultez Localisation dans la bibliothèque d’interface utilisateur web.
Pour plus d’informations, consultez la bibliothèque d’interface utilisateur Android open source et l’exemple de code d’application.
Langues disponibles
Le tableau suivant répertorie les ID CallCompositeSupportedLocale pour les traductions prêtes à l’emploi. Si vous voulez localiser le composite, passez un objet Locale de CallCompositeSupportedLocale à CallCompositeLocalizationOptions en tant qu’options dans CallComposite.
| Langue | CallCompositeSupportedLocale |
|---|---|
| Arabe (Arabie saoudite) | CallCompositeSupportedLocale.AR_SA |
| Allemand (Allemagne) | CallCompositeSupportedLocale.DE_DE |
| Anglais (US) | CallCompositeSupportedLocale.EN_US |
| Anglais (Royaume-Uni) | CallCompositeSupportedLocale.EN_UK |
| Espagnol (Espagne) | CallCompositeSupportedLocale.ES_ES |
| Espagnol | CallCompositeSupportedLocale.ES |
| Finnois (Finlande) | CallCompositeSupportedLocale.FI_FI |
| Français (France) | CallCompositeSupportedLocale.FR_FR |
| Français | CallCompositeSupportedLocale.FR |
| Hébreu (Israël) | CallCompositeSupportedLocale.IW_IL |
| Italien (Italie) | CallCompositeSupportedLocale.IT_IT |
| Italien | CallCompositeSupportedLocale.IT |
| Japonais (Japon) | CallCompositeSupportedLocale.JA_JP |
| Japonais | CallCompositeSupportedLocale.JA |
| Coréen (Corée) | CallCompositeSupportedLocale.KO_KR |
| Coréen | CallCompositeSupportedLocale.KO |
| Néerlandais (Pays-Bas) | CallCompositeSupportedLocale.NL_NL |
| Néerlandais | CallCompositeSupportedLocale.NL |
| Norvégien (bokmål) | CallCompositeSupportedLocale.NB_NO |
| Polonais (Pologne) | CallCompositeSupportedLocale.PL_PL |
| Polonais | CallCompositeSupportedLocale.PL |
| Portugais (Brésil) | CallCompositeSupportedLocale.PT_BR |
| Portugais | CallCompositeSupportedLocale.PT |
| Russe (Russie) | CallCompositeSupportedLocale.RU_RU |
| Russe | CallCompositeSupportedLocale.RU |
| Suédois (Suède) | CallCompositeSupportedLocale.SV_SE |
| Turc (Turquie) | CallCompositeSupportedLocale.TR_TR |
| Turc | CallCompositeSupportedLocale.TR |
| Chinois (simplifié) | CallCompositeSupportedLocale.ZH_CN |
| Chinois (traditionnel) | CallCompositeSupportedLocale.ZH_TW |
| Chinois | CallCompositeSupportedLocale.ZH |
Fournisseur de localisation
CallCompositeLocalizationOptions est un wrapper d’options qui définit toutes les chaînes pour les composants de la bibliothèque d’interface utilisateur Android en utilisant CallCompositeSupportedLocale. Par défaut, toutes les étiquettes de texte utilisent des chaînes anglaises. Vous pouvez utiliser CallCompositeLocalizationOptions pour définir une autre langue en passant un objet Locale à partir de CallCompositeSupportedLocale. Prête à l’emploi, la bibliothèque d’interface utilisateur inclut un ensemble d’éléments d’objets Locale utilisables avec les composants et composites de l’interface utilisateur.
Vous pouvez également obtenir une liste d’objets Locale à l’aide de la fonction statique CallCompositeSupportedLocale.getSupportedLocales().
Pour utiliser CallCompositeLocalizationOptions, spécifiez CallCompositeSupportedLocale et passez-le à CallCompositeBuilder. L’exemple suivant localise le composite en Français.
import com.azure.android.communication.ui.calling.models.CallCompositeLocalizationOptions
import com.azure.android.communication.ui.calling.models.CallCompositeSupportedLocale
// CallCompositeSupportedLocale provides a list of supported locales
val callComposite: CallComposite =
CallCompositeBuilder().localization(
CallCompositeLocalizationOptions(CallCompositeSupportedLocale.FR)
).build()
Sens de la disposition
Certaines langues (par exemple, arabe et hébreu) peuvent avoir besoin d’une localisation pour avoir une disposition de droite à gauche. Vous pouvez spécifier layoutDirection comme faisant partie de CallCompositeLocalizationOptions. La disposition du composite sera mise en miroir, mais le texte restera dans la direction de la chaîne.
import com.azure.android.communication.ui.calling.models.CallCompositeLocalizationOptions
import com.azure.android.communication.ui.calling.models.CallCompositeSupportedLocale
// CallCompositeSupportedLocale provides a list of supported locales
val callComposite: CallComposite =
CallCompositeBuilder().localization(
CallCompositeLocalizationOptions(CallCompositeSupportedLocale.FR, LayoutDirection.LTR)
).build()
LayoutDirection.RTL |
LayoutDirection.LTR |
|---|---|
|
|
Personnalisation des traductions
Il existe deux options pour personnaliser les traductions linguistiques que nous fournissons. Vous pouvez utiliser la liste des clés de localisation pour remplacer une chaîne particulière pour la paire clé-valeur. Vous pouvez spécifier les paramètres régionaux comme l’une des langues prises en charge. Lorsqu’une clé n’est pas fournie, elle revient à une chaîne de traduction prise en charge. Si vous avez spécifié une langue non prise en charge, vous devez fournir des traductions pour toutes les clés de cette langue (à l’aide du fichier string.xml) et ensuite revenir aux chaînes anglaises lorsqu’aucune clé n’est fournie.
Supposons que vous souhaitez que la barre de contrôle utilise des chaînes à partir des paramètres régionaux anglais (États-Unis), mais que vous souhaitez modifier l’étiquette du bouton Rejoindre l’appel pour Démarrer la réunion dans la vue Configuration. Créez un fichier string.xml (ou un autre nom de fichier) avec la paire clé-valeur pour les clés sélectionnées que vous souhaitez remplacer. L'exemple suivant remplace la clé azure_communication_ui_calling_setup_view_button_join_call.
Pour plus d’informations, consultez la bibliothèque d’interface utilisateur iOS open source et l’exemple de code d’application.
Détection de langue
Si votre application prend en charge la localisation, la bibliothèque d’interface utilisateur s’affiche en fonction de la langue par défaut du système de l’utilisateur si elle fait partie des langues disponibles répertoriées dans la section suivante. Dans le cas contraire, la langue est définie par défaut sur les chaînes anglaises prédéfinies (en).
Langues disponibles
Le tableau suivant répertorie les traductions prêtes à l’emploi pour locale. Si vous souhaitez localiser le composite, passez locale à LocalizationOptions en tant qu’options CallComposite.
| Langue | SupportedLocale | Identificateur |
|---|---|---|
| Chinois simplifié | zh |
zh |
| Chinois simplifié | zhHans |
zh-Hans |
| Chinois simplifié (Chine) | zhHansCN |
zh-Hans-CN |
| Chinois, traditionnel | zhHant |
zh-Hant |
| Chinois traditionnel (Taïwan) | zhHantTW |
zh-Hant-TW |
| Néerlandais | nl |
nl |
| Néerlandais (Pays-Bas) | nlNL |
nl-NL |
| Anglais | en |
en |
| Anglais (Royaume-Uni) | enGB |
en-GB |
| Anglais (États-Unis) | enUS |
en-US |
| Français | fr |
fr |
| Français (France) | frFR |
fr-FR |
| Allemand | de |
de |
| Allemand (Allemagne) | deDE |
de-DE |
| Italien | it |
it |
| Italien (Italie) | itIT |
it-IT |
| Japonais | ja |
ja |
| Japonais (Japon) | jaJP |
ja-JP |
| Coréen | ko |
ko |
| Coréen (Corée du Sud) | koKR |
ko-KR |
| Portugais | pt |
pt |
| Portugais (Brésil) | ptBR |
pt-BR |
| Russe | ru |
ru |
| Russe (Russie) | ruRU |
ru-RU |
| Espagnol | es |
es |
| Espagnol (Espagne) | esES |
es-ES |
| Turc | tr |
tr |
| Turc (Turquie) | trTR |
tr-TR |
Vous pouvez également obtenir une liste de structures locale à l’aide de la fonction statique SupportedLocale.values.
let locales: [Locale] = SupportedLocale.values.map{ $0.identifier }
print(locales)
// ["de", "de-DE", "en", "en-GB", "en-US", "es", "es-ES", "fr", "fr-FR", "it", "it-IT", "ja", "ja-JP", "ko", "ko-KR", "nl", "nl-NL", "pt", "pt-BR", "ru", "ru-RU", "tr", "tr-TR", "zh", "zh-Hans", "zh-Hans-CN", "zh-Hant", "zh-Hant-TW"]
LocalizationOptions
LocalizationOptions est un wrapper d’options qui définit toutes les chaînes pour les composants de la bibliothèque d’interface utilisateur en utilisant locale. Par défaut, toutes les étiquettes de texte utilisent des chaînes anglaises (en). Vous pouvez utiliser LocalizationOptions pour définir une autre structure de locale. Prête à l’emploi, la bibliothèque d’interface utilisateur inclut un ensemble d’éléments de structures locale utilisables avec les composants et composites de l’interface utilisateur.
Pour utiliser LocalizationOptions, spécifiez une structure Swift locale (avec ou sans code de région) et transmettez-la à CallCompositeOptions. L’exemple suivant localise le composite en Français pour la France (fr-FR).
// Creating a Swift locale structure
var localizationOptions = LocalizationOptions(locale: Locale(identifier: "fr-FR"))
// Use IntelliSense SupportedLocale to get supported locale structures
localizationOptions = LocalizationOptions(locale: SupportedLocale.frFR)
let callCompositeOptions = CallCompositeOptions(localization: localizationOptions)
let callComposite = CallComposite(withOptions: callCompositeOptions)
Sens de la disposition
Certaines langues (par exemple, arabe et hébreu) peuvent avoir besoin d’une localisation pour avoir une disposition de droite à gauche. Vous pouvez spécifier layoutDirection comme faisant partie de LocalizationOptions. La disposition du composite sera mise en miroir, mais le texte restera dans la direction de la chaîne.
var localizationOptions: LocalizationOptions
// Initializer with locale and layoutDirection
localizationOptions = LocalizationOptions(locale: Locale(identifier: "en"),
layoutDirection: .rightToLeft)
// Initializer with locale, localizableFilename, and layoutDirection
localizationOptions = LocalizationOptions(locale: Locale(identifier: "en"),
localizableFilename: "Localizable",
layoutDirection: .rightToLeft)
// Add localizationOptions as an option
let callCompositeOptions = CallCompositeOptions(localization: localizationOptions)
let callComposite = CallComposite(withOptions: callCompositeOptions)
L’exemple suivant montre la mise en miroir de disposition de droite à gauche. Si vous ne spécifiez pas layoutDirection, il est par défaut false (disposition de gauche à droite).
layoutDirection = .leftToRight (valeur par défaut) |
layoutDirection = .rightToLeft |
|---|---|
|
|
Personnalisation des traductions
Il existe deux options pour personnaliser les traductions linguistiques que nous fournissons. Pour remplacer une chaîne particulière, vous pouvez utiliser la liste des clés de localisation pour la paire clé/valeur. Vous pouvez spécifier locale comme l’une des langues prises en charge. Lorsqu’une clé n’est pas fournie, elle revient à une chaîne de traduction prise en charge. Si vous avez spécifié une langue non prise en charge, vous devez fournir des traductions pour toutes les clés de cette langue (à l’aide du fichier Localizable.strings) et ensuite revenir aux chaînes anglaises lorsqu’aucune clé n’est fournie.
Supposons que vous souhaitez que la barre de contrôle utilise des chaînes à partir des paramètres régionaux anglais (États-Unis), mais que vous souhaitez modifier l’étiquette du bouton Rejoindre l’appel pour Démarrer la réunion dans la vue Configuration. Activez la localisation dans le projet pour l’instance locale que vous souhaitez remplacer. Créez un fichier Localizable.strings (ou un autre nom de fichier avec l’extension .strings) avec la paire clé/valeur pour les clés sélectionnées que vous souhaitez remplacer. L'exemple suivant remplace la clé AzureCommunicationUI.SetupView.Button.JoinCall.
Pour spécifier que vous effectuez une substitution avec Localizable.strings, créez un objet LocalizationOptions pour spécifier locale et localizationFilename. Ou lorsque vous utilisez l’initialiseur locale, il examine les clés dans Localizable.strings pour locale.collatorIdentifier comme langue dans votre projet.
let localizationOptions = LocalizationOptions(locale: Locale(identifier: "fr"),
localizableFilename: "Localizable")
let callCompositeOptions = CallCompositeOptions(localization: localizationOptions)
let callComposite = CallComposite(withOptions: callCompositeOptions)
VoiceOver d’accessibilité pour la localisation
Pour que VoiceOver fonctionne correctement pour une localisation, vérifiez que la langue est ajoutée aux localisations de votre application. Le VoiceOver détecte ensuite que l’application prend en charge la langue spécifiée dans LocalizationOptions pour locale. Il sélectionne la voix vocale pour la langue à l’aide de la voix trouvée dans Paramètres>Accessibilité>Voix sur l’appareil. Vous pouvez vérifier que la langue est ajoutée à votre projet, comme illustré dans l’exemple suivant.
