Skip to content

Commit fc30164

Browse files
authored
Merge pull request #196176 from Azure-Samples/jimchou-dev/localization
Update ios.md for localization detection
2 parents 80947c4 + 4cba2ed commit fc30164

File tree

3 files changed

+72
-40
lines changed

3 files changed

+72
-40
lines changed

articles/communication-services/how-tos/ui-library-sdk/includes/localization/ios.md

Lines changed: 62 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,48 +10,69 @@ ms.service: azure-communication-services
1010

1111
[!INCLUDE [Public Preview Notice](../../../../includes/public-preview-include.md)]
1212

13-
Azure Communication UI [open source library](https://github.com/Azure/communication-ui-library-ios) for Android and the sample application code can be found [here](https://github.com/Azure-Samples/communication-services-ios-quickstarts/tree/main/ui-library-quick-start)
13+
Azure Communication UI [open source library](https://github.com/Azure/communication-ui-library-ios) for iOS and the sample application code can be found [here](https://github.com/Azure-Samples/communication-services-ios-quickstarts/tree/main/ui-library-quick-start)
14+
15+
### Language Detection
16+
17+
If your application supports localization, the UI Library will be displayed based on user's system preferred language if it's part of the `Available Languages` listed below. Otherwise will default our predefined English (`en`) strings.
1418

1519
### Available Languages
1620

17-
The following table of `languageCode` with out of the box translations. If you want to localize the composite, pass the `languageCode` into `LocalizationConfiguration` as options into `CallComposite`.
21+
The following table of `locale` with out of the box translations. If you want to localize the composite, pass the `locale` into `LocalizationConfiguration` as options into `CallComposite`.
1822

19-
| Language | LanguageCode (Enum) | rawValue |
23+
| Language | CommunicationUISupportedLocale | identifier |
2024
|:------------------------:|:------------------:|:------------:|
21-
| German | de | de |
22-
| Japanese | ja | ja |
23-
| English | en | en |
24-
| Chinese (Traditional) | zhHant | zh-Hant |
25-
| Spanish | es | es |
26-
| Chinese (Simplified) | zhHans | zh-Hans |
27-
| Italian | it | it |
28-
| English (United Kingdom) | enGB | en-GB |
29-
| Korean | ko | ko |
30-
| Turkish | tr | tr |
31-
| Russian | ru | ru |
32-
| French | fr | fr |
33-
| Dutch | nl | nl |
34-
| Portuguese | pt | pt |
35-
36-
You can also obtain list of `languageCode` by the static function `LocalizationConfiguration.supportedLanguages`.
25+
| Chinese, Simplified | zh | zh |
26+
| Chinese, Simplified | zhHans | zh-Hans |
27+
| Chinese, Simplified (China mainland) | zhHansCN | zh-Hans-CN |
28+
| Chinese, Traditional | zhHant | zh-Hant |
29+
| Chinese, Traditional (Taiwan) | zhHantTW | zh-Hant-TW |
30+
| Dutch | nl | nl |
31+
| Dutch (Netherlands) | nlNL | nl-NL |
32+
| English | en | en |
33+
| English (United Kingdom) | enGB | en-GB |
34+
| English (United States) | enUS | en-US |
35+
| French | fr | fr |
36+
| French (France) | frFR | fr-FR |
37+
| German | de | de |
38+
| German (Germany) | deDE | de-DE |
39+
| Italian | it | it |
40+
| Italian (Italy) | itIT | it-IT |
41+
| Japanese | ja | ja |
42+
| Japanese (Japan) | jaJP | ja-JP |
43+
| Korean | ko | ko |
44+
| Korean (South Korea) | koKR | ko-KR |
45+
| Portuguese | pt | pt |
46+
| Portuguese (Brazil) | ptBR | pt-BR |
47+
| Russian | ru | ru |
48+
| Russian (Russia) | ruRU | ru-RU |
49+
| Spanish | es | es |
50+
| Spanish (Spain) | esES | es-ES |
51+
| Turkish | tr | tr |
52+
| Turkish (Turkey) | trTR | tr-TR |
53+
54+
You can also obtain list of `locale` by the static function `LocalizationConfiguration.supportedLanguages` will return list of Locale structs.
3755

3856
```swift
39-
let languageCodes: [String] = LocalizationConfiguration.supportedLanguages
40-
print(languageCodes)
57+
let locales: [String] = LocalizationConfiguration.supportedLanguages.map{ $0.identifier }
58+
print(locales)
4159

42-
// ["de", "ja", "en", "zh-Hant", "es", "zh-Hans", "it", "en-GB", "ko", "tr", "ru", "fr", "nl", "pt"]
60+
// ["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"]
4361
```
4462

4563
### LocalizationConfiguration
4664

47-
`LocalizationConfiguration` is an options wrapper that sets all the strings for UI Library components using a `languageCode`. By default, all text labels use our English (`en`) strings. If desired, `LocalizationConfiguration` can be used to set a different `languageCode`. Out of the box, the UI library includes a set of `languageCode` usable with the UI components and composites.
65+
`LocalizationConfiguration` is an options wrapper that sets all the strings for UI Library components using a `locale`. By default, all text labels use our English (`en`) strings. If desired, `LocalizationConfiguration` can be used to set a different `locale`. Out of the box, the UI library includes a set of `locale` usable with the UI components and composites.
4866

49-
#### Usage
50-
51-
To use the `LocalizationConfiguration`, specify a `languageCode` and pass it to the `CallCompositeOptions`. For the example below, we'll localize the composite to French (`fr`).
67+
To use the `LocalizationConfiguration`, specify a `locale` Swift Locale struct (with or without a region code), and pass it to the `CallCompositeOptions`. For the example below, we'll localize the composite to French for France (`fr-FR`).
5268

5369
```swift
54-
let localizationConfig = LocalizationConfiguration(languageCode: "fr")
70+
// Creating swift Locale struct
71+
var localizationConfig = LocalizationConfiguration(locale: Locale(identifier: "fr-FR"))
72+
73+
// Use intellisense CommunicationUISupportedLocale to get supported Locale struct
74+
localizationConfig = LocalizationConfiguration(locale: CommunicationUISupportedLocale.frFR)
75+
5576
let callCompositeOptions = CallCompositeOptions(localization: localizationConfig)
5677
let callComposite = CallComposite(withOptions: callCompositeOptions)
5778
```
@@ -65,12 +86,12 @@ Certain cultures (Arabic, Hebrew, etc.) may need for localization to have right
6586
```swift
6687
var localizationConfig: LocalizationConfiguration
6788

68-
// Initializer with langaugeCode and layoutDirection
69-
localizationConfig = LocalizationConfiguration(languageCode: LanguageCode.en,
89+
// Initializer with locale and layoutDirection
90+
localizationConfig = LocalizationConfiguration(locale: Locale(identifier: "en"),
7091
layoutDirection: .rightToLeft)
7192

72-
// Initializer with langaugeCode, localizableFilename, and layoutDirection
73-
localizationConfig = LocalizationConfiguration(languageCode: LanguageCode.en,
93+
// Initializer with locale, localizableFilename, and layoutDirection
94+
localizationConfig = LocalizationConfiguration(locale: Locale(identifier: "en"),
7495
localizableFilename: "Localizable",
7596
layoutDirection: .rightToLeft)
7697

@@ -87,23 +108,29 @@ You can see below the right-to-left layout mirroring, by default without specify
87108

88109
### Customizing Translations
89110

90-
There are two options to customize the language translations that we provide. To override a particular string, you can find the list of localization keys here for the key-value pair. You can specify the `languageCode` to be one of the supported languages, and when a key isn't provided, will fall back to our supported translation string. If you specified an unsupported language, you should provide translations for all the keys for that language (using Localizable.strings file), and will fall back to English strings when a key isn't provided.
111+
There are two options to customize the language translations that we provide. To override a particular string, you can find the list of localization keys here for the key-value pair. You can specify the `locale` to be one of the supported languages, and when a key isn't provided, will fall back to our supported translation string. If you specified an unsupported language, you should provide translations for all the keys for that language (using Localizable.strings file), and will fall back to English strings when a key isn't provided.
91112

92113
Let's say you wish to have the `ControlBar` with strings from our English (US) locale but you want to change the label of `JoinCall` button to "Start Meeting" (instead of "Join call") in Setup View.
93114

94115
#### Override using Localization.strings file
95116

96-
Enable Localization in the Project, below for the `languageCode` you want to override. Create a `Localizable.strings` file (or other filename with extension `.strings`) with the key-value pair for selected keys you want to override. In the example below, we're overriding the key `AzureCommunicationUI.SetupView.Button.JoinCall`.
117+
Enable Localization in the Project, below for the `locale` you want to override. Create a `Localizable.strings` file (or other filename with extension `.strings`) with the key-value pair for selected keys you want to override. In the example below, we're overriding the key `AzureCommunicationUI.SetupView.Button.JoinCall`.
97118

98119
:::image type="content" source="media/ios-setup-project.png" alt-text="iOS setup project":::
99120

100-
To specify you're overriding with Localization.strings, create a `LocalizationConfiguration` object to specify the `languageCode` and `localizationFilename`.
121+
To specify you're overriding with Localization.strings, create a `LocalizationConfiguration` object to specify the `locale` and `localizationFilename`. Or when using the `locale` initializer, will look keys in Localizable.strings for `locale.collatorIdentifier` as the language in your project.
101122

102123
```swift
103-
let localizationConfig = LocalizationConfiguration(languageCode: LanguageCode.fr.rawValue,
124+
let localizationConfig = LocalizationConfiguration(locale: Locale(identifier: "fr"),
104125
localizableFilename: "Localizable")
105126
let callCompositeOptions = CallCompositeOptions(localization: localizationConfig)
106127
let callComposite = CallComposite(withOptions: callCompositeOptions)
107128
```
108129

109130
:::image type="content" source="media/ios-custom-string.png" alt-text="iOS custom string":::
131+
132+
### Accessibility VoiceOver for Localization
133+
134+
For VoiceOver to work properly for a localization, make sure the language is added into your app's Localizations. So the VoiceOver will detect the app supports the language specified in LocalizationConfiguration locale, and select the Speech voice for the language using the voice found in device's Settings -> Accessibility -> Speech. You can verify if the language is added to your project as shown below.
135+
136+
:::image type="content" source="media/ios-xcode-project-localizations.png" alt-text="iOS XCode Project Localizations":::
Loading

articles/communication-services/quickstarts/ui-library/includes/get-started-call/ios.md

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@ Name the project `UILibraryQuickStart` and select `Storyboard` under the `Interf
3838
2. Add the following to your Podfile:
3939

4040
```
41-
platform :ios, '13.0'
41+
platform :ios, '14.0'
4242
4343
target 'UILibraryQuickStart' do
4444
use_frameworks!
45-
pod 'AzureCommunicationUI', '1.0.0-beta.2'
45+
pod 'AzureCommunicationUICalling', '1.0.0-beta.1'
4646
end
4747
```
4848

@@ -79,7 +79,7 @@ Go to 'ViewController'. Here we'll drop the following code to initialize our Com
7979
```swift
8080
import UIKit
8181
import AzureCommunicationCalling
82-
import AzureCommunicationUI
82+
import AzureCommunicationUICalling
8383

8484
class ViewController: UIViewController {
8585

@@ -230,12 +230,17 @@ let callCompositeOptions = CallCompositeOptions(theme: CustomThemeConfiguration(
230230

231231
### Apply localization configuration
232232

233-
You can change the language by creating a custom localization configuration and include it to your `CallCompositeOptions`. By default, all text labels use our English (`LanguageCode.en.rawValue`) strings. If desired, `LocalizationConfiguration` can be used to set a different `languageCode`. Out of the box, the UI library includes a set of `languageCode` usable with the UI components. `LocalizationConfiguration.supportedLanguages` provides a list of all supported languages.
233+
You can change the language by creating a custom localization configuration and include it to your `CallCompositeOptions`. By default, all text labels use our English (`CommunicationUISupportedLocale.en`) strings. If desired, `LocalizationConfiguration` can be used to set a different `locale`. Out of the box, the UI library includes a set of `locale` usable with the UI components. `LocalizationConfiguration.supportedLanguages` provides a list of all supported languages.
234234

235235
For the example below, the composite will be localized to French (`fr`).
236236

237237
```swift
238-
let localizationConfiguration = LocalizationConfiguration(languageCode: "fr")
238+
// Creating swift Locale struct
239+
var localizationConfiguration = LocalizationConfiguration(locale: Locale(identifier: "fr-FR"))
240+
241+
// Use intellisense CommunicationUISupportedLocale to get supported Locale struct
242+
localizationConfiguration = LocalizationConfiguration(locale: CommunicationUISupportedLocale.frFR)
243+
239244
let callCompositeOptions = CallCompositeOptions(localizationConfiguration: localizationConfiguration)
240245
```
241246

0 commit comments

Comments
 (0)