iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
0
Mobile Development

諸神黃昏下的 iOS 工程師系列 第 27

D27 - 放一顆翻譯蒟蒻在你的 APP 中吧!

讓我們透過 LocalizationString 根據語系來顯示相對應的文字吧!

? 隕石小故事

雖然我沒有在真正的專案裡面實際操作過 Localization 這件事,但有一些 APP 是希望可以上架在不同國家,希望可以根據語系不同,顯示不同語言的內容。因此,可能就會做 Localization 這件事(或者就用 English 解決ㄏㄏ)。所以,如果需要多語言的系統就必須要做這件事。

Overview

多國語系 Localization 對於想要針對不同國家的使用者是一個必要的需求,這次教學帶著大家在專案中使用 Localization 的功能,以及透過 IBInspectable 的方式快速在 Interface Builder 上設置本地化字串。


實作

|建立 Localization

首先我們可以在專案設定中的 Localizatios 去新增我們所要支援的語系,而後面的 Localized 表示有幾個 file 目前被本地化了:

而我們要知道我們的檔案有幾個本地化文件,我們可以在右側視窗中的 File Inspector 中查看:

接著你可以發現你的 *.storyboard 變得不太一樣,並且其中擁有子項目,分別是 Base, English 和剛剛新增的 Chinese, Traditional:

而除了 Base 以外下面兩個副檔名都為 .string ,就是讓我們使用本地化的字串,當你 Storyboard 畫面是空的時候可能會是空白的:

因為這個 .string 檔案會根據你畫面上的元件的內容來產生對應的字串。所以,讓我們把原有的 *.string 檔案移除,再 Storyboard 上新增一些內容在建立它吧!

我們只需要取消勾選某個語言的 Localization,Xcode 就會詢問我們是不是要刪除檔案,按下即可刪除:


|使用 .string 檔來做本地化操作吧

接著我們到 Storyboard 上簡單的加一些內容吧:

當我們再次勾選 Localiaztion 就會再一次的新增到檔案中,讓我們再來看看 *.string 檔案中內容吧:

你可以從註解中的 Class 名稱以及 String 內容大概判斷出是哪個元件,而前面那段亂碼(8Ef-qM-3UZ)就是 ObjectID。你透過用 Source Code 的方式開啟 Storyboard ,你就可以在程式碼中找到相對應 ID 的元件。

接著我們就可以透過修改其中的內容來做一些本地化的操作,English 的 localization 我們就保持原樣,而這邊讓我們調整 Chinese 的 Main.strings 的檔案內容吧:

因為我本身手機的語系是繁體中文,而模擬器語系是英文的。讓我們來看看兩邊的差別吧:

Mmmmm...非常好,我們已經學會如何用這種方式做本地化的操作了,但這種方式建議在 Storyboard 上元件佈局已經完成的方式下才使用,因為這個 *.string 並不會自動更新QQ。


|使用 Interface Builder 設置本地化字串

首先讓我們建立一個 Localizable 的檔案,並且新增下列程式碼。這邊我們單純只用 UILabel 來做示範:

首先第一段程式碼我們 extension String,並且在其中新增一個 localized 的屬性,其中返回相對應的 NSLocalizedString。接著我們新增一個 Localizable 協議,我們讓遵循這個協議的元件能有 localizedKey 這個屬性。

最後一步,我們讓 UILabel 遵循這個協議,並且我們加上 @IBInspectable 修飾符讓我們在屬性列可以設置他,接著我們再 set 區塊中設定 Label.text 為這個 localizedKey 所對應的 String 內容。

接著讓我們建立一個 Localizable.string 檔案:

你可以透過點選 File Inspector 中的 localize... 的按鈕來新增對應的 .string 文件,成功的話結果應該會是這樣:

接著我們在這兩個檔案中分別建立 localizedKey 所相對應的內容吧:

接著讓我們刪掉原本 Storyboard 子項目中的 .string 檔案,讓我們透過屬性列中的 localizedKey 來設定內容吧:

接著運行看看結果,這邊我們只運行繁體中文的語系:

這邊我們看起來是可以正常進行本地化操作了,但是 NavigationBartitle 沒有改到,但是又懶得再去設定 UINavigationBarextension,該怎麼辦呢?

別擔心,我們一樣可以透過程式碼操作,我們剛剛最一開始有用 extension 的方式讓 String 多了一個 localized 的屬性,因此這邊我們只需要把本地化 key 值的 localizedtitle 即可:

再看一次結果吧:


Summary

其實我本來也以為本地化的功能會複雜的,但是我們可以透過上面兩種方式快速的對 APP 中的內容進行本地化設置,根據不同的需要使用不同的方式來設置 Localization 才是最好的選擇喔,因為我覺得兩種方式各有優缺。

第一次實作本地化,如果有錯誤內容,請見諒。如果有更好的實作 Localization 也歡迎與我交流分享。最後我會在 reference 分享一下這次 Localization 所參考的文章。

Reference


上一篇
D26 - 理解、分解、再構築,一起成為鍊金工程師吧!
下一篇
D28 - 你的輸入,我看得見
系列文
諸神黃昏下的 iOS 工程師31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言