iOS | 一些多國語系遇到的小事

Nia Fan
Now I’m Again
Published in
5 min readNov 8, 2019

--

Photo by Joel Naren on Unsplash

隨著公司的新專案進度穩定,最近做了多國語系的功能,也踩到了一些小坑,趁著記憶猶新時,趕緊來記錄一下。

前言:Localization 方式

這篇並不是教學文,只想先簡單提一下常見的兩種做法:一為在 Storyboard ,另一則是利用 code ,兩者都是根據某個 key 值在不同語系去做字串替換。

前者,是根據 Storyboard 中 inspector 的 Object ID 當作 key,如下圖的Ny4-FQ-WkU。但這一來要在 Storyboard 設定,載入速度慢,且資料分散又不易閱讀,所以我們是使用 code 去處理。

Placeholder 顏色

左為原版本設計,右為多國語系後

確認完文字後,意外發現顏色居然跑掉了。而且只有 UITextField Placeholder 的顏色有色差,其他 UILabel 和 UIButton 都沒事。

下了一些關鍵字: UITextfield, placeholder, font color, localization, different後,發現這篇的狀況跟我很像,但也沒有解法。

UITextField placeholder is in different color when app is localized

超級比一比,找找看哪個數值不一樣 👀

後來在 Debug Layer 時,比對了左右顏色,發現右邊 R:0, G:0, B:0.1, A:0.22 這個設定其實是系統預設的,所以進一步去思考究竟為什麼會這樣 🤔

在厲害的同事分析後,發現:因為我們建立一個繼承自 UITextField 的物件去客製化符合設計檔 placeholder 的顏色 R:1, G:1, B:1, A:0.5 ,同時會在 init UITextField 時 setup 顏色。

var placeholderColor: UIColor = UIColor.white {
didSet {
attributedPlaceholder = NSAttributedString(string: placeholder ?? "", attributes: [NSAttributedString.Key.foregroundColor: placeholderColor])
}
}

而我們在設定多國語系時,是在 ViewController 去替換字串,但儘管我們抽換了不同語系,都不會觸發它改色(只在 init 跑過一次),所以最後採用的解法是 → 手動 override placeholder

override var placeholder: String? {
didSet {
attributedPlaceholder = NSAttributedString(string: placeholder ?? "", attributes: [NSAttributedString.Key.foregroundColor: placeholderColor])
}
}

再試一次,就大功告成了! 👏

(但有發現 iOS 13 之後就沒這問題了,應該是 🍎 fix 了?)

圖片 Localize

另外,有些圖片我們是存在 Assets,而不同語系也有不同的圖片。

網路上最常見的是把圖片拉到資料夾中跟 AppDelegate 同層的位置,點選 localize 後會生成不同資料夾,再一一放同檔名不同語系的圖片在各自的資料夾。

但,這資料夾結構真的很醜啊!

而且,他還有很多限制,比如 Assets 裡頭你可以定義 resizing, scales 等等,但它放在外面就只是一個檔案, pdf 沒辦法直接轉成圖片(還是我用錯?)動態調整圖片尺寸也不行。

好吧再查查… 咦,可以直接在 Assets 裡面做 Localization?

嗯,原來是 Creating Great Localized Experiences with Xcode 11

因為要先近期出版,所以最後折衷參考文字的 localize 方法,一樣存了一個圖片 key,對應的圖片檔名就根據不同語系有不同的字尾,ex: _zh

以上兩個是目前在做多國語系所遇到的兩件小事,其他還有像是 layout constraint 也是遇到單字較長的國家時必須要檢查的,容易擠壓到或是疊在一起(誰叫你以前不好好對齊 QQ),之後如果有 RTL 語系,也要檢查類似 leadingtrailing 的設定。

身為一個很常使用 Stack overflow 的人,最後也分享我第一次使用回覆的功能,就在上面連結的下方,雖然也不知道有沒有人會看到 XD 但希望能夠幫助到跟我一樣碰到的人 😌

Hope to help someone in one day lol
Feel free to leave any comment or feedback.
如果覺得文章不錯的話,歡迎幫我拍拍手👏🏻👏🏻👏🏻

--

--

Nia Fan
Now I’m Again

主修中文、待了兩年公關公司,努力成為 iOS 軟體工程師 💪🏻 熱愛美食和旅遊 🎬 http://bit.ly/niaYoutube / 📷 http://bit.ly/niaeatfood