iOS 已經包含了一個系統範圍的翻譯功能,允許用戶輕鬆地將文本翻譯成各種語言。隨著 iOS 17.4(以及 iOS 18)的發布,你現在可以利用新的 Translation API 將這個強大的翻譯功能整合到你的應用中。
Apple 為開發者提供了兩種使用 Translation API 的選擇。最快且最簡單的方法是使用 .translationPresentation
修飾器,它會在你的應用中顯示一個翻譯覆蓋層。對於更靈活的解決方案,你可以直接調用 Translation API 來構建自定義的翻譯功能。
在本教程中,我們將探討這兩種方法,並通過一個簡單的示例應用來引導你實現它們。請注意,你需要 Xcode 16 來跟隨本教程。
使用 translationPresentation 修飾器
讓我們從最簡單的方法開始:.translationPresentation
修飾器。在 Safari 中,用戶可以突出顯示任何文本以訪問翻譯選項,然後顯示帶有翻譯文本的翻譯覆蓋層。
![](https://www.appcoda.com.tw/content/images/2024/06/swiftui-translation-presentation.png)
如果你想將這個翻譯覆蓋層帶到你的應用中,你只需導入 Translation
包並使用 .translationPresentation
修飾器。請查看以下示例程式碼:
import SwiftUI
import Translation
struct ContentView: View {
@State private var showTranslation = false
@State private var sampleText = article
var body: some View {
VStack {
Text(sampleText)
.font(.system(.body, design: .rounded))
Button("Translate") {
showTranslation.toggle()
}
.controlSize(.extraLarge)
.buttonStyle(.borderedProminent)
}
.padding()
.translationPresentation(isPresented: $showTranslation, text: article)
}
}
此 app 顯示了一些英文示例文本,並在其下方放置了一個 Translate 按鈕。
![](https://www.appcoda.com.tw/content/images/2024/06/swiftui-translation-app-demo.png)
現在,當你點擊「Translate」按鈕時,將顯示一個翻譯覆蓋層,顯示所需語言的翻譯文本。除了 iOS 之外,Translation API 也適用於 iPadOS 和 macOS。目前,這個翻譯功能不能在 Xcode 預覽中測試;你必須將應用部署到真實設備上進行測試。
![](https://www.appcoda.com.tw/content/images/2024/06/swiftui-translation-translated-text-bg.png)
.translationPresentation
修飾器允許你指定當用戶點擊「Replace with Translation」按鈕時要執行的可選操作。例如,如果你希望在按下按鈕時將原始文本替換為翻譯文本,你可以像這樣定義此操作:
.translationPresentation(isPresented: $showTranslation, text: article) { translatedText in
sampleText = translatedText
}
一旦你在修飾器中指定了操作,你將在翻譯覆蓋層中看到「Replace with Translation」選項。
![](https://www.appcoda.com.tw/content/images/2024/06/swiftui-translation-replace.png)
使用 Translation API
為了更好地控制翻譯,你可以直接使用 Translation API,而不是依賴翻譯覆蓋層。例如,如果你的應用程式顯示了一個文章摘錄列表,並且你想提供翻譯支援,翻譯覆蓋層可能並不理想,因為用戶必須逐個選擇每個摘錄進行翻譯。
![](https://www.appcoda.com.tw/content/images/2024/06/swiftui-translation-batch-demo.png)
一種更有效的解決方案是當使用者點擊「Translate」按鈕時,執行所有文章摘錄的批次翻譯。讓我們創建一個簡單的示範,看看如何使用翻譯 API 並處理批次翻譯。
下面是創建上述 UI 的範例程式碼:
struct BatchTranslationDemo: View {
@State private var articles = sampleArticles
var body: some View {
NavigationStack {
List(articles) { article in
VStack {
Text(article.text)
if article.translatedText != "" {
Text(article.translatedText)
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
.background(Color(.systemGray4))
}
}
}
.listStyle(.plain)
.toolbar {
Button {
} label: {
Label("Translate", systemImage: "translate")
.labelStyle(.iconOnly)
}
}
}
}
}
要執行批次翻譯,首先需要定義一個翻譯配置,該配置指定來源語言和目標語言。在程式碼中,你可以宣告一個狀態變數來保存配置,如下所示:
@State private var configuration: TranslationSession.Configuration?
然後,在工具列的 Button
的閉包中,我們可以實例化該配置:
Button {
if configuration == nil {
configuration = TranslationSession.Configuration(source: .init(identifier: "en-US"), target: .init(identifier: "zh-Hant-TW"))
return
}
configuration?.invalidate()
} label: {
Label("Translate", systemImage: "translate")
.labelStyle(.iconOnly)
}
我們指定英語為來源語言,繁體中文為目標語言。如果你不指定語言,翻譯 API 將自動創建一個預設配置,由 iOS 確定來源語言和目標語言。
要執行翻譯,你需要將 .translationTask
修飾器附加到列表視圖:
List(articles) { article in
.
.
.
}
.translationTask(configuration) { session in
let requests = articles.map { TranslationSession.Request(sourceText: $0.text, clientIdentifier: $0.id.uuidString) }
if let responses = try? await session.translations(from: requests) {
responses.forEach { response in
updateTranslation(response: response)
}
}
}
這個修飾器使用指定的配置啟動一個翻譯任務。每當配置發生變化且不為 nil
時,翻譯任務就會執行。在閉包內,我們準備一組翻譯請求,並使用會話的 translations(from:)
方法執行批次翻譯。
如果翻譯任務成功,它會返回一個包含翻譯文本的翻譯回應陣列。然後我們將該翻譯文本傳遞給 updateTranslation
方法,以顯示在螢幕上。
func updateTranslation(response: TranslationSession.Response) {
guard let index = articles.firstIndex(where: { $0.id.uuidString == response.clientIdentifier }) else {
return
}
articles[index].translatedText = response.targetText
}
讓我們將應用程式部署到真實裝置進行測試。我在我的 iPad Air 上測試了該應用程式。當你點擊「翻譯」按鈕時,應用程式應顯示繁體中文的其他文章摘錄。
![](https://www.appcoda.com.tw/content/images/2024/06/swiftui-translation-batch-tc-demo-1.png)
總結
隨著 iOS 17.4(以及 iOS 18)引入的新翻譯 API,開發者現在可以輕鬆地將強大的翻譯功能整合到他們的應用程式中。本教程涵蓋了兩種主要方法來使用該 API:使用 .translationPresentation
修飾器顯示翻譯覆蓋的簡單方法,以及直接使用翻譯 API 進行自訂翻譯解決方案的更靈活方法。
我們在本教程中演示了這兩種方法。如示範中所示,只需幾行程式碼,你就可以輕鬆添加翻譯功能。鑑於該 API 的簡單性和強大性,沒有理由不在你的應用程式中包含翻譯功能。