iOS 關於多國語系的那些事(Localization)

法蘭克的 iOS 世界

10 min readFeb 13, 2017

多國語系也被稱之為本地化(Localization)，當今不少 App 為了給多個國家的使用者使用，大部份都會有支援多國語系。

所謂多國語系的意思就是會依使用者裝置所設定的語系或手動切換來調整 App 所要顯示的語系，但這完全是兩回事喔！

該篇先來介紹如何依使用者裝置所設定的語系來顯示文字內容，在下一篇法蘭克再來介紹如何手動切換多國語系。在還沒開始實作之前，得先來了解一下在 Xcode 環境下的多國語系檔配置檔。在 iOS 環境中的多國語系會依檔名來區分

元件所要顯示的多國語系文字(Localizable.strings)
App 的名稱和 Info.plist 裡多國語系的描述(InfoPlist.strings)
圖片的多國語系

說到這邊如果現在還不太懂也沒關係，透過實作後大家就會更清楚了法蘭克在說什麼了😀

前置作業：

建立一個 Single View Application 的專案，並命名為 LocalizationDemo

▼在開始實作前，不妨先來看一下成品會比較有 fu ~請注意 Label 和圖片的字漾會依設定的語系而變化。

內容大綱：

如何建立多國語系。
如何建立多國語系的 App 顯示名稱和 Info.plist 裡的描述。
如何建立圖片的多國語系。

1. 如何建立多國語系

1.1 設定該專案支援簡體中文和繁體中文的語系

法蘭克僅提供簡體中文的圖文教學，繁體中文的增加方式同簡體中文

LocalizationDemo → Info → PROJECT → LocalizationDemo → 「+」 → Chinese(Simplified)(zh_hans)

1.2 新增簡體中文和繁體中文的多國語系檔

在 LocalizationDemo 資料夾上點選右鍵 → New File…

找到 Strings File → Next

將檔名命名為 Localizable (請務必一定要這樣命名)

1.3 設定 Localizable.strings 所支援的多國語系

點擊 Localizable.strings → show the file inspector → 點擊 Localize… → 選擇要支援的其中一種語系即可(法蘭克選擇英文)

備註：這邊下拉選單會出現的語系僅有在步驟 1.1 所「+」的語言可選擇，所以在這之前必須確認 1.1 步驟已做完。

1.4 勾選除了在 1.3 未選擇的其它語系

勾選簡體中文、繁體中文後，展開左側的 Localizable.strings，這時會看到有三個多國語系檔，分別是英文、簡體中文、繁體中文。

1.5 在英文、簡體中文、繁體中文的多國語文件下新增程式碼

新增程式碼的規則是遵照 key、value 的型式，並在結尾加入「;」來區隔每組的多國語。以下三個圖表示 TestLocalization 這個 key 值在英文、簡體中文、繁體中文環境下所要顯示的的 value。例如使用者的裝置語系設為英文則會顯示「How are you?」，又例如使用者的裝置語系設為簡體中文則會顯示「你好吗?」

1.6 在 ViewController.swift 下生成一個用來在畫面正中間測試多國語的 label

第 6 行 => 透過 NSLocalizedString 這個物件來取得多國語系的值，第一個參數即填入多國語系檔的 key 值，第二個參數若是沒要特別要註解的填入空字串即可。

1.7 切換裝置的語系來測試多國語系

以上都已經設置好後，就可以來測試多國語系了，在這之前我們必須先啟動 App，法蘭克的模擬器預設的語系為英文，我在這邊會將裝置的語系改設為簡體中文，其它語言就交給各位去測試了。

1.7.1 啟動 App 後點選 command + shift + h 切換至桌面後點選 Settings

1.7.2 選擇 General

1.7.3 選擇 Language & Region

1.7.4 選擇 iPhone Language

1.7.5 選擇簡體中文

1.7.6 選擇 Change to Chinese, Simplified → Done

1.7.7 等待模擬器重新配置完後重新進入 App，若是同下畫面代表成功了

1.8 試著切換繁體中文試試

2. 如何建立多國語系的 App 顯示名稱和 Info.plist 裡的描述

這兩件事在建立多國語系時可認定是同一件事，因為它們的 key 值都是建立在同一個名稱固定的多國語系檔，作法會是同項目 1 ，不同的是如前面提到的多國語系檔名(InfoPlist)和 key 值都得必須遵照 Apple 所提供的，例如 App 名稱要多國語，則 key 就得必須一定要命名為 CFBundleDisplayName，可參考 Apple 官方提供的相關文件。

2.1 新增簡體中文和繁體中文的 App 顯示名稱的多國語系檔

在 LocalizationDemo 資料夾上點選右鍵 → New File…

搜尋 String → 還擇 Strings File → Next

將檔名命名為 InfoPlist (請務必一定要這樣命名)

2.2 設定 InfoPlist.strings 所支援的多國語系

點擊 InfoPlist.strings → show the file inspector → 點擊 Localize… → 選擇要支援的其中一種語系即可(法蘭克選擇英文)

2.3 勾選除了在 2.2 未選擇的其它語系

勾選簡體中文、繁體中文後，展開左側的 InfoPlist.strings，這時會看到有三個多國語系檔，分別是英文、簡體中文、繁體中文。

2.4 在英文、簡體中文、繁體中文的多國語文件下新增程式碼

新增程式碼的規則是遵照 key、value 的型式，並在結尾加入「;」來區隔每組的多國語。以下三個圖表示 CFBundleDisplayName 這個 key 值在英文、簡體中文、繁體中文環境下所要顯示的的 value，顯示 App Icon 的 key 請務必定義為 CFBundleDisplayName。例如使用者的裝置語系設為英文 App Icon 則會顯示「LocalizationDemo?」，又例如使用者的裝置語系設為簡體中文則會顯示「本地化测试」

2.5 切換裝置的語系來測試 App 所顯示的名稱

切換裝置可參考 1.7，這邊法蘭克就不多加贅述了。

▼英文語系下的 App Icon

▼簡體中文語系下的 App Icon

3. 如何建立圖片的多國語系

作法和前面的大致也是相同的，只不過在這邊我們需要手動將圖片檔搬移至各語系指定的資料夾下。在開始實作之前，請先找三張不同的圖片用來表示三種不同的語系。

3.1 將代表英文語系的圖片拖曳複製到 bundle 底下

3.2 新增英文語系所要顯示的圖片，該動作會在 LocalizationDemo 專案下的 en.lproj 產生 apple.png 的圖片，代表在英文語系下會自動去對應到該圖片。

點擊 apple.png → show the file inspector → 點擊 Localize… → 選擇 English

3.2 至 LocalizationDemo 專案下的 zh-Hans.lproj 和 zh-Hant.lproj 這兩個資料夾下(若是有照著步驟1和2做的話此兩個資料夾才會存在)，分別放置簡體中文和繁體中文要顯示的圖片，請務必使用和英文語系相同的圖片名稱 (apple.png)。雖然圖片的名稱雖然都一樣，但法蘭克有在圖片上加入英文、簡體中文、繁體中文的字漾來區別不同語系的圖片。