從 Assets 設定自動左右鏡射的圖片

有時候我們希望 App 能依據語言的方向性,顯示不同的圖片。比方在語言由左至右的國家,向右的箭頭圖片,切換到語言由右至左的國家時,自動變成向左的箭頭。

如果只是希望圖片左右鏡射,其實不需麻煩高貴的設計師大大切兩種圖。我們只需一種圖,從 Assets.xcassets 設定即可實現左右鏡射的效果。接下來,就讓我們以張智霖朱茵演出的郭靖黃蓉圖片為例說明吧。

1 在 Assets.xcassets 裡加入男左女右的圖片,取名為 chilam,切換到 Attributes Inspector 頁面,修改 Direction 欄位。

Image for post
Image for post

2 選擇 Right To Left, Mirror。

Image for post
Image for post
Image for post
Image for post

以下為 Direction 四種欄位的說明:

(1) Fixed: 預設的設定,圖片不因語言的方向性而改變。

(2) Left to Right, Mirrors: 設定語言由左至右時顯示的圖片。在語言由右至左時,圖片會被左右鏡射顯示。

(3) Right to Left, Mirrors: 設定語言由右至左時顯示的圖片。在語言由左至右時,圖片會被左右鏡射顯示。

(4) Both: 分別設定語言由左至右和由右至左顯示的圖片。

Image for post
Image for post

3 在 Storyboard 的畫面加入 UIButton,將 Image 設為 chilam。

Image for post
Image for post

執行 App ! 靖哥哥張智霖跑到右邊,蓉兒朱茵躲到左邊了 ! 不管圖片如何鏡射,靖哥哥還是會守護在朱茵身邊的。

Image for post
Image for post

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store