|
| 1 | +--- |
| 2 | +description: In this tutorial, you learn how to use the Calling composite on iOS |
| 3 | +author: jorgegarc |
| 4 | + |
| 5 | +ms.author: jorgegarc |
| 6 | +ms.date: 04/03/2022 |
| 7 | +ms.topic: include |
| 8 | +ms.service: azure-communication-services |
| 9 | +--- |
| 10 | + |
| 11 | +[!INCLUDE [Public Preview Notice](../../../../includes/public-preview-include.md)] |
| 12 | + |
| 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) |
| 14 | + |
| 15 | +### Available Languages |
| 16 | + |
| 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`. |
| 18 | + |
| 19 | +| Language | LanguageCode (Enum) | rawValue | |
| 20 | +|:------------------------:|:------------------:|:------------:| |
| 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`. |
| 37 | + |
| 38 | +```swift |
| 39 | +let languageCodes: [String] = LocalizationConfiguration.supportedLanguages |
| 40 | +print(languageCodes) |
| 41 | + |
| 42 | +// ["de", "ja", "en", "zh-Hant", "es", "zh-Hans", "it", "en-GB", "ko", "tr", "ru", "fr", "nl", "pt"] |
| 43 | +``` |
| 44 | + |
| 45 | +### LocalizationConfiguration |
| 46 | + |
| 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. |
| 48 | + |
| 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`). |
| 52 | + |
| 53 | +```swift |
| 54 | +let localizationConfig = LocalizationConfiguration(languageCode: "fr") |
| 55 | +let callCompositeOptions = CallCompositeOptions(localization: localizationConfig) |
| 56 | +let callComposite = CallComposite(withOptions: callCompositeOptions) |
| 57 | +``` |
| 58 | + |
| 59 | +:::image type="content" source="media/ios-localization.png" alt-text="iOS localization"::: |
| 60 | + |
| 61 | +### Layout Direction |
| 62 | + |
| 63 | +Certain cultures (Arabic, Hebrew, etc.) may need for localization to have right-to-left layout. You can specify the `layoutDirection` as part of the `LocalizationConfiguration`. The layout of the composite will be mirrored but the text will remain in the direction of the string. |
| 64 | + |
| 65 | +```swift |
| 66 | +var localizationConfig: LocalizationConfiguration |
| 67 | + |
| 68 | +// Initializer with langaugeCode and layoutDirection |
| 69 | +localizationConfig = LocalizationConfiguration(languageCode: LanguageCode.en, |
| 70 | + layoutDirection: .rightToLeft) |
| 71 | + |
| 72 | +// Initializer with langaugeCode, localizableFilename, and layoutDirection |
| 73 | +localizationConfig = LocalizationConfiguration(languageCode: LanguageCode.en, |
| 74 | + localizableFilename: "Localizable", |
| 75 | + layoutDirection: .rightToLeft) |
| 76 | + |
| 77 | +// Add localization configuration as option |
| 78 | +let callCompositeOptions = CallCompositeOptions(localization: localizationConfig) |
| 79 | +let callComposite = CallComposite(withOptions: callCompositeOptions) |
| 80 | +``` |
| 81 | + |
| 82 | +You can see below the right-to-left layout mirroring, by default without specifying `layoutDirection` will default to false (left-to-right layout). |
| 83 | + |
| 84 | +|`layoutDirection = .leftToRight` (default) | `layoutDirection = .rightToLeft` | |
| 85 | +| -------------------------------------------------------- | --------------------------------------------------------------- | |
| 86 | +| :::image type="content" source="media/ios-righttoleft-false.png" alt-text="iOS layout direction left-to-right"::: | :::image type="content" source="media/ios-righttoleft-true.png" alt-text="iOS layout direction right-to-left"::: | |
| 87 | + |
| 88 | +### Customizing Translations |
| 89 | + |
| 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. |
| 91 | + |
| 92 | +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. |
| 93 | + |
| 94 | +#### Override using Localization.strings file |
| 95 | + |
| 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`. |
| 97 | + |
| 98 | +:::image type="content" source="media/ios-setup-project.png" alt-text="iOS setup project"::: |
| 99 | + |
| 100 | +To specify you're overriding with Localization.strings, create a `LocalizationConfiguration` object to specify the `languageCode` and `localizationFilename`. |
| 101 | + |
| 102 | +```swift |
| 103 | +let localizationConfig = LocalizationConfiguration(languageCode: LanguageCode.fr.rawValue, |
| 104 | + localizableFilename: "Localizable") |
| 105 | +let callCompositeOptions = CallCompositeOptions(localization: localizationConfig) |
| 106 | +let callComposite = CallComposite(withOptions: callCompositeOptions) |
| 107 | +``` |
| 108 | + |
| 109 | +:::image type="content" source="media/ios-custom-string.png" alt-text="iOS custom string"::: |
0 commit comments