#17 調色大師 — Google標誌的演進

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

5 min readSep 11, 2020

相信這幾個字母大家都不陌生, 雖然只是由幾個簡單的幾個英文單字組成, 但卻和我們的生活息息相關. Google的標誌隨著時間不斷的演進, 大家有經歷過哪幾個年代的Google呢? 是否會好奇未來的Google標誌長什麼樣呢? 這次作業就讓我們一起來產生下一代的Google標誌吧!

這邊我們先簡單用第一個字母來當作範例:

Step1: 先從網路上下載Google的圖片, 先做好去背的動作, 並放入Asset資料夾中.

Step2: 在storyboard中利用ImageView來放入圖片. 另外再加入3組Slider來控制畫面的顏色. 這邊可以透過Min Track來選擇滑動軌跡的顏色, 也能透過Thumb Tint來調整圓圈的顏色. 因為我們後面控制顏色會使用RGB三原色, 所以這邊直接改成紅綠藍比較直覺.

Step3: 接著我們把畫面切換成同時顯示storyboard和ViewController. 點選Slider拖曳到ViewController. 命名變數後, 待會我們就可以利用這些參數名稱來讀取目前Slider滑動到的位置. 此外, 我們也把剛剛加入的ImageView拖曳到ViewController, 一樣為我們的ImageView圖片命名.

Step4: 點選其中一條Slider拖曳到下方來產生function. 因這三條Slider功能都相同(用來調整顏色), 所以我們可以把他們都加在同一個function裡面. 這邊可以透過function前面的+號, 來連接另外兩個Slider.

Step5: 接著就是寫程式來描述當調整slider的時候要做的事情. 我們希望能夠從slider的位置來讀出值來調整畫面的顏色. 這邊要特別注意的是UIColor裡面的參數需要是CGFloat的型別, 所以從slider中讀出來的數值需要利用CGFloat來轉換.

@IBAction func colorChange(_ sender: Any) {
        
        googleImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: 1)
        
    }

Step6: 完成上面步驟, 我們已經能夠透過Slider來調整畫面的顏色了. 接下來, 我們嘗試產生一個隨機的顏色. 所以這邊加入一個按鈕, 並拖曳到右邊來描述當按下按鈕後的行為.

@IBAction func randomColor(_ sender: Any) {
        
        redSlider.value = Float.random(in: 0...1)
        greenSlider.value = Float.random(in: 0...1)
        blueSlider.value = Float.random(in: 0...1)
        
        googleImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: 1)
        
    }