Localization - 讓 App 支援不同語言 手把手教學

更新於 發佈於 閱讀時間約 8 分鐘

身為一個菜鳥工程師,將辛苦製作的 App 推向國際,多國語言是肯定要的。Let’s Go Go Go!

專案設定

打開專案內的 Project -> Info -> Localizations 新增你想要增加的語言

raw-image

增加完後會問你要添加的地方,例如 Main.storyboard 打勾的話,就會幫你把 storyboard 中所有有文字的地方變成一串 key = value 的形式,放進 main.strings 檔案,這個檔案會在你添加的語言資料夾內,所以每加一個語言,就會有一個專屬的資料夾

raw-image
en 的語言資料夾內

en 的語言資料夾內

storyboard 多國語文檔

Main 底下會長出語言的檔案

Main 底下會長出語言的檔案

raw-image

左圖可以看到,"2Gf-sf-0bs.text" = "Password"; 2Gf-sf-0bs這串文字其實是該 label 的 objectID,也是讓程式尋找對應的文字的 Key ,所以如果不知道這邊的文字代表畫面上哪個物件的時候,可以用 objectID 去 stroryboard 確認是哪個物件


在 stroryboard 上點選物件後,Document 欄位會有 objectID


這時候就會想到,阿如果我有些文字是用程式產生的呢?




程式中的文字多國語文檔

新增 Strings File,取名為 Localizable(請務必這樣取名,方便Xcode抓取),接著點選檔案右側的 Localization 將需要的語言打勾,就會幫你產出好幾個檔案

raw-image
raw-image

這邊的 Key 命名就看個人習慣,自己是將不同類型的文字前面加上label, btn, alert … 等作區分

記得程式內有使用到 String 文字的地方,就要透過 Key 去讀取對應的 String,才能達到多國語系顯示的目的

App Name 多國語文檔

別忘了幫 App 的大名跟著一起切換,這時候又要新增一個 Strings File,然後 key 為 "CFBundleDisplayName" 記得一定要取這個 Key 不然系統會抓不到

raw-image

應用時間

// Localizable.string 內的格式
"alert_logInSuccess" = "LogIn Success";
"label_amountOfDiamondsText" = "%d 顆鑽石"; // %d 的地方可以傳入參數

// controller 讀取
let logInSuccessText = NSLocalizedString("PurchaseVC.Alert.logInSuccess", comment: "logIn Success")

let amountOfDiamondsText = NSLocalizedString("PurchaseVC.Label.amountOfDiamondsText", comment: "amountOfDiamondsText")
label.text = String.localizedStringWithFormat(amountOfDiamondsText, amountOfDiamonds) // print 1,000 顆鑽石
  • 直接透過 Key 讀取
    單純讀取文字的時候透過 NSLocalizedString("文字對應的KEY", comment: "這邊可以為空,也可以寫這個文字的意思")
  • 讀取的內容需要傳入參數
    遇到在數值前後的文字,可以在要轉換的文字中加上 %d,透過NSLocalizedString 取得文字,再透過 String.localizedStringWithFormat(文字, 數值) 就能完美讀取有數值的文字拉
  • Enum 讀取字串
enum ProductID: String, CaseIterable {
case diamonds100 = "Item01"
case aiChatfor1Week = "Item06"

var productName: String {
switch self {
case .diamonds100:
return NSLocalizedString("diamonds100", comment: "diamonds100")
case .aiChatfor1Week:
return NSLocalizedString("aiChatfor1Week", comment: "aiChatfor1Week")
}
}

// Localizable.string 內
"diamonds100" = "100 顆鑽石"
"aiChatfor1Week" = "AI 聊天/ 週";

小撇步

