iOS 本地化(IB篇)

QiShare發表於2018-11-19

級別:★★☆☆☆
標籤:「iOS 本地化」「Storyboard」「Xib」「圖片」「應用顯示名稱」
作者: WYW
審校: QiShare團隊

最近專案需要做 “本地化”“本地化” 是讓app支援多種語言的過程。附:官方文件

我將從以下幾點介紹本地化內容:
  • iOS 本地化Storyboard、Xib、圖片、應用顯示名稱、版權資訊。
  • 本地化非Interface Builder的文字。

我使用storyboard結合程式碼建立瞭如下的一個Demo(QiShareLocalization)。

Demo(QiShareLocalization)解讀:

  • QiShareLocalization對英文和簡體中文做了本地化處理。
  • QiShareLocalization有一個啟動頁面,啟動圖顯示的文字在英文環境下顯示“QiShareLocalization”,在中文環境下顯示“奇分享本地化”。
  • QiShareLocalization的首頁顯示的圖片,在英文環境下顯示為**“奇分享的Logo圖片”,在中文環境下顯示為“奇分享的二維碼圖片”;包括對文字“首頁”“跳轉”“奇分享首頁”**都做了本地化處理。
  • QiShareLocalization點選跳轉後的頁面,對顯示的**“奇分享本地化文字"**,圖片應用名稱版權資訊都做了本地化處理。

Demo效果:

  • 簡體中文環境: 啟動頁顯示不符合簡體中文

    iOS 本地化(IB篇)
    啟動頁顯示和預期效果相符(zh-Hans
    iOS 本地化(IB篇)

  • 英文環境:

    iOS 本地化(IB篇)

一、本地化準備工作

1.1 給專案新增本地化語言
  • 新增中文簡體語言的方式如下:選中專案的PROJECT -> Info -> Localizations 新增簡體中文(zh-Hans代表簡體中文)

新增簡體中文:

iOS 本地化(IB篇)

Reference Language:

iOS 本地化(IB篇)

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

iOS 本地化(IB篇)

1.2 Use Base Internationalization

iOS 本地化(IB篇)

勾選作用:把文字從.storyboard.xib檔案中分離出來

  • 如果不選中Use Base Internationalization,那麼在新增本地化語言的時候,會建立多個相應語言的storyboardxib,那麼我們還可以調整不同語言下的介面佈局及顯示內容。
  • 如果選中Use Base Internationalization,那麼在新增語言的時候,會把當前的storyboardxib中的文字提取出來,我們只需要在相應的新增的.strings檔案中改變對應的文字即可。

1.如果不選中“Use Base Internationalization”操作步驟及生成的檔案, 如下所示:

iOS 本地化(IB篇)

iOS 本地化(IB篇)

生成的檔案:

iOS 本地化(IB篇)

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

iOS 本地化(IB篇)

iOS 本地化(IB篇)

  • 生成的檔案:

iOS 本地化(IB篇)

然後我們可以調整.strings中的檔案或者是調整相應語言的Storyboard都可以達到本地化Storyboard的效果

1.3 Reference Language
  • Reference Language指的是新建的語言檔案參考的語言,如果新增中文繁體參考中文簡體,那麼新增的中文繁體的檔案將和專案中中文簡體中的檔案一樣。

iOS 本地化(IB篇)

1.4 File Types
  • 可以選用Localizable strings 也可以使用Interface Builder Storyboard
    File types

經過上述操作,可以調整.strings中的檔案或者是調整相應語言的Storyboard都可以達到本地化Storyboard的效果。

二、開始本地化:

2.1 可見文字的本地化

簡體

英文

簡體LaunchScreen.storyboard

英文LaunchScreen.storyboard

但是對於啟動的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>
複製程式碼

Info.plist中新增

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

iOS 本地化(IB篇)

iOS 本地化(IB篇)

  • 修改簡體中文的InfoPlist.strings的文字

    iOS 本地化(IB篇)

  • 修改英文的InfoPlist.strings的文字

    iOS 本地化(IB篇)

  • 專案中程式碼使用:

// 應用顯示名
[[[NSBundle mainBundle] localizedInfoDictionary] objectForKey:@"CFBundleDisplayName"];
// 版權資訊
[[[NSBundle mainBundle] localizedInfoDictionary] objectForKey:@"NSHumanReadableCopyright"];
複製程式碼

簡體中文輸出內容: 奇分享本地化 版權 © 2018-2108 奇分享.
英文輸出內容: QiShare Localization Copyright © 2018-2108 QiShare.

對於上文提到指定相應的本地化啟動Storyboard,可以看下列的指定方式:

iOS 本地化(IB篇)

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

Show Raw Keys/Values

2.3 iOS 本地化App的圖片資原始檔
  • 本地化圖片資源:

    iOS 本地化(IB篇)

  • 新增QiShareLogo簡體本地化支援:

    iOS 本地化(IB篇)

  • 選中以支援QiShareLogo英文字地化支援:

    iOS 本地化(IB篇)

  • 選中後效果:

    iOS 本地化(IB篇)

選中相應的圖片Show In Finder更改英文的本地化圖片:

iOS 本地化(IB篇)

iOS 本地化(IB篇)

專案中獲取對應的圖片使用:

 [UIImage imageNamed:@"QiShareLogo"];
複製程式碼

[[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"QiShareLogo" ofType:@"png"]];
複製程式碼

對於圖片的本地化,我目前分享的不包括Assets.xcassets中的圖片資源,我當前還沒找到比較合適的方式。 看了下其他人分享的文章,有通過像本地化非IB的文字(下篇文章分享)的方式來指定不同的語言環境載入不同的圖片。 至於xib的本地化,這次先不分享細節了,如果做了本地化之後,後期又新增的xib,xib的本地化,可以參考圖片的本地化,是一樣的。

比如:某xib,本地化前

某xib 本地化前

比如:某xib,本地化後

某xib 本地化後

工程原始碼:GitHub地址

關注我們的途徑有:
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)

推薦文章:
iOS 檔案操作簡介
iOS 關鍵幀動畫
iOS 小遊戲專案——數字速算升級版
iOS 小遊戲專案——你話我猜升級版
奇舞週刊

相關文章