本地化您的 SwiftUI app

学习如何本地化您的 SwiftUI app 以及如何将它推向全球受众。探索如何本地化 SwiftUI 中的字符串，包括含样式和格式的字符串。我们将向您展示如何通过 SwiftUI 自动处理任务 (如布局和键盘快捷指令等) 来节省时间，并向您介绍 Xcode 13 中的本地化流程。为了充分了解本节内容并深入学习 Markdown 语言和 AttributedString，请查看 WWDC21“Foundation 新功能”。

资源

相关视频

WWDC22

构建 Swift 软件包插件

WWDC21

下载

大家好我叫保罗博罗霍夫是SwiftUI Mac团队的一名工程师稍后来自本地化团队的凯特科诺年科将与我一起为您讲解如何本地化基于 SwiftUI 开发的 App 要讲解这个过程我们这里以Fruta App作为例子您或许已经见过这个App了这个应用为您提供海量的冰沙选项您可直接下单购买也可按照食谱自己在家制作

这里我们将为App进行俄语本地化因为我和凯特母语都是俄语而且不同语言的本地化是您开发App时很可能遇到的问题这将是一个很好的实践案例我们会先介绍一些基础知识聊聊在SwiftUI中如何为字符串进行本地化以及规避常见的设计缺陷有多简单我们会展示一些设定字符串和数据样式和格式的技术介绍一些快捷键上的改进最后凯特进行实例操作为您展示 Xcode在本地化工作流程上的改进之处这些改进令您的App本地化变得越发便捷轻松应用本地化最关键之处在于确保译者能得到名目繁多的UI中的所有字符串并且在运行时正确渲染 SwiftUI让这一切变得简单因为当您使用Text函数处理字面常量它会自动在主bundle中对字符串进行本地化查询本例中这个“Done”按钮基于俄语字符串文件的翻译在运行时自动进行了本地化这种方法对于字符串插值也管用这样您就可以将变量插入字符串在输出的本地化字符文件和分类中它们会自动转化为格式修饰符 Xcode 13现在可以基于传递到字符串的变量种类可自动推断格式修饰符类型假使您需要更多控制时 Text函数接受可选的实参作为表名和bundle 本例中我们将所有的食材相关字符串放入一张命名为“食材”的单独的表除了冰沙的实际食材我们还要基于上下文的不同为“食材”这个单词而设置两个变量分别给冰沙页面和食谱页面的字符串表使用我们这样做是因为在俄语中这两个词因为上下文不同对应的翻译是不一样的在“合理简化您的本地化字符串”课程中您可以了解更多管理字符串的要点其正常工作的前提是Text的第一个实参是LocalizedStringKey类型如果您自定义的视图和方法能接受字面常量您便可通过在字符串中使用它进行本地化这时候作为实参传递给这些视图和函数的常量在Xcode本地化输出过程中会自动被抽取然后在运行时从bundle加载而刚才那个按钮实例用的是另一种方法是通过让你的视图接收Text实参实现的 LocalizedStringKey还允许你同时预览多个系统地区你只需要在预览器中设定environment的系统地区即可若您想预览所有本地化的字符串包括以NSLocalizedString 加载的那些那您可在scheme编辑器里更改语言等下凯特会为您演示 Xcode 13另一新功能在您导出项目进行本地化时会创建所有的目标以查询可本地化的字符串而这在实际操作中意味着 Xcode在寻找可本地化内容和对其的抽取方面表现更好了假设我们代码中存在一个多行字符串由于现在使用编译器进行本地化后内容的抽取这条多行字符常量得以正确解析现在我们看下 SwiftUI如何帮助您更轻松地以便于本地化的布局来构建App 与字符串查询一样 SwiftUI默认的布局行为在设计时就将本地化考虑在内大部分情况下都不需要您耗费额外的精力调整例如Text可以恰当地对其自动换行这样需较多字符表述的语言的标签就不会被切断或缺损本例中俄语版的冰沙名称自动换行成了2行因为它的俄语表述更长而对于从右向左书写的语言布局也会自动翻转从这张截图可以看到整个表格布局都进行了水平翻转其中的符号也都恰当地镜像了即使您需要进行一些不同的自定义设置我们也会为您提供便于本地化的解决方案例如在VStacks的对齐参数中提供行距变量而左对齐选项接着当构建App时您通常会需要设置本地化后文本在UI中显示的样式为此我们引入了使用markdown 为可本地化字符串设定样式的功能这极大简化了本地化后字符串的样式设置工作使您的译者可以应用适合自己语言的样式例如阿拉伯语没有斜体的概念所以即使您在英语版中用斜体作为强调的样式您的译者也能用不同的方式来达到这个效果例如加强语气的表述本例中俄语译者就在字符串中相关性最强的单词上加了标记以对应英语原文中强调的部分除了这种基础上的支持 SwiftUI还简化了您的工作将设定好样式的字符串直接传递过去进行展示您可以在“新基础功能介绍” 和“SwiftUI新特点”中获取更多信息另一个常见的情景就是将日期按照语言和地区习惯进行设置新的格式API让这变得更简单它们与Text和TextField更强力的整合令您可以轻松完成这项任务在Fruta中我们在UI的很多地方显示了热量值过去我们通过创建measurement格式化来展示格式化后的数值如幻灯片现在展示的这样现在我们通过声明的方式设定格式直接让其与展示区域的值一致这样不仅阅读起来更容易而且比之前的代码绩效更高您可在“新基础功能介绍”视频中了解这种新格式API的更多内容最后我们来聊聊快捷键它们能帮助新手不管是在Mac设备还是iPad上更快的进行操作在新的macOS和iPadOS中您在SwiftUI中定义的任何快捷键都会自动进行调整使之可以在用户当前的键盘上有效例如您想将一款冰沙添加到“最爱”列表您可以按下Command与“+”键这组快捷键在美国键盘上很方便 Command与“+”键直接按下就行但是若您使用的是立陶宛语键盘 “+”键就不太好操作了您必须先按下反引号键然后按下Shift和“=”键才能实现更糟糕的是这个组合键在按下Command键时是无法操作的但是有了macOS Monterey 和iPadOS 15的重映射功能当启动立陶宛语键盘时快捷键自动变成了 Command+“ž”键用户就可以通过快捷键将心仪的冰沙添加到最爱列表无论他们使用哪种键盘精彩之处来了您作为开发者不需要任何额外工作用户那边就能直接使用关于这一点我们将镜头交给凯特她在实际操作中展示 Xcode 13改进后的本地化工作流程以及刚才我提过的新型API的绝妙之处谢谢你保罗大家好我是凯特是本地化团队的一名工程师话不多说我们来看一下 SwiftUI App本地化有多简单这里我们以Fruta App为例我们希望全世界的都人都可以用自己国家的语言来点单冰沙今天我要为其进行俄语本地化首先在项目导航器的项目面板然后选择项目编辑器里的“Fruta” 在信息标签页下我可以添加本地化 macOS支持的所有本地化选项都列举在这里按照首字母排序在Xcode 12.5中我们向位于列表最下的“更多语言”子菜单添加了数以百计的语言和地区变量这里我选择“俄语” 如保罗之前所说 Xcode 13通过 Swift编译器内使用新技术极大的简化了从Swift代码抽取字符串的工作

