iOS Tutorial on Internationalization and Localization

iOS国际化和本地化教程

2020-07-24 23:42 Lingua Greca

本文共2747个字,阅读需28分钟

阅读模式 切换至中文

iOS, Apple’s mobile operating system, has been thriving at an incredible pace over the last few years. In fact, its growth is so rapid, that according to Apple, there are currently over 150 countries where the App Store is available and more than 40 languages that iOS devices support. This makes it quite obvious that your iOS app needs to address users from different regions in the world in multiple languages from the very beginning. How to get there is the question that this end-to-end iOS tutorial on internationalization and localization intends to answer. iOS developers often tend to use both terms interchangeably. In reality, while being interconnected, they are quite different. Therefore, we’ve divided this iOS tutorial into two subsections: iOS internationalization, and iOS localization. Before we delve deeper into the topics subsections mentioned-above, let us first have a look at some substantial prerequisites. Getting Ready For iOS internationalization iOS Internationalization Setting Up the Project for I18n Adding Languages for Localization Changes in the Project After Language Support Localization(l10n) in iOS Within Xcode Exporting Localizable Files for Translators Recommended Method for InternationalizationA More Efficient I18n Solution A More Efficient I18n Solution Getting Ready For iOS internationalization First things first, for all the beginners out there, to implement i18n and l10n support for an iOS app, we’ll be using Swift (version 5), the programming language for iOS. We’ll also employ Xcode, the integrated development environment that pulls all the tools needed to produce an iOS app (version 11). Now, if you’re ready, start off by determining the regions you want to target, and what languages those regions have. In internationalization, these regions are also known as locales. For the purposes of this iOS tutorial, I am going to use English as the base language, French, Chinese (Simplified), as well as German as the target languages for localization. You can add as many languages as you want to your iOS app, depending on both your requirements and target audience. The steps for adding other languages would be exactly the same. Now that we have discussed the basics, it is time to dive into the subsections mentioned before. iOS Internationalization Internationalization (i18n) is the process of making your iOS app adaptable to different locales. From an iOS developer’s perspective, it is the process of making strings externally editable – be it in a storyboard or in code. Furthermore, in order to set dates, numbers, etc. according to the respective locale, you have to use different build-in classes. For example, we can use the “formatting” class to format the dates according to the region, numbers according to the preferred language, and so on. For now, we are going to use the simple setup to get used to the internationalization process. Recommendation » Always do Internationalization and Localization steps after completing the design and the coding part of your application. Why? Because Xcode will save most of your time by adding strings automatically in the localizable files. If you do these steps before writing the code for your application, you have to manually add all of the strings in their designated files (for localization). Bottom-line is that you should do all the steps of internationalization at the very end. This approach is true if you are using interface builder and storyboards in your project. If however, you are laying out your UI components programmatically, it will be better if you start this process at the beginning of the project to save you enormous time and to avoid omitting any strings for localization. Note: You are likely to have any of these possible scenarios when trying to internationalize and localize your iOS application. The first case is when the app UI components are completely built out in the interface builder using storyboards or Xib’s. The second scenario is when the app UI components are built both using storyboards and programmatically in code. And the last one is when the app UI components are built programmatically in code. You can have any of these variations in your app. However, in the demo app, we set up our UI components in storyboards and programmatically in code. As an iOS developer, you need to take the following steps to internationalize your app with confidence: Setting Up the Project for I18n To get started, first, you need to download our starter project on GitHub or you can clone the repository. This is a simple app displaying our solar system, which we will be building upon. It will help us apply the substantial steps in internationalizing and localizing an iOS app. We can apply this process if we are using storyboards, programmatic UI, or a combination of both in building out our UI components. The app is also structured to make it possible to localize not only text but also image assets in our app. So to get started, run the code on Xcode and your app would look as shown below: We are now all set to internationalize our app so follow the steps below: As you can see in the above picture, there are three boxes: red, black, and blue. From the Navigator panel, you should first select the root file (.xcodeproj) of your project (in the red box shown above). Select the type of project. As you can see, there are two options available. Targets is the default option. You need to change it to Project (in the black box shown above). Make sure to check the option “Use Base Internationalization” if it’s not already checked (shown in the blue box above). It’s usually checked by default. What is “Use Base Internationalization” in Xcode? » Upon creating a new project, Xcode automatically generates files related to localization. When you check the “Use Base Internationalization” option, Xcode transfers the Main.storyboard and LaunchScreen.storyboard into the “Base.lproj” folder for the default language. Our Base language in this tutorial is English, as mentioned in the Decisions section. Once you have done this basic step, you need to add different languages that you want your application to support. In this tutorial, we are going to use three languages—French, Chinese (Simplified), and German—for localization representing different locales, as discussed in the Decisions section. Let us add the support for these three languages! Adding Languages for Localization In order to add languages in your application for Localization (l10n), you need to go to the project Info settings again, and click the “+” button (as shown below): Xcode will present to you the list of languages you can select from. Let us choose French first! Upon selecting any language (in our case French), Xcode will ask you to choose files and reference language to create your desired language localization (French, in our case), uncheck LaunchScreen.storyboard. Apple allows only static assets in the LaunchScreen and does not support localization in the LaunchScreen. In the above picture, two things require your attention: Reference Language—the Base language in which we have designed our application, which is by-default English (leave it as is!). File Types—make sure that all files are set to Localizable Strings. Click Finish as shown in the screenshot above Changes in the Project After Language Support Upon adding support for the French language localization, you will see the following three changes in your project files: Xcode will create a folder named “fr.lproj” in your project since we have added support for the French language. In that folder, Xcode will create one string file associated with the Main.storyboard that we have selected in the previous step. The third change, however, depends upon when you add localization support to your application. If you followed my recommendation mentioned at the top regarding when to internationalize and localize your application, you would see the label presented in your Main.storyboard will be given an Object-ID and added to the Main.strings file.Click on Main.storyboard which is now a folder and you would see the new string file (Main.strings) added as shown below. We have only one label  “Ready, let’s Go !!!” in Main.storyboard. This means that we would have one “Ready, let’s Go !!!” object in Main.strings (French) file with its ObjectID. Check out the screenshot below for the content of Main.strings(French) file. Add Chinese (Simplified) and German languages as well by following the aforementioned steps. The steps we have taken so far works perfectly well when we are using only storyboards. How about when we layout our UI components programmatically in code? How do we enable i18n in that case? Well, we have got you covered, you need to create a strings file in Xcode and name it Localizable. Check out the screenshots below: Select the Strings file and name it Localizable and create the file. The Localizable.strings file will hold the strings we would want to localize later on. Select the Localizable.strings file you created and navigate to the File inspector. Click on Localize under Localization.     This will display a prompt to select the language of localization. First, we will select our base language English and check the remaining Chinese, French, and German languages respectively from the file inspector as shown below. Once we have done this, we will now have four Localizable strings files with one being our base language English. We are almost set to finally localize the app but we still have one thing left, our assets, we want to be able to localize the images for the nine planets we used in the app. As our app shows the images of the nine solar planets we have, we want each locale we support to have images with text that captures their own language. First, click on the Assets folder (the green box) from the Navigation panel, and select one image of the planets, let’s start with the image of earth. From the Attributes inspector, click on Localize: Check all the three languages, French, Chinese, German. Once you have done this, it will create new areas where you would add the respective images for the languages you support when localizing. You can do the same for the remaining images of the planets. We are now going to look into the localization part of the application properly. Localization(l10n) in iOS Localization, in iOS, is basically the translating process. There are two methods you can use to translate your application. Directly in the Xcode (by the developer) Exporting Localizable Files (in XLIFF format) for translators Let’s discuss both of these methods one by one! Within Xcode First, let’s start with the easy one. Let’s localize our images. The images we will be using are already bundled with the project, we have already prepared the images for the respective languages we want to support. To grab the assets, click on DemoAppAssets.zip from the navigation panel of the demo project and right-click and select Show on Finder, from there, you can easily copy the zipped file to your Desktop and unzip it to have access to all the images. From the navigation panel, click on the Assets folder. You will see the sections where you will put in images for all the different languages we support. The blue box section above will be taking images with text in German, and the same applies in the red and black boxes above. From the images you have downloaded, drag in earth image from the German folder to the blue box, from the French folder, drag in earth image to the red box, and from the Chinese folder, drag in earth image to the black box. Do the same for the remaining images of the planets. Once you are done with this, the assets are fully localized. Now, let’s focus on localizing the text contents we used in our code. We used both storyboards and programmatic UI in this demo app, let’s start by localizing the text contents we added programmatically in code. Open up Localizable.strings file which is currently empty for now. This file takes in key-value pair of strings which must be terminated with a semicolon (;). We have two texts to localize:  “The Solar Planets” inside the HeaderView,  and “Explore” inside the WelcomeController. Inside Localizable.strings (English) file put in these key-value pairs: To actually use this in our code, we need to use the API Apple provided for localization. We will be using the macroNSLocalizedString(key, comment) which returns a localized version of the strings. The key will be the one we used in the Localizable.strings, the comment is useful if you want to add additional context that would help your translators. One thing to note is that you should ensure your string keys are unique and if for any reason you mistakenly used the wrong key when calling NSLocalizedString(key, comment) , the wrong key you provided will be returned to you as the localized string. You have to be mindful of this. We have created a String extension in the code that would help make things much easier for us. Just before we continue, I want to draw your attention to another handy API Apple provided which we can also use while localizing our app. It is This API becomes useful when you want to split your strings files into smaller manageable sizes especially when you are working on a very large app and you don’t want to have all your localizable strings in one Localizable.strings file. NSLocalizedString(key, comment)only reads Localizable.strings file by default. For the parameters of the API above, the tableName captures the name of the strings file you created, the bundle is the bundle containing the strings file, the value is the string you want to be displayed in case a wrong key was provided, and the comment is used to provide additional context to the translators. Now, let’s continue, open String+Extension.swift file to see what we have got there. To Localize strings in the HeaderView file and WelcomeController respectively, replace the “The Solar Planets” and “Explore” with: We are now good to go, we have done all the hard work. The other part is adding the translated text version for the other languages we support. How do we achieve this? To use Google Translate? No, I don’t recommend that. This is because it might not give you proper translation for the text, you might end up doing more harm than good to your users who may find the translation very offensive. Phrase actually got you covered here and will provide you with the right service to translate your texts by human translators who are experts in the respective languages you want to support. Since we are working on the demo app, let’s try to translate the text contents using Google Translate as we don’t really care right now, this is not a production app, so nothing to worry about. We will translate the text above in Chinese, do the remaining one for the other languages. Open Localizable.strings (Chinese, Simplified) and put in these strings. We are almost done, but wait, we still haven’t localized the text contents generated for us in our storyboards. Xcode has already done the hard work for us, all we need to do is replace the text contents with our translated versions. We will have to localize the texts in our Main.storyboard. In our LaunchScreen.storyboard, we have a static image, Apple recommends we use a static image here in our LaunchScreen and avoid using strings that might need to be localized here. Hence, we won’t be localizing our LaunchScreen.strings file. Open Main.strings (Chinese, Simplified) and replace “Ready, let’s Go !!!” with “准备好了,开始吧!” Gotten to this stage, pat yourself at the back, we did it. We have fully localized our contents both text and image assets. Now is the moment of truth, let’s test out if this actually works. We will be testing this out in Simulator by changing the language of the application in Xcode. Check below on how you can achieve this. From Above, click on Edit Scene: Select Run and click on Options, then change the Application Language in the blue box to Chinese, Simplified. Once done, click on Close and run the project. Yes,
iOS,苹果移动操作系统,在过去几年里发展速度之快,令人惊叹。 事实上,据苹果称,目前苹果应用商店在150多个国家上线,其iOS设备支持40多种语言。 显然,这就要求iOS应用从一开始就需要用多种语言来命名世界不同地区的用户。 如何实现这一点,就是本篇iOS国际化与本地化教程要回答的问题。 iOS开发人员通常倾向于互换使用这两个术语。 在现实中,二者在相互联系的同时,它们又有很大的不同。 因此,我们将本iOS教程分为两部分: iOS国际化与 iOS本地化。 在深入研究上述子标题前,让我们先看一看实质性的先决条件。 为iOS国际化做好准备 iOS国际化 设立本地化项目 添加本地化语言 语言支持后的项目变化 iOS中的本地化(l10n) 集成开发工具Xcode 为译者导出可本地化文件 本地化推荐方法:一种更有效的本地化解决方案 更高效的本地化解决方案 为iOS国际化做好准备 首先,要实现iOS应用程序的国际化和本地化支持,所有初学者将使用iOS的编程语言Swift(5.0版本)。 我们还将使用Xcode集成开发环境,它包含了生成iOS应用程序(11版)所需的所有工具。 现在,如果您准备好了,首先确定您想选择的地区,以及对应的语言。 国际化中,这些区域也称为locales。 在本iOS教程中,将使用英语作为基本语言,法语,中文(简体)以及德语作为本地化的目标语言。 你可以在iOS应用程序中添加任意多种语言,这取决于你的需求和目标受众。 添加其他语言的步骤将完全相同。 了解了基础知识后,现在该讨探讨上述问题了。 iOS国际化 国际化(i18n)过程就是让您的iOS应用程序适应不同地区的过程。 从iOS开发人员的角度来看,则是实现字符串外部可编辑的过程——无论是在脚本还是在代码中。 此外,为了根据各自的地区设置日期,数字格式等,您必须使用不同的内置类。 例如,我们可以使用“Formatting”类根据区域设置日期的格式,根据首选语言设置数字的格式,等等。 现在,我们将通过简单设置来适应国际化过程。 建议:在完成应用程序的设计和编码部分之后,始终执行国际化和本地化步骤。 原因何在? 因为Xcode将通过在可本地化文件中自动添加字符串来节省大部分时间。 如果在为应用程序编写代码之前执行这些步骤,则必须手动将所有字符串添加到指定的文件中(用于本地化)。 归根结底,你应该在最后完成国际化的所有步骤。 如果您在项目中使用界面生成器和故事板,则此方法是正确的。 但是,如果您是以编程方式布局UI组件,那么最好在项目开始时就开始这个过程,以节省大量时间,并避免为本地化而省略任何字符串。 注意:在国际化和本地化您的iOS应用程序时,您很可能会出现以下场景: 情况一应用程序UI组件完全在界面构建器中建成时,使用故事板或XIB。 情况二:应用程序UI组件同时使用故事板和以编程方式在代码中构建。 最后一种情况是应用程序UI组件是以编程方式在代码中构建的。 你可以应用程序中使用这些变体中的任何一种。 然而,在演示应用程序中,我们在故事板中设置了我们的UI组件,并以编程方式在代码中设置。 作为一名iOS开发者,你需要采取以下步骤,实现APP国际化: 设置本地化项目 首先,您需要在GitHubor上下载初学者项目,拷贝存储库。 这款简易应用程序,显示我们的太阳系,并在此基础上建立。 它将帮助我们应用国际化和本地化iOS应用程序的实质性步骤。 如果我们在构建UI组件时使用故事板,编程UI或两者的组合,则可以应用此程序。 该应用程序的本地化范围不仅有文本,还有应用程序中的图像资产。 因此,首先,在Xcode上运行代码,您的应用程序如下所示: 现在已经准备好将应用程序国际化,请遵循以下步骤: 正如上图所示,三个框:红色框,黑色框,和蓝色框。 首先,从导航器面板中,选择项目根文件(。xcodeproj)(上图所示红色框)。 选择项目类型。 如图所示,有两个选项可用。 Targets是默认选项。 您需要将其更改为Project(即上图所示黑色框)。 如果“Use Base Internationalization”选项尚未选中,请确保选中该选项(如上面的蓝色框所示)。 默认情况下通常是选中的。 Xcode中的“Use Base Internationalization”是指什么? 在创建一个新项目时,Xcode会自动生成与本地化相关的文件。 当您选中“Use Base Internationalization”选项时,Xcode将main.storyboard和launchscreen.storyboard转移到默认语言的“Base.lproj”文件夹中。 我们在本教程中的基本语言是英语,如决策部分所述。 完成这个基本步骤后,需添加应用程序支持的不同语言。 在本教程中,我们将使用三种语言--法语,汉语(简体)和德语--进行本地化,表示不同的地区,如决策部分所述。 让我们添加这三种语言支持! 添加本地化语言 为了在您的应用程序中添加语言进行本地化(l10n),您需要再次转到项目信息设置,并单击“+”按钮(如下所示): Xcode将向您显示可供选择的语言列表。 让我们先选法语! 一旦选择一种语言(以法语为例),Xcode会要求您选择文件和参考语言来创建您想要的语言本地化(以法语为例),取消选中LaunchScreen.Storyboard。 苹果只允许在LaunchScreen中使用静态资产,不支持在LaunchScreen中进行本地化。 在上图中,需要注意两点: 参照语言——设计应用程序时使用的基本语言,默认为英语(保持原样!)。 文件类型——确保所有文件都设置为可本地化字符串。 单击Finish,如上面的屏幕截图所示 语言支持后项目变化 添加对法语本地化的支持后,您将在项目文件中看到以下三个更改: Xcode将在您的项目中创建一个名为“fr.lproj”的文件夹,因为我们已经添加了对法语语言的支持。 在该文件夹中,Xcode将创建一个与我们在上一步中选择的main.storyboard相关联的字符串文件。 然而,第三个变化取决于何时向应用程序添加本地化支持。 如果您遵循我在开头提到的关于何时国际化和本地化应用程序的建议,您将看到在main.storyboard中显示的标签将被赋予对象ID并添加到main.strings文件中。单击main.storyboard(现在是一个文件夹),您将看到添加的新字符串文件(main.strings),如下所示。 我们在Main.Storyboard中只有一个标签“Ready,Let's Go!!!”。 这意味着我们将在main.strings(法语)文件中有一个“ready,let's Go!!!”对象及其objectid。 查看下面的屏幕截图,了解main.strings(法语)文件的内容。 按照上述步骤添加中文(简体)和德语。 当只使用故事板时,到目前为止,上述步骤运行良好。 当我们以编程方式在代码中布局UI组件时,情况如何? 在这种情况下,我们如何启用国际化? 好吧,我们已经介绍过了,您需要在Xcode中创建一个字符串文件,并将其命名为可本地化。 查看下面的截图: 选择Strings文件并将其命名为Localizable,然后创建该文件。 Localizable.strings文件将保存我们稍后想要本地化的字符串。 选择您创建的Localizable.strings文件,然后导航到文件检查器。 单击Localize下的Localize。 这将显示选择本地化语言的提示。 首先,我们将选择我们的基本语言英语,并从文件检查器中分别检查其余的中文,法语和德语,如下所示。 一旦完成上述步骤,将有四个可本地化的字符串文件,其中一个是我们的基本语言英语。 至此,本地化应用程序的设置已几近完成,但还丢了一点,我们的资产,我们希望把应用程序中使用的图像本地化,即九大行星。 由于应用程序显示了所拥有的太阳系九个行星的图像,我们希望我们支持的每一个地区都有图像和文字捕捉他们自己的语言。 首先,单击导航面板中的资产文件夹(绿色框),并选择一个行星图像,让我们从地球图像开始。 在Attributes检查器中,单击Localize: 检查所有三种语言,法语,汉语,德语。 一旦您完成了这一操作,它将创建新的区域,您将在其中添加您在本地化时支持的语言的相应图像。 你可以对剩下的行星图像做同样的处理。 我们现在将研究应用程序的本地化部分。 iOS中的本地化(l10n) 在iOS中,本地化基本上就是翻译过程。 有两种方法可以用来翻译应用程序。 直接在Xcode中进行操作(由开发人员) 为译者导出可本地化文件(XLIFF格式) 下面让我们分别讨论这两种方法! 在Xcode内进行操作 首先,从简单的内容开始。 定位图像。 待使用图像已经与项目捆绑在一起,已经为我们想要支持的相应语言准备了图像。 要获取这些资产,请从演示项目的导航面板中单击demoappassets.zip,然后右键单击并选择Show on Finder,从那里,您可以轻松地将压缩文件复制到您的桌面,然后解压缩以访问所有图像。 在导航面板中,单击Assets文件夹。 您将看到为支持的不同语言放入图像的部分。 上面的蓝色方框部分将拍摄带有德文文本的图像,上面的红色和黑色方框也同样适用。 从您下载的图片中,将“地球图像”从德语文件夹中拖到蓝色框中,从法语文件夹中,将“地球图像”拖到红色框中,从中文文件夹中,将“地球图像”拖到黑色框中。 对剩下的行星图像做同样的处理。 一旦完成这些操作,资产就完全本地化了。 现在,将代码中使用的文本内容本地化。 在这个演示应用程序中同时使用了故事板和编程UI,在代码中以编程方式添加的文本内容开始,对其进行本地化。 打开当前为空的Localizable.strings文件。 此文件接受键值对字符串,这些字符串必须以分号(;)结束。 我们有两个文本需要本地化:HeaderView中的“the Solar Planets”和WelcomeController中的“Explore”。 在localizable.strings(英文)文件中放入以下键值对: 要在我们的代码中实际使用这一点,我们需要使用苹果公司为本地化提供的API。 我们将使用macroNSLocalizedString(key,comment),它返回字符串的本地化版本。 关键字是在localizable.strings中使用的关键字,如果您想要添加额外的语境以帮助您的翻译人员,注释将非常有用。 需要注意的一点是,您应该确保您的字符串键是唯一的,如果由于任何原因在调用NSLocalizedString(key,comment)时错误地使用了错误的键,您提供的错误键将作为本地化字符串返回给您。 你要注意这一点。 我们已经在代码中创建了一个字符串扩展,这将帮助我们简化工作。 在我们继续之前,我想提请大家注意苹果公司提供的另一个方便的API,我们也可以在本地化应用程序时使用它。 它是 当您想要将字符串文件拆分成更小的可管理大小时,特别是当您在一个非常大的应用程序上工作,并且不想将所有可本地化的字符串都放在一个localizable.strings文件中时,这个API就会变得非常有用。 默认情况下,NSLocalizedString(key,comment)只读取Localizable.strings文件。 对于上述API的参数,表名捕获您创建的字符串文件的名称,bundle是包含字符串文件的bundle,value是您希望在提供错误键的情况下显示的字符串,注释用于为翻译器提供附加上下文。 现在继续操作,打开String+Extension.swift文件,看看文件中有什么。 要分别在HeaderView文件和WelcomeController中本地化字符串,请将“the Solar Planets”和“Explore”替换为: 到此,已经完成了所有的艰苦工作。 另一部分是添加我们支持的其他语言的翻译文本。 如何实现这一点? 使用谷歌翻译? 不,我不建议这么做。 这是因为它可能不会为您提供正确的文本翻译,最终可能对您的用户有害无益,他们可能发现翻译十分糟糕。 实际上已覆盖短语,并将为您提供优良的服务,由您所支持的语言的对应专业译员来翻译文本。 现在还处于应用程序演示阶段,不在意翻译结果,所以尝试使用谷歌翻译来翻译文本内容,这不是在生产应用程序,所以无需担心。 我们将把上面的文字翻译成中文,把剩下的一个翻译成其他语言。 打开localizable.strings(中文,简体)并放入这些字符串。 差不多完成了,但是等一下,仍然没有在故事板中为生成的文本内容本地化。 Xcode已经完成了工作,我们所需要做的就是用我们的翻译版本替换文本内容。 不得不对Main.Storyboard中的文本进行本地化。 在LaunchScreen.Storyboard中,有一个静态图像,苹果建议我们在LaunchScreen.Storyboard中使用静态图像,并且避免使用可能需要在这里本地化的字符串。 因此,不会本地化launchscreen.strings文件。 打开Main.Strings(中文,简体),将“Ready,Let's Go!!!”替换为“,!” 走到这一步,鼓励一下自己,我们做到了。 我们已经完全本地化了我们的内容,包括文本和图像资产。 现在是关键时刻,测试一下是否真的有效。 我们将通过在Xcode中更改应用程序的语言来在模拟器中测试这一点。 请查看下面如何实现这一目标。 从上面点击编辑场景: 选择运行并点击选项,然后将蓝色框中的应用程序语言更改为中文,简体。 完成后,单击Close并运行项目。 可以!我们做到了!

以上中文文本为机器翻译,存在不同程度偏差和错误,请理解并参考英文原文阅读。

阅读原文