Swift — 創建可著色圖片(Tintable Image)
來看看如何使用程式碼來更換圖片顏色吧!
✏︎ 前言:
當我們在開發專案時,發現設計圖上的某個元件顏色不對了或者是設計師漏掉的某個顏色的元件,這時候請別擔心。我們還可以透過一些設定或語法來調整圖片的顏色。
在開始之前,我們一樣來閱讀一下官方文檔,並且把重點著重在 Create Tintable Images Using Template Images 上:
▸ Create Tintable Images Using Template Images
為不同的外觀提供獨立的圖片的另一種方法是提供適合所有外觀的單個模板圖片(template image)。模板圖片是一個 bitmap 圖片,其中只有圖片的不透明度(opacity)重要。通常,你會使用模板圖片來表現標誌性形狀(icon)。例如,你可以想要使用模板圖片來表示媒體應用中的播放和暫停按鈕。
當你添加模板圖片到 button 或 image view 時,你還可以指定 tintColor。該視圖將 tintColor 顏色應用到每個 alpha 不為 0.0 的像素中,來使圖像的形狀採用該顏色。要支持不同的外觀,只需簡單的更改 tintColor。例如,你可以在明亮的環境中採用深色調,在深色的環境中使用淺色調。
使用你喜歡的圖片編輯器來創建模板圖片檔案。創建圖像時,請使用透明背景,並且在要顯示圖像的任何位置添加黑色像素。像素可以完全不透明,也可以部分不透明,取決於你是否希望模板圖片的某些部分與背景色混合。將圖片添加到你的 Assert catalog 時,在 Inspector 裡該圖片的 Image Set 中將 Render As 選項設置為 Template Image。
✏︎ 實作 Tintable Image
接著讓我們在 Xcode 中的 Assets 放入幾個 icon 後,並且與上面所述的一樣,將這些圖片的 Render As 設置為 Template Image 吧:
再調整完顏色之後,別忘了設置圖片的 tintColor,Template Image 的顏色會採用我們視圖中的 tintColor:
如此一來就可以隨意更改我們 ImageView 中圖片的顏色啦 🎉
如果是使用程式碼話也沒關係,我們可以透過 UIImage
中的 withRenderingMode
方法,並且參數選擇 .alwayTemplate
來將圖片設置為 Template image。
✏︎ 後記:
相信看完這篇文章,各位讀者之後就知道如何直接修改這些簡單的 icon 圖片了,再也不需要讓設計師在每種顏色上的輸出一張圖片了,透過這種方式在處理 APP 中整體的顏色上相對於每個顏色一張圖片好處理多了,也可以少放許多圖片在 Assets 檔案中。