Fruta是在SwiftUI内编写的所以我想要设置中的这个选项 “Use Compiler to Extract Swift Strings” 对应设置为“Yes” 新建的Swift项目默认是选择“Yes”的而对已存在的SwiftUI编写的项目您可以到设置中修改当我本地化之后进行导出 Xcode会为项目创建所有的目标并使用编译器类型信息从我的SwiftUI代码中抽取LocalizedStringKey 在导出之前我可以用虚拟语言在SwiftUI的预览窗口里检查哪些字符串可本地化哪些被漏掉了现在我们去scheme编辑器在Options选项卡下点击“App Language” 我的App能支持的所有语言都在清单中一一列出但是我要往下到菜单底部选择“有重音类虚拟语言”

有重音类虚拟语言为我UI的源字符串添加不同的重音标记现在可以看到这里所有的食材都在虚拟页面本地化了而涉及度量衡的部分没有改变因为它们被格式化了但是StepperView 应该已经虚拟本地化了现在我们将这些字符串本地化一下 StepperView是 SwiftUI的一种自定义视图它将一个标签字符串传递给一个Text视图在需要本地化的自定义SwiftUI视图中我们需要用LocalizedStringKey 我们现在将它虚拟本地化一下

很好现在这字符串变得可本地化了我们需要确保其单复数的正确性这行代码可以很好地处理英语的冰沙复数形式但是并不适用于所有的单词也不通用于所有语言我们用stringsdict来代替 stringsdict文件可以为一个复数的变体提供不同的翻译若您想了解更多stringsdict的详情请观看“合理简化您的本地化字符串”课程

我这里预先准备了一个文件所以我直接拖拽到我的项目中

对其进行本地化

接下来导出本地化成果从Xcode 12.5开始您可以在Product菜单下将本地化后的项目和工作区导出和导入所以这里点击Export Localizations 先保存到桌面吧

现在Xcode开始构建项目创建一个Xcode本地化类之后我将其发给保罗由保罗来翻译成俄语更多关于Xcode本地化类的详情您可观看WWDC 2018的“Xcode 10 下新版本地化工作流程”课程

在送去翻译之前我们再复查一遍要导出的内容从Xcode 13开始 Xcode本地化类越来越方便使用在访达中直接双击就能在Xcode中打开它这就非常便于您本地化自己的App 在发送内容进行翻译之前核验字符串或截屏内容或者修正特定语言的翻译问题

在编辑器中我能看到所有需要本地化的文件选中一个文件这就是译者就能看到所有的字符串关键词源字符串翻译以及对应的评论我在这里浏览一遍确保没什么问题很快我就发现了一些问题首先我们导出了 “%lf Calories”这串字符这个字符串应该被格式化因为不同的地域对热量的惯用单位不同我需要修改代码来应对这个问题

