Swift — 創建自定義顏色

讓我們來看看如何在 APP 中創建並使用自定義顏色吧!

Jeremy Xue
Jeremy Xue ‘s Blog
4 min readApr 25, 2020

--

Photo by Ricardo Gomez Angel on Unsplash

前言:

在 APP 中常常會碰到需要調整顏色的需求,無論是元件顏色、文字顏色、背景顏色,甚至會調整 APP 的主題色。相信這些需求對各位工程師來說一定不難。但是我們可以透過一些簡單的方式,讓我們在使用這些顏色時更加直覺且快速。

今天會主要介紹兩種不同層面創建自定義顏色的方式,分別是在程式碼InterfaceBuilder 中創建自定義顏色的方式。

▸ 創建自定義顏色

▸ Color enum

相信各位開發者一定都會使用一些方式來處理在程式碼中使用到的顏色,而這邊我也大概介紹我的方式。這邊我們會創建一個 enum 名為 Color,並宣告一個 static 常數存儲它:

大概就是以下幾個想法會讓我想使用 enum + static 來管理顏色:

  • 與 UIColor 做出區別,每次設置顏色必須使用 Color.someColor
  • 會看到 Color 中的 static 屬性(如果使用 extension UIColor 的方式的話,你還會看到其他 UIColor 中預設的顏色)
  • 你無法創建 enum Color 的實例(不存在 Color() 這件事)

如此一來,你就能透過這個方式調用你所定義的顏色了:

當然這樣初步處理起來,已經能夠很好的去使用了。但我們可以加上一些東西使他變得更好。這邊我們為 Color 中的 static 屬性添加註解,透過這個方式讓我們在調用顏色的時候可以看見我們所註解的描述內容,以這個例子來說就是該顏色的描述(中文名稱 + Hex)

如此一來再也不用煩惱要調用哪個 hex 號的藍色了:

▸ Color set

那麼程式碼部分解決了,接下來我們就來看看如果使用 InterfaceBuilder 來創建自定義顏色吧。首先,我們創建一個名為 Colors 的 Asset Catalog,接著該資料夾中點選下方的 + 號按鈕,並且選擇 New Color Set 選項,你就會得到一個白的 Color set:

接著就讓我們創建與剛剛 Color enum 相對應的顏色的 Color set 吧:

接著我們就可以在 InterfaceBuilder 上使用我們創建的 Color set:

後記:

本篇文章的內容就到這邊結束,以上是一些我在專案中管理顏色的方式,透過這些方式無論是在程式碼或是 InterfaceBuilder 上使用這些自定義顏色都非常容易,而創建這些自定義顏色的過程也十分容易。如果你還有更好管理這些顏色的方式,也歡迎留言與我分享 🙇🏻‍♂️

--

--

Jeremy Xue
Jeremy Xue ‘s Blog

Hi, I’m Jeremy. [好想工作室 — iOS Developer]