Practice 5–4 調色大師
其實原本只是想做Practice2–2 ⭐️ 研究各種 UI 元件，但做著做著…就越做越複雜，結果就變成是稍微進階的Slider應用了，所以下面就來講一下練習時所遇到一些值得一提的部分吧。其餘細節的部分，可以看我的github。
首先希望要做到功能如下:
1. Slider搭配基本三原色調色
2. 顏色可一鍵隨機變色
3. 加入顏色漸層的效果，並能隨機變色。
4. 搭配Switch切換一般顏色及漸層顏色，並取得當下Slider狀態顯色
首先，先選張照片，然後在你想要更改顏色的地方，做到去背的效果(因為只有你去背的部分或本身就是透明的地方才可以變色)，所以我就選女友喜歡的『米妮』來玩玩吧。
至於去背就參考彼得潘的教學：
元件擺設及架構：
然後大概看一下畫面的架構跟圖片及元件的擺設：
值得一提的是各個元件都用view 裝起來，有點類似群組的概念，比較方便整理，另外特別的是每個ImageView後面都墊了一張一樣大小的view，為的就是稍後可以來做變色的功能。
✷補充：你也可以直接用ImageView來做變色，在前兩項需求時都能正常，但若是要做到漸層功能，就會卡關了…不信你可以玩玩看…我目前是無解就是了…
還有，三原色的配置就是ＲＧＢ每個都是0～255的數值，所以這邊也擬真把Slider的Maximum設定為255，Value也是255(因為我一開始預設是白色的）還有Label顯示數值的部分也設定為255
Outlet拉線：
元件擺好後就開始練習拉線囉，我的習慣是會從左邊的元件列表按住『Ctrl+滑鼠左鍵』來拉Outlet，比較不會因為圖形視窗上會有圖層差異，結果拉到別的元件，還做得很開心…
這些都是等等會用到的Outlet…
基本調色Function:
設計調整顏色的Function，使用剛剛墊在後方的View配合Slider的ValueChange去更改BackgroundColor搭配三原色的調色。
其中RGB的Slider.Value要除以255，因為剛剛元件設定Maximim是255(除了Alpha值是設定0–1不用除)
顯示數值Function:
Slider調整時，旁邊的Label數值也要跟著變動。
因為Slider.Value是Float型別，所以轉成Int整數去掉小數後，再顯示成String字串型別
其中 ％.2f 是顯示到小數點後兩位的意思。
漸層效果：
基本的功能大致上這些，接著講稍微進階的部分，先講漸層顏色的效果：
建立一個CAGradientLayer()的常數，設定它的大小，加入兩個Color的Array，設定起始位置，終點位置，變色的範圍，最後將它加到剛剛的View上面做顯示。
其中漸層的方向可因人而異做調整喔～
Action及亂數功能：
綜合以上各個效果的基本功能都能寫出來了，最後就把他們拼起來吧，包括隨機的功能以及Switch切換的功能：
值得一提的是Slider的Action 一次可以拉很多組Slider，再去判斷他的ValueChange取得相對應的值做變化，所以一次8個Slider共用一個Action。
內容就用 if else 判斷 Switch開關作動，如果開關是On 那就執行『漸層顏色』，否則else 執行『基本的調色』，最後再執行『顯示數值』的動作。
亂數Function就只是讓Slider的Value值送亂數在顯示就好：
唯獨Alpha值只有在基本調色裡才會隨機，因為漸層裡用不到Alpha值。
搭配Switch切換，並取得當下Slider狀態顯色
這邊有幾個功能稍做解釋一下：
首先是Switch On的時候（也就是開啟漸層）因為Alpha值用不到，所以關閉了Alpha值的Slider，然後進行『漸層顯色』的Function。
Switch Off的時候，除了要開啟Alpha值的Slider以外，還要將新增再View上面的漸層Sublayer拿掉，才會顯示回原本的『基本調色』畫面，再取現況Slider的值去做顯色。
最後放上Gif檔 看看動畫～
以上就是Slider調色的練習分享，原本真的只是想要做個簡單的調色功能，結果不知不覺的就研究了更多的功能，還有彼此要結合及互相影響的Debug，只能說『Coding的魅力就在這裡，永遠沒有停止的一天』
附上連結，供參考。
