用 UIImageRenderingMode 讓 button & bar 的 icon 顯示原本的彩色圖片
iOS App 有三種常見的 bar,navigation bar, tab bar 和 tool bar。在 bar 上我們可以加入漂亮的 icon 圖片,不過一般我們常見的是類似下圖的單色 Icon。
如果想要類似 FB App 的多彩 icon,也是可以。只是得在 Assets 裡動手腳。
除了 bar 上的 icon,當 button 的 Type 是 System 樣式時,透過 image 欄位設定的圖片也會遇到顏色問題。如下圖所示,彩色的 peter 在 App 上變成了單色的圖片,讓我們看不清 peter 帥氣的臉蛋。此問題同樣可透過 Assets 解決。(ps: 當 button 的 type 為 Custom 時將可自動顯示彩色圖片,不會有問題。)
接下來,就讓我們以帥氣的英國國旗為例,瞧瞧如何在 navigation bar 和 tab bar 顯示紅藍國旗吧。
1 在 Assets.xcassets 裡加入英國國旗的圖片 britain。
2 在 storyboard 裡設計畫面,在 bar 上加入 bar button item,將 Image 設為 britain。
在 storyboard 和執行 App 時,圖片都會變成一塊藍色的長方形,因為 bar button item 預設圖片是單色圖,不管原本的圖有幾種顏色,全都會變成同一個顏色。(就好像我們如果移民到太陽上,全都會曬黑變成黑人一樣。)
沒關係,接下來我們只要在 Assets 裡調整一個地方,即可顯示圖片原本的顏色。
3 編輯 Assets.xcassets 裡的圖片 britain。
點選 Assets.xcassets 裡的圖片 britain。
在 Attributes inspector 頁面,找到 Render As 欄位。
此欄位原本是 Default,表示圖片顯示時將依元件的特性顯示,比方在 image view 時顯示原本的樣子,在 bar button item 時變成單色。
我們可以強制要它永遠顯示原本的樣子,只要將 Render As 設為 Original Image。
大功告成 ! 雖然沒那麼聰明的 storyboard 還是會顯示成藍色長方形,但 App 真的執行時,將顯示帥氣的英國國旗。
不僅於此,調成 Original Image 後,在 tab bar & tool bar 也可以顯示圖片原本的樣子呢 !
如果想從程式調整圖片的顯示 ,則可呼叫 function withRenderingMode(_:),傳入 UIImageRenderingMode 型別的參數控制。
let image = UIImage(named: "britain")?.withRenderingMode(.alwaysOriginal)
UIImageRenderingMode 有三種 case,automatic 對應 storyboard 裡的 Default。
public enum UIImageRenderingMode : Int {
case automatic // Use the default rendering mode for the context where the image is used
case alwaysOriginal // Always draw the original image, without treating it as a template
case alwaysTemplate // Always draw the image as a template image, ignoring its color information
}