这部分是NutritionFactView的代码字符串就来自这里这里我们不用字符串而在NutritionFacts结构下 Measurement类中使用fomatted方法这里使用wide formatting 并将用途设定为“食物” 因为这里度量的是食物的热量这就能解决所有地域的单位格式问题非常快捷就解决了现在我们继续回来检查字符串

由于译者看不到变量名所以像“Buy recipe for %@” 这种文字就令人困惑这是说我要以某价格购买食谱还是说买了送给某朋友呢我们来看下还有没有其他语言含糊的字符串

“Favorite”的评论说这里它是作为动词使用但我应为这条“Favorite”添加评论说明这里作为名词使用我要在代码中为二者都添加评论

我们先来处理 “Buy recipe for”字符串

好了 “Favorites”位于标签栏的项目中那我们给它也添加上评论

标签栏项目是表格视图在SwiftUI 添加评论要先以文本视图将标签初始化

类似这样的评论对于高质量的本地化工作是非常重要的我不希望译者感到困惑而不得不对待译内容胡乱猜测好了我认为这里已经没有问题了可以导出一份新的类文件并发送给保罗

哎呀真快保罗翻译的速度就像Apple Silicon一样快我们快速浏览一下他发回的文件

这里可以看到所有的译文这里是我为冰沙添加的stringsdict

看起来不错我们现在导入并看看俄语版App的样子导入时在Product菜单下点击“Import Localizations” 然后选择保罗发来的类文件

现在所有的字符串应该都本地化过了我们在macOS上构建并运行一下App的俄语版首先我将scheme更改为macOS 然后语言更改为俄语

好了现在运行它

App的俄语版看起来棒极了所有的冰沙看起来都很美味每一款的食材和营养值都可以看到我觉得我会点这一款

非常棒的服务

在SwiftUI的本地化功能简单方便使您可以更专注于代码的编写以下是开发App时建议您牢记的几个关键点 LocalizedStringKey 是一个特殊的类型它会提示SwiftUI在bundle中查找本地化过的字符串在自定义的SwiftUI视图中使用可以使之准备好进行本地化将设置中的Use Compiler to Extract Swift Strings选项启用然后在导出本地化文件抽取代码中的LocalizedStringKeys 规范字符串格式增强代码国际化程度用重音符号进行标记

用Text函数添加额外的备注信息以协助翻译

感谢您的收看希望您WWDC活动过得愉快

[音乐]

1:34 - Text() with a string literal

Button(action: done) {
   Text("Done", comment: "Button title to dismiss rewards sheet")
}

1:58 - Text() with a string literal and interpolation

// RewardsCard.swift

Text("You are \(10 - totalStamps) points away from a free smoothie!")

2:06 - Text() with tableName

// RecipeView.swift
Text("Ingredients.recipe", tableName: "Ingredients", comment: "Ingredients in a recipe. For languages that have different words for \"Ingredient\" based on semantic context.")
Text("Ingredients.menu", tableName: "Ingredients", comment: "Ingredients in a smoothie. For languages that have different words for \"Ingredient\" based on semantic context.")

2:52 - Declare localizable attributes in a custom view

struct Card: View {
    var title: LocalizedStringKey
    var subtitle: LocalizedStringKey
    
    var body: some View {
        Circle()
            .fill(BackgroundStyle())
            .overlay(
                VStack(spacing: 16) {
                    Text(title)
                    Text(subtitle)
                }
            )
    }
}

Card(
    title: "Thank you for your order!",
    subtitle: "We will notify you when your order is ready."
 )

3:47 - Text() with multiline string literal

Text("""
        A delicious blend of tropical fruits and blueberries will
        have you sambaing around like you never knew you could!
        """,
        comment: "Tropical Blue smoothie description")

4:39 - Customize attributes

VStack(alignment: .leading) {
    Text(smoothie.title)
        .font(.headline)
    Text(ingredients)
}

5:13 - Using Markdown

// Smoothie.swift

Text("A refreshing blend that's a *real kick*!", comment: "Lemonberry smoothie description")

6:04 - Create a measurement formatter (prior to iOS 15)

let calories = Measurement<UnitEnergy>(
    value: nutritionFact.kilocalories, unit: .kilocalories)

static let measurementFormatter: MeasurementFormatter = {
    let formatter = MeasurementFormatter()
    formatter.unitStyle = .long
    formatter.unitOptions = .providedUnit
    return formatter
}()

Text(Self.measurementFormatter.string(from: calories))

Text("Energy: \(calories, formatter: Self.measurementFormatter)")

6:22 - Specify the format in a declarative manner (iOS 15)

let calories = Measurement<UnitEnergy>(
    value: nutritionFact.kilocalories, unit: .kilocalories)

Text(calories.formatted(.measurement(width: .wide, usage: .food)))

Text("Energy: \(calories, format: .measurement(width: .wide, usage: .food))")

6:53 - Specify a keyboard shortcut

struct SmoothieCommands: Commands {

    var body: some Commands {
        CommandMenu(Text("Smoothie", comment: "Menu title for smoothie-related actions")) {
            SmoothieFavoriteButton(smoothie)
                .keyboardShortcut("+")
        }
    }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。