級別:★★☆☆☆
標籤:「iOS 本地化」「Storyboard」「Xib」「圖片」「應用顯示名稱」
作者: WYW
審校: QiShare團隊
最近專案需要做 “本地化”,“本地化” 是讓app支援多種語言的過程。附:官方文件
我將從以下幾點介紹本地化內容:
- iOS 本地化Storyboard、Xib、圖片、應用顯示名稱、版權資訊。
- 本地化非Interface Builder的文字。
我使用storyboard結合程式碼建立瞭如下的一個Demo(QiShareLocalization)。
Demo(QiShareLocalization)解讀:
- QiShareLocalization對英文和簡體中文做了本地化處理。
- QiShareLocalization有一個啟動頁面,啟動圖顯示的文字在英文環境下顯示“QiShareLocalization”,在中文環境下顯示“奇分享本地化”。
- QiShareLocalization的首頁顯示的圖片,在英文環境下顯示為**“奇分享的Logo圖片”,在中文環境下顯示為“奇分享的二維碼圖片”;包括對文字“首頁”,“跳轉”,“奇分享首頁”**都做了本地化處理。
- QiShareLocalization點選跳轉後的頁面,對顯示的**“奇分享本地化文字"**,圖片,應用名稱,版權資訊都做了本地化處理。
Demo效果:
-
簡體中文環境: 啟動頁顯示不符合簡體中文
啟動頁顯示和預期效果相符(zh-Hans
) -
英文環境:
一、本地化準備工作
1.1 給專案新增本地化語言
- 新增中文簡體語言的方式如下:選中專案的
PROJECT -> Info -> Localizations
新增簡體中文(zh-Hans代表簡體中文)
新增簡體中文:

Reference Language:

如果再次新增其他本地化語言,注意File Types可選:

1.2 Use Base Internationalization

勾選作用:把文字從.storyboard
和.xib
檔案中分離出來
- 如果不選中
Use Base Internationalization
,那麼在新增本地化語言的時候,會建立多個相應語言的storyboard
、xib
,那麼我們還可以調整不同語言下的介面佈局及顯示內容。 - 如果選中
Use Base Internationalization
,那麼在新增語言的時候,會把當前的storyboard
、xib
中的文字提取出來,我們只需要在相應的新增的.strings
檔案中改變對應的文字即可。
1.如果不選中“Use Base Internationalization”操作步驟及生成的檔案, 如下所示:


生成的檔案:

- 如果選中“Use Base Internationalization”並且更改LaunchScreen.storyboard的File Types Interface Builder Storyboard後,操作步驟及生成的檔案。如下所示:


- 生成的檔案:

然後我們可以調整.strings
中的檔案或者是調整相應語言的Storyboard都可以達到本地化Storyboard的效果
1.3 Reference Language
- Reference Language指的是新建的語言檔案參考的語言,如果新增中文繁體參考中文簡體,那麼新增的中文繁體的檔案將和專案中中文簡體中的檔案一樣。

1.4 File Types
- 可以選用Localizable strings 也可以使用Interface Builder Storyboard
經過上述操作,可以調整.strings
中的檔案或者是調整相應語言的Storyboard
都可以達到本地化Storyboard
的效果。
二、開始本地化:
2.1 可見文字的本地化




但是對於啟動的Storyboard,我做調整之後,並沒有起到效果。後來查到,其實可以建立不同本地化語言相應的啟動Storyboard,通過修改InfoPlist.strings
(注:這部分內容後邊會提到)中的UILaunchStoryboardName = "LaunchScreen_zhHans";
指定對應的啟動的Storyboard即可做到本地化啟動Storyboard的效果。參考部落格
2.2 iOS本地化App的顯示應用名及版權資訊
- 準備工作:在
Info.plist
中新增應用顯示名及版權資訊鍵值對。
<key>NSHumanReadableCopyright</key>
<string>Copyright © 2018-2108 QiShare.</string>
<key>CFBundleDisplayName</key>
<string>$(PRODUCT_NAME)</string>
複製程式碼

- 建立
InfoPlist.strings
,示意圖如下:


-
修改簡體中文的
InfoPlist.strings
的文字 -
修改英文的
InfoPlist.strings
的文字 -
專案中程式碼使用:
// 應用顯示名
[[[NSBundle mainBundle] localizedInfoDictionary] objectForKey:@"CFBundleDisplayName"];
// 版權資訊
[[[NSBundle mainBundle] localizedInfoDictionary] objectForKey:@"NSHumanReadableCopyright"];
複製程式碼
簡體中文輸出內容: 奇分享本地化 版權 © 2018-2108 奇分享.
英文輸出內容: QiShare Localization Copyright © 2018-2108 QiShare.
對於上文提到指定相應的本地化啟動Storyboard,可以看下列的指定方式:

至於檢視Info.plist
檔案中的key
可以通過下圖Show Raw Keys/Values
的方式:

2.3 iOS 本地化App的圖片資原始檔
-
本地化圖片資源:
-
新增QiShareLogo簡體本地化支援:
-
選中以支援QiShareLogo英文字地化支援:
-
選中後效果:
選中相應的圖片Show In Finder
更改英文的本地化圖片:


專案中獲取對應的圖片使用:
[UIImage imageNamed:@"QiShareLogo"];
複製程式碼
或
[[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"QiShareLogo" ofType:@"png"]];
複製程式碼
對於圖片的本地化,我目前分享的不包括Assets.xcassets
中的圖片資源,我當前還沒找到比較合適的方式。
看了下其他人分享的文章,有通過像本地化非IB的文字(下篇文章分享)的方式來指定不同的語言環境載入不同的圖片。
至於xib的本地化,這次先不分享細節了,如果做了本地化之後,後期又新增的xib,xib的本地化,可以參考圖片的本地化,是一樣的。
比如:某xib,本地化前

比如:某xib,本地化後

工程原始碼:GitHub地址
關注我們的途徑有:
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)
推薦文章:
iOS 檔案操作簡介
iOS 關鍵幀動畫
iOS 小遊戲專案——數字速算升級版
iOS 小遊戲專案——你話我猜升級版
奇舞週刊