Partager via


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

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().

Capture d’écran montrant la localisation Android.

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
Capture d’écran de la disposition Android de droite à gauche. Capture d’écran de la disposition Android de gauche à droite.

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.

Capture d’écran présentant le projet de configuration de la localisation Android.

Capture d’écran présentant l’exemple d’étiquette personnalisée Android.

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)

Capture d'écran qui montre les options de localisation iOS.

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
Capture d’écran montrant une direction de disposition iOS de gauche à droite. Capture d’écran montrant une direction de disposition iOS de droite à gauche.

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.

Capture d’écran montrant un projet d’installation iOS.

Capture d’écran montrant une chaîne personnalisée iOS.

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.

Capture d’écran montrant les localisations de projet iOS Xcode.

Étapes suivantes