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 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 : fin du guide de démarrage rapide pour la prise en main des composites de la bibliothèque d’interface utilisateur.
Configurer la localisation
Pour obtenir une documentation détaillée et des guides de démarrage rapide sur la bibliothèque d’interface utilisateur web, consultez le Storybook de la bibliothèque d’interface utilisateur web.
Pour en savoir plus, 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 CallCompositeSupportedLocale les ID pour les traductions prêtes à l’emploi. Si vous souhaitez localiser le composite, transmettez un Locale objet CallCompositeSupportedLocale en CallCompositeLocalizationOptions tant qu’options CallComposite.
| Langage | CallCompositeSupportedLocale |
|---|---|
| Allemand | CallCompositeSupportedLocale.DE |
| Japonais | CallCompositeSupportedLocale.JA |
| Anglais | CallCompositeSupportedLocale.EN_US |
| Chinois (traditionnel) | CallCompositeSupportedLocale.ZH_TW |
| Espagnol | CallCompositeSupportedLocale.ES |
| Chinois (simplifié) | CallCompositeSupportedLocale.ZH_CN |
| Italien | CallCompositeSupportedLocale.IT |
| Anglais (Royaume-Uni) | CallCompositeSupportedLocale.EN_UK |
| Coréen | CallCompositeSupportedLocale.KO |
| Turc | CallCompositeSupportedLocale.TR |
| Russe | CallCompositeSupportedLocale.RU |
| Français | CallCompositeSupportedLocale.FR |
| Néerlandais | CallCompositeSupportedLocale.NL |
| Portugais | CallCompositeSupportedLocale.PT_BR |
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 à l’aide CallCompositeSupportedLocalede . 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 Locale objet à partir de CallCompositeSupportedLocale. Prête à l’emploi, la bibliothèque d’interface utilisateur inclut un ensemble d’objets Locale utilisables avec les composants et les composites de l’interface utilisateur.
Vous pouvez également obtenir une liste d’objets à l’aide de Locale la fonction CallCompositeSupportedLocale.getSupportedLocales()statique.
Pour utiliser CallCompositeLocalizationOptions, spécifiez CallCompositeSupportedLocale et transmettez-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()
Direction de la disposition
Certaines cultures (par exemple, arabe et hébreu) peuvent avoir besoin d’une localisation pour avoir une disposition de droite à gauche. Vous pouvez spécifier layoutDirection dans le cadre de CallCompositeLocalizationOptions. La disposition du composite est miroir, mais le texte reste 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 spécifiez une langue non prise en charge, vous devez fournir des traductions pour toutes les clés de cette langue (à l’aide du string.xml fichier), puis revenir aux chaînes anglaises lorsqu’une clé n’est pas fournie.
Supposons que vous souhaitez que la barre de contrôle utilise des chaînes des paramètres régionaux anglais (ÉTATS-Unis), mais que vous souhaitez modifier l’étiquette du bouton Participer à l’appel pour démarrer la réunion en mode Configuration. Créez un string.xml fichier (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. Sinon, la langue est définie par défaut sur les chaînes anglaisesen () prédéfinies.
Langues disponibles
Le tableau suivant répertorie les traductions prêtes à l’emploi pour locale. Si vous souhaitez localiser le composite, passez locale en LocalizationOptions tant qu’options dans CallComposite.
| Langage | 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 à l’aide de locale la fonction SupportedLocale.valuesstatique.
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 des composants de la bibliothèque d’interface utilisateur à l’aide localede . Par défaut, toutes les étiquettes de texte utilisent des chaînes anglaises (en). Vous pouvez utiliser LocalizationOptions pour définir une autre locale structure. Prête à l’emploi, la bibliothèque d’interface utilisateur inclut un ensemble de locale structures utilisables avec les composants et les composites de l’interface utilisateur.
Pour utiliser LocalizationOptions, spécifiez une structure Swift locale (avec ou sans code de région) et passez-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)
Direction de la disposition
Certaines cultures (par exemple, arabe et hébreu) peuvent avoir besoin de localisation pour avoir une disposition de droite à gauche. Vous pouvez spécifier layoutDirection dans le cadre de LocalizationOptions. La disposition du composite est miroir, mais le texte reste 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 disposition de droite à gauche miroir ing. Si vous ne spécifiez layoutDirectionpas , elle 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 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 spécifiez une langue non prise en charge, vous devez fournir des traductions pour toutes les clés de cette langue (à l’aide du Localizable.strings fichier), puis revenir aux chaînes anglaises lorsqu’une clé n’est pas fournie.
Supposons que vous souhaitez que la barre de contrôle utilise des chaînes des paramètres régionaux anglais (ÉTATS-Unis), mais que vous souhaitez modifier l’étiquette du bouton Participer à l’appel pour démarrer la réunion en mode Configuration. Activez la localisation dans le projet pour l’instance locale que vous souhaitez remplacer. Créez un Localizable.strings fichier (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, Localizable.stringscréez un LocalizationOptions objet à spécifier locale et localizationFilename. Ou lorsque vous utilisez l’initialiseur locale , il examine les clés dans Localizable.stringslocale.collatorIdentifier la langue de votre projet.
let localizationOptions = LocalizationOptions(locale: Locale(identifier: "fr"),
localizableFilename: "Localizable")
let callCompositeOptions = CallCompositeOptions(localization: localizationOptions)
let callComposite = CallComposite(withOptions: callCompositeOptions)
Voix d’accessibilité pour la localisation
Pour que la voix fonctionne correctement pour une localisation, vérifiez que la langue est ajoutée aux localisations de votre application. La voixover détecte ensuite que l’application prend en charge la langue spécifiée dans LocalizationOptionslocale. Il sélectionne la voix vocale pour la langue à l’aide de la voix trouvée dans Paramètres> Accessibility>Speech sur l’appareil. Vous pouvez vérifier que la langue est ajoutée à votre projet, comme illustré dans l’exemple suivant.
