#10 幫《戴黑帽的男人》換蘋果顏色

熟練目標：outlet、action、UISlider、UIColor

René Magritte的名畫《The Son of Man》一直在吃綠蘋果，我覺得看起來很酸，就來幫他催熟蘋果好了。

利用Slider變換顏色

從網路上找到名畫圖片，將蘋果果實去背，再搭配螺旋星系當作變換顏色的背景圖。

蘋果不見的黑帽男

新建一個Xcode的Project，加入兩個Image View。螺旋星系設定為背景階層；黑帽男蓋在上面，拉成滿版畫面。

接著要改銀河的背景顏色。加入四個Slider，並調整Track和Tint的顏色。Value設定值為1

Slider的透明墊底背景運用View調整BG顏色，並在Key Path輸入：layer.cornerRadius，Type選擇Number，再輸入圓角數值。記得clipsToBounds要打勾。模擬器打開才會顯示圓角。

加了Slider，但還無法變色。開始寫程式！

點選右上角編輯者選項。

開啟輔助視窗。

把螺旋星系的背景圖片拉一個outlet，名稱設定bgColorChange，其他四個Slider也各拉一個outlet。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var bgColorChange: UIImageView!
    @IBOutlet weak var redSliderChange: UISlider!
    @IBOutlet weak var greenSliderChange: UISlider!
    @IBOutlet weak var blueSliderChange: UISlider!
    @IBOutlet weak var alphaSliderChange: UISlider!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

outlet設定完，在程式下方拉一個Slider的Action指令。名稱設定changeColor，記得四個Slider都要拉在同一個Action裡面。

滑鼠游標移到加號，可以看出四個Slider都包含在同一個Action指令裡。

@IBAction func changeColor(_ sender: Any) {
        bgColorChange.backgroundColor=UIColor(red: CGFloat(redSliderChange.value), green: CGFloat(greenSliderChange.value), blue: CGFloat(blueSliderChange.value), alpha: CGFloat(alphaSliderChange.value))
    }

Slider可以隨意變換顏色囉～

亂數變換顏色

新增一個UIButton，將按鈕變成圓形。並設定按下Button就能亂數換顏色。

將Button拉一個outlet，並在viewDidLoad下方新增一串程式，變身成圓形按鈕。

 @IBOutlet weak var button: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        self.button.layer.cornerRadius=self.button.frame.size.height/2

圓形按鈕製作教學可參考這篇：

(Day2)Swift 4 用storyboard 製作按鈕 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

圓形按鈕在右上角，按下後隨機變換顏色。

 @IBAction func randomColor(_ sender: Any) {
        redSliderChange.value = .random(in: 0...1)
        greenSliderChange.value = .random(in: 0...1)
        blueSliderChange.value = .random(in: 0...1)
        alphaSliderChange.value = .random(in: 0...1)
        
        bgColorChange.backgroundColor=UIColor(red: CGFloat(redSliderChange.value), green: CGFloat(greenSliderChange.value), blue: CGFloat(blueSliderChange.value), alpha: CGFloat(alphaSliderChange.value))
    }

Slider滑動時加上動畫效果

原先.value的參數變成.setValue，並將animated打開為true。

微弱的滑動感

@IBAction func randomColor(_ sender: Any) {
        redSliderChange.setValue(.random(in: 0...1), animated: true)
        greenSliderChange.setValue(.random(in: 0...1), animated: true)
        blueSliderChange.setValue(.random(in: 0...1), animated: true)
        alphaSliderChange.setValue(.random(in: 0...1), animated: true)
        bgColorChange.backgroundColor=UIColor(red: CGFloat(redSliderChange.value), green: CGFloat(greenSliderChange.value), blue: CGFloat(blueSliderChange.value), alpha: CGFloat(alphaSliderChange.value))
    }

開始拉outlet和action後，慢慢感覺到Xcode更多客製化的操作，比單純用storyboard製作來得更具彈性，期待學習animated的各種變化。