公司的產品越做越大,前一陣子幫公司的 app 加上阿拉伯文介面,開發過程也累積了一些支援 RTL 語系的心得,藉這個機會跟大家分享。

找到 Native Speaker

對於書寫方向是「從左到右」的我們來說,最困難的其實不是看不懂這個語言,而是不知道這樣的 layout 是否正確,因為 layout 絕對不是全部都無腦的換成「從右到左」就好。所以如果情況許可,最好找個 native speaker 讓團隊諮詢(例如找個當地的員工,或是請當地大學生來打工之類),這樣可以節省不少來回確認界面的時間。

仔細閱讀蘋果文件

很多開發的注意事項都寫在這份蘋果文件裡頭了,開發前跟開發時務必要多次閱讀,會有很大的幫助。另外,不只是 RD 需要閱讀這份文件,PM、QA、Designer 也應該看過,才不會發生 RD 做出正確界面,結果其他人以為是錯的(例如多媒體播放器的控制元件是不需要 RTL 的)。

程式開發的一些小技巧

圖片左右翻轉

如果有特殊需求的話,可以考慮對圖片 localized,這樣就可以提供適當翻轉過的圖片給特定語言,或是你也可以透過程式碼去翻轉圖片。但是假如你需要的就只是左右翻轉的圖片(例如 arrow 或 bullet-list 的圖片),可以很簡單的透過以下方式取得:

UIImage *image = [UIImage imageNamed:@"xxx"];
// 對圖片做一些必要處理
// .....
// 最後再翻轉圖片
image = [image imageFlippedForRightToLeftLayoutDirection];

要注意的是,翻轉一定要放在最後一步,這樣才會得到預期結果。

使用 Auto Layout 及相關技術

正確使用 auto layout 的 leadingtrailing,加上將 textAlignment 設為 NSTextAlignmentNatural,就可以解決九成以上的 RTL 佈局。如果你的程式還沒支援 auto layout,可以趁機逐步轉換過去。

手動計算 Frame

由於種種因素讓你還無法轉成 auto layout(例如為了效能考量,或是有些地方就是用 frame 比較容易,或是轉換成本太大),這時候你就需要判斷現在是否在 RTL 環境來調整 frame。

if ([UIView userInterfaceLayoutDirectionForSemanticContentAttribute:view.semanticContentAttribute] == UIUserInterfaceLayoutDirectionRightToLeft) {
    // RTL 佈局
} else {
    // LTR 佈局
}

翻轉再翻轉

還有一種情況是不方便用 auto layout,但是手動計算 frame 又有很多額外因素要考量讓你不想計算。舉個常見的例子:有上下兩個可以左右滑動的 scroll view,上面是多個 tab,下面是點選 tab 之後要捲動到特定範圍。常見的做法是上方每個 tab 都有一個 index,下方則是根據選中的 index 計算 contentOffset。在 RTL 並且要手動計算 frame 的情況下,你會發現 index 處理起來很麻煩。

這裡有一個小技巧,我們可以先對最外層的 container view(例如 UIScrollView)左右翻轉,然後再對 subviews 左右翻轉一次。經過兩次翻轉,這些 subviews 就會從右到左排列,而且原有的程式碼幾乎不需要改動。這招或許看起來很 tricky,但它真的很有用,用得好可以節省非常多的時間。

if ([UIView userInterfaceLayoutDirectionForSemanticContentAttribute:view.semanticContentAttribute] == UIUserInterfaceLayoutDirectionRightToLeft) {
    scrollView.transform = CGAffineTransformMakeScale(-1, 1);
    for (UIView *subview in scrollView.subviews) {
        subview.transform = CGAffineTransformMakeScale(-1, 1);
    }
}

以上就是我們在支援 RTL 時用到的所有方式,希望對大家有幫助。