#17 調色大師，調出一雙完美配色的球鞋

目的：熟練 outlet，action，UISlider, UIColor。

運用到的技術：

• 利用Slider進行調色、圓角及陰影
• 利用random亂數定義一個隨機調色button
• 利用CAGradientLayer搭配Slider調整漸層範圍

拉IBOutlet&IBAction

畫面做好後就是拉元件的IBOutlet&IBAction，將會用到的UI元件拉進ViewController後就可以開始寫功能了！

調色Function

因為已經將要變更顏色的地方挖空，imageView的backgroundColor代表鞋子的顏色，所以在這邊將三原色及透明度Slider傳入，在畫面上控制Slider時，會隨著Slider的值改變顏色

將多個元件拉進IBAction，就可以在這個function同時呼叫到這些元件，不用每個元件都拉一個IBAction，讓程式更乾淨一點

@IBAction func colorChange(_ sender: UISlider) {
        imageView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))
        borderView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))
        
        valueLabel()
    }

邊框Function

這裡也是將要改變的值傳入Slider.value

@IBAction func border(_ sender: UISlider) {
        imageView.layer.cornerRadius = CGFloat(cornerSlider.value)
        borderView.layer.cornerRadius = CGFloat(cornerSlider.value)
        borderView.layer.masksToBounds = false
        borderView.layer.shadowColor = UIColor.gray.cgColor
        borderView.layer.shadowOffset = CGSize(width: 3, height: 3)
        borderView.layer.shadowOpacity = 0.8
        borderView.layer.shadowRadius = CGFloat(shadowSlider.value)
    }

漸層背景Function

.locations可以控制漸層的範圍，所以在這裡傳入漸層Slider的值，最後一行view.layer.insertSublayer(gradientLayer, at: 0) 將漸層加到最下層

@IBAction func gradient(_ sender: Any) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = view.frame
        gradientLayer.colors = [CGColor(red: 92/255, green: 223/255, blue: 231/255, alpha: 1), CGColor(red: 177/255, green: 143/255, blue: 199/255, alpha: 1)]
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 1)
        gradientLayer.locations = [0, NSNumber(value: gradientSlider.value)]
        view.layer.insertSublayer(gradientLayer, at: 0)
    }

亂數Button&重新調色Button

.random(in: 0…1)代表會從0~1之間隨機抓取一個值，.setValue可以讓Slider在移動的過程中有動畫

@IBAction func randomColor(_ sender: Any) {
        alphaSlider.setValue(.random(in: 0...1), animated: true)
        redSlider.setValue(.random(in: 0...1), animated: true)
        greenSlider.setValue(.random(in: 0...1), animated: true)
        blueSlider.setValue(.random(in: 0...1), animated: true)
        
        imageView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))
        borderView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))
        
        valueLabel()
    }
@IBAction func reset(_ sender: Any) {
        imageView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1)
        borderView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1)
        alphaSlider.setValue(1, animated: true)
        redSlider.setValue(0, animated: true)
        greenSlider.setValue(0, animated: true)
        blueSlider.setValue(0, animated: true)
        valueLabel()
    }

顯示Slider的值

因為Label回傳的是String字串，所以必須將Slider的值轉成字串，“%.2f”代表顯示到小數點後兩位

func valueLabel() {
        redLabel.text = String(format: "%.0f", redSlider.value * 255)
        greenLabel.text = String(format: "%.0f", greenSlider.value * 255)
        blueLabel.text = String(format: "%.0f", blueSlider.value * 255)
        alphaLabel.text = String(format: "%.2f", alphaSlider.value)
    }

Demo:

GitHub - SwingDeveloper/colorRandom

Reference

#13 彼得潘的影子 — 調色大師