  • enum 定義 Key 不容易打字錯誤
enum LocalizedKey: String { 
case label_greeting, label_amountOfDiamondsText, btn_logIn, btn_logOut, alert_noRestore, alert_restoreSuccess, alert_cantBuy, alert_productName, alert_pleaseLogIn, alert_accountNPass 
case label_psw, label_account, label_language, label_thrLogIn, label_welcome, label_server, label_buyDiamond, btn_restore, label_system 

var str: String { self.rawValue }
}
  • String Extension
extension String {

var localizable: String {
// 吃 LanguageManager 被賦予的 languageType
if let manager = LanguageManager.shareInstance() as? LanguageManager,
let path = Bundle.main.path(forResource: manager.languageType, ofType: "lproj"), let bundle = Bundle(path: path) {
return NSLocalizedString(self, tableName: nil, bundle: bundle, value: "", comment: "")
}
return self
}
}

// Localizable file
"memberCenter" = "會員中心";

// call
mylabel.text = "memberCenter".localizable


實作過後分享,Main.strings 的小缺點:
如果有新增的頁面或新增的 label or button,自己手動加 objectID 進去 Main.string 檔案後系統還是會吃不到,我的方式會最後才建立多國語言這個步驟,或是將要新增的文字直接加去 Localizable.strings 內,再拉 label or button 的 IBOutlet 進 ViewController,將文字指派給他


下一篇介紹如何包裝寫成一個完整的 LanguageManager 🤩


參考其他大大文章

在 APP 內切換語系(iOS Localized)

【iOS】#31 多語系設定 Localization

Swift之本地国际化与App内切换语言

留言
avatar-img
留言分享你的想法!
avatar-img
是我太奇怪還是世界很無奈的沙龍
7會員
4內容數
2023/10/10
如何實現在 App 內部就可直接切換語言,無需手機系統都要跟著切換語言的方法。
Thumbnail
2023/10/10
如何實現在 App 內部就可直接切換語言,無需手機系統都要跟著切換語言的方法。
Thumbnail
2022/03/06
咻咻回家發現行車紀錄器壞了,噴了三千大洋換mio小姐,以後就麻煩她報測速了,還被車廠維修先生假撩妹真詐財,幸好我識破了他的伎倆😎 晚上跟卓寶去看咒術迴戰,好好看!!!純愛好感動,最喜歡狗卷,喜歡到不行,鮭魚❤️ 可能是阿月要來了
Thumbnail
2022/03/06
咻咻回家發現行車紀錄器壞了,噴了三千大洋換mio小姐,以後就麻煩她報測速了,還被車廠維修先生假撩妹真詐財,幸好我識破了他的伎倆😎 晚上跟卓寶去看咒術迴戰,好好看!!!純愛好感動,最喜歡狗卷,喜歡到不行,鮭魚❤️ 可能是阿月要來了
Thumbnail
2022/02/20
其實這兩週都沒什麼約會,唯一大的起伏是詩梵真的要飛往英國了,一直覺得很遙遠的事突然在眼前,好不真實的感覺
Thumbnail
2022/02/20
其實這兩週都沒什麼約會,唯一大的起伏是詩梵真的要飛往英國了,一直覺得很遙遠的事突然在眼前,好不真實的感覺
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
這篇內容,將教你如何開啟新的GameMaker專案,並調整畫面佈局。也會講解,為何建議用英文語系,來進行遊戲開發。
Thumbnail
這篇內容,將教你如何開啟新的GameMaker專案,並調整畫面佈局。也會講解,為何建議用英文語系,來進行遊戲開發。
Thumbnail
這篇內容,將教你如何安裝GameMaker,並更改語言設定。包括GameMaker的下載說明、版本說明、安裝說明、語系更改。
Thumbnail
這篇內容,將教你如何安裝GameMaker,並更改語言設定。包括GameMaker的下載說明、版本說明、安裝說明、語系更改。
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
替產業做設計 有人要我談程式設計,那我就稍微談一下。我從事的大都是產業的工作,所以我們也從如何替產業做設計來談起。基本上,每個產業都會有自己的作業流程,大同小異。但是基礎來做都是一樣的,都會有客戶、物料、產品、供應商、員工等資料。不同的是,由於企業型態的不同,他們每個人有不同的作業流程。這個作業流
Thumbnail
替產業做設計 有人要我談程式設計,那我就稍微談一下。我從事的大都是產業的工作,所以我們也從如何替產業做設計來談起。基本上,每個產業都會有自己的作業流程,大同小異。但是基礎來做都是一樣的,都會有客戶、物料、產品、供應商、員工等資料。不同的是,由於企業型態的不同,他們每個人有不同的作業流程。這個作業流
Thumbnail
提到後端工程師,似乎就只是開發 API,但一個複雜的系統其實不太可能只透過 API 就能完成,例如一個簡單的功能,註冊會員,其實是由好幾個不同類型的工作互相配合,您才能收到開通信,才確保資料庫不會有一堆未開通帳號等。所以今天就來聊聊一個系統有幾種不同執行方式的工作。
Thumbnail
提到後端工程師,似乎就只是開發 API,但一個複雜的系統其實不太可能只透過 API 就能完成,例如一個簡單的功能,註冊會員,其實是由好幾個不同類型的工作互相配合,您才能收到開通信,才確保資料庫不會有一堆未開通帳號等。所以今天就來聊聊一個系統有幾種不同執行方式的工作。
Thumbnail
相信替影片配字幕是許多人心中的痛,本文帶你在三分鐘內能夠用你的電腦,寫出一個使用AI將聲音轉成字幕srt檔案的互動操作網頁,可以連接麥克風測試,也可以上傳聲音檔案或是MP3來測試。目前的多國語言版本,能自動辨別語言,不用特別指定,經實測,中英文混雜也能夠正確輸出。
Thumbnail
相信替影片配字幕是許多人心中的痛,本文帶你在三分鐘內能夠用你的電腦,寫出一個使用AI將聲音轉成字幕srt檔案的互動操作網頁,可以連接麥克風測試,也可以上傳聲音檔案或是MP3來測試。目前的多國語言版本,能自動辨別語言,不用特別指定,經實測,中英文混雜也能夠正確輸出。
Thumbnail
如何實現在 App 內部就可直接切換語言,無需手機系統都要跟著切換語言的方法。
Thumbnail
如何實現在 App 內部就可直接切換語言,無需手機系統都要跟著切換語言的方法。
Thumbnail
身為一個菜鳥工程師,將辛苦製作的 App 推向國際,多國語言是肯定要的。 那要如何在 App 中設定變成可以支援多語系的專案呢? Localization 多國語系設定,讓我們繼續看下去...
Thumbnail
身為一個菜鳥工程師,將辛苦製作的 App 推向國際,多國語言是肯定要的。 那要如何在 App 中設定變成可以支援多語系的專案呢? Localization 多國語系設定,讓我們繼續看下去...
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News