iOS i18n:XCode中的情节提要国际化

请注意,默认情况下已选中“ 使用基本本地化”复选框。 如果我们取消选中它,则XCode会询问我们要将可本地化文件移动到的特定语言环境。

在上面显示的对话框中单击“ 移动 ”会将故事板从Base.lproj移到en.lproj 。 这意味着我们的翻译人员必须跳入XCode并直接翻译情节提要,而不是简单地使用字符串文件。 我怀疑这是我们大多数时候想要的,因此我将在此处启用“基本国际化”。

注意» 如果禁用“基本国际化”然后重新启用,则可能必须遍历所有可翻译的故事板,并更改非基本语言的本地化文件类型。 XCode会将那些切换到情节提要文件。 如果需要,可以在检查器中将其还原回字符串文件。

由于我们使用的是基本国际化,因此无需做很多事情来确保我们的字符串(例如标签文本)是国际化/可翻译的。 我们只是从XCode免费获得它。

添加支持的语言环境

我们可以在项目设置中为我们的应用添加支持的语言环境。

我们只需导航到项目设置的“ 信息”选项卡,确保选择了整个项目(而不是特定的目标),然后单击

按钮在“ 本地化”下添加新的语言环境。 选择语言环境时,系统会询问我们是否要对新语言环境使用情节提要或字符串文件。 这将取决于您的项目需求,但是在大多数情况下,我们需要字符串文件,并且默认情况下会选择它们。

自动版面配置和i18n

XCode的UI布局系统Auto Layout使用约束使UI视图适应不同的屏幕尺寸,方向等。AutoLayout实际上为我们完成了很多i18n工作。 让我们看看如何。

前,后,左和右约束

默认情况下,针对视图的前缘缘设置XCode中的水平约束。 视图的前沿是从左到右的语言布局中的左边缘,而从右到左的语言布局中的右边缘。 仅通过使用后缘和前沿,我们就获得了从右到左语言(如阿拉伯语和希伯来语)的大量支持。

我们可以在XCode的检查器视图中手动关闭此功能。 例如,当我们希望视图与语言方向无关时,这将很有用。 我们只需选择一个约束,打开“ 大小”检查器 ,然后单击“ 第一项”或“ 第二项”的下拉菜单。 然后,我们单击“ 尊重语言方向”选项以将其禁用为活动约束。

当我们这样做时,我们可以看到约束与视图的绝对边缘有关,而与语言方向无关。

避免固定宽度约束

请注意,该文本在我们的某些应用标签中被截断。

对于i18n来说,这尤其是一个问题。 对于我们的开发语言,标签宽度通常可以很好地工作,但是没有考虑到相同标签的不同语言将具有不同的文本大小。 这可能会导致文本被截断并且信息丢失,从而可能使我们的用户感到困惑或烦恼。

当我们为标签设置固定宽度时,通常会发生文本截断。 我们可以通过删除固定宽度约束并使用尾随和前导约束来固定标签来解决此问题。 让我们浏览一下Open Plant Wiki中的视图并执行此操作。

这解决了我们的截断问题,并可以容纳更多的翻译。 试试看,然后重新运行该应用程序以查看效果。

注意自动版面设计警告

如果我们花时间研究XCode在构建接口时为我们生成的“自动布局”警告,则可以避免上述固定宽度问题。

只需查看XCode中用于警告的Issue导航器,我们就可以避免许多i18n布局问题。

使用多行标签

在我们的工厂详细信息屏幕中查看此丑陋的截断。

同样,如果我们只使用一种语言,我们可能会错过这个问题。 我们支持的一种语言环境的翻译可能会蔓延到下一行或更多行。 而且,如您所见,这不是固定宽度的问题。 我们的标签基本上贴到屏幕的边缘。

我们这里的问题是我们的标签设置为仅显示一行文本,这是XCode中的默认值。 为了解决这个问题,我们可以将标签的Lines属性设置为0 (零)。

这可以有效地使标签高度动态化,并且可以增长以适应其文本所需的行数。

注意» 仅当我们的标签没有固定的高度限制时,此方法才有效。

将其 Lines 属性设置为 0 ,我们的描述标签将增加以容纳其文本内容所需的多行。

将视图彼此固定

与上一个技巧保持一致,使用多行标签时,将视图相互固定通常是一个好主意。 这样一来,视图就可以随其固定的视图一起移动,并且可以根据其区域而扩大和缩小,而不会彼此重叠。

将所有标签都固定在垂直轴上时,顶部标签在占用多行时会将其下方的所有内容向下推。

注意» 使用此技术时,我们可能必须要小心。 例如,对于垂直轴上已满的视图,我们可以考虑将其嵌入ScrollView中,以避免在屏幕底部被截断。

对文本标签使用自动收缩

当我们有足够的空间时,多行标签和彼此固定的视图都是很好的。 但是,有时我们只能停留在有限的垂直空间中。

我们可以在代码中为TableView行提供动态高度以解决此问题。 另一种选择是使用自动收缩来解决该问题。

通过为文本标签选择“自动收缩 ”下的“ 最小”选项之一,并为其指定最小比例或字体大小,我们的标签将动态缩小到该大小以容纳长文本。 我们选择的最小值可确保字体不会缩小到难以辨认的程度。

选择自动缩小的最小字体大小后,我们的标签将缩小其字体大小以容纳更长的文本。

仅通过应用这些自动布局策略,我们就可以确保我们的应用程序已准备好支持多种语言。

内置容器

苹果公司的好StackView给了我们诸如TableViewStackView的高级容器,它们内置了自适应布局方向。 仅通过使用这些容器即可免费获得此行为。

当当前用户语言为从右到左时,我们的应用程序的TableView适应从右到左的方向。 为了获得这种行为,除了确保我们单元格的内容使用前导约束和尾随约束(见上文)之外,我们没有其他任何事情。

注意» 上面的屏幕快照是使用从右到左字符串从右到左伪语言(XCode中提供)获取的。 我们将在本文的后面部分介绍该语言和其他伪语言。

使用StackViews处理复杂的布局

看看我们的详细信息视图。

请注意,以从右到左的语言查看时,“ 最大长度”行看起来有点奇怪(我并不是说文本翻转,这是故意测试的一部分)。 数字和屏幕尾端之间的间距看起来很窄。 我们可以使用StackView解决此问题和其他问题。

通过选择两个视图,单击屏幕底部附近的底部箭头图标,然后选择Stack View ,我们将两个视图嵌入到父StackView 。 然后,我们可以控制StackView的对齐方式和分布,并对其施加约束。 这为我们提供了很大的灵活性,并且在我们有一组我们希望等距排列的视图的情况下(例如,一行标签)表现出色。

在将视图嵌入StackView ,有问题的数字标签在从右到左的情况下表现良好。 这是因为,与TableView一样, StackView具有内置的i18n感知能力,并适应当前语言的布局方向。

测试本地化

一旦我们完成了本地化,XCode就提供了几种测试它们的方法。 让我们看看它们。

助理编辑预览

我们可以打开XCode Assistant编辑器,然后从下拉菜单中选择“预览”以打开预览窗口。 将其放置在适当位置后,在情节ViewController中选择任何ViewController显示具有各种属性的视图。 例如,我们可以在不同的屏幕尺寸或不同的语言下查看视图。

双重长度的伪语言可能特别有用。 我鼓励您尝试所有可用的语言选项,以帮助确定布局中的问题。

“助理编辑器预览”窗格中的“双长度伪语言”视图显示,对于标签翻译较长的语言,我们可以截断文本。

“助手编辑器”的“预览”窗格中的重音伪语言表明,对于在其字符的上方和下方具有重音符号的语言,我们的标签在垂直方向上可能有点靠在一起。

使用运行方案

当我们编辑要在Simulator上运行的运行方案时,可以在其他选项中使用这些伪语言。

这些对于测试非常有帮助。 另请注意显示非本地化字符串选项。 使用基本语言进行测试时,此选项将修改缺少本地化的字符串,使它们全部大写。

在设备上设置语言

在模拟器或物理设备上进行测试时,我们可以更改系统语言以测试我们在自然栖息地中的定位。 这可以通过在物理iPhone或模拟器上转到“设置”>“常规”>“ iPhone语言”来实现。

自动化

如果您想加快本地化工作流程的速度,请查看我们可口的Automate iOS Storyboard Localization 。 它具有几个脚本,可以节省大量的手动工作。

本地化

在我们应用情节提要i18n优化之后,发送字符串文件并重新翻译(在我的情况下为阿拉伯语),我们得到的内容如下所示。

注意» 许多阿拉伯语文本实际上是Lorem ipsum。 只是和你在一起。

注意» 如果您想 随意 阅读或查看基础Swift代码, 可以 在Github上 找到 完成的项目

包起来

如果您正在与团队合作,并且希望为iOS本地化提供更井井有条的工作流程,请查看PhraseApp。 PhraseApp本机可与iOS本地化XLIFF文件一起使用。 而且,PhraseApp不仅可以与您的Git存储库同步,还可以跟踪较早的翻译,以便您的翻译人员可以返回较早的翻译,而无需麻烦您搜索代码。 它还在构建时考虑了协作,使您可以向项目中添加无限的团队成员并与Slack团队集成。 您甚至可以使用PhraseApp进行空中翻译更新,因此您的翻译可以立即获取给用户,而无需等待应用程序更新。 查看PhraseApp的全部功能集,并免费试用。

作为一个有视觉感的人,我发现使用故事板非常有用。 作为关心i18n和l10n的人,使更多人接触我的技术并在此过程中使我的客户赚到更多钱,我发现我可以加到我的工具带上的每一个i18n技巧都非常有价值。 希望您已将自己的XCode故事板技巧添加到清单中,并且您喜欢本文。 快乐编码

最初发布在 PhraseApp博客上