『iOS APP-15』調色大師 (Random亂數、Slider)

target

練習隨機亂數 (Random) 的程式碼。
練習 Slider 隨數值變動而跟著移動的程式碼。

process

step 1. 版面配置

這次用到大量的物件，所以在大致上編排好版面後，就來慢慢拉 IBOuutlet 吧！

在變數取名方面也需要簡單易懂，方便後面寫程式時，可以更加快速。

    @IBOutlet var redSlider: UISlider!
    @IBOutlet var greenSlider: UISlider!
    @IBOutlet var blueSlider: UISlider!
    @IBOutlet var alphaSlider: UISlider!
    @IBOutlet var radiusSlider: UISlider!
    @IBOutlet var gridentSlider: UISlider!


    @IBOutlet var ironManOutsideImageView: UIImageView!
    @IBOutlet var ironManInsideImageView: UIImageView!
    @IBOutlet var ironManView: UIView!
    
   
    @IBOutlet var redRandomButton: UIButton!
    @IBOutlet var greenRandomButton: UIButton!
    @IBOutlet var blueRandomButton: UIButton!
    @IBOutlet var alphaRandomButton: UIButton!
    @IBOutlet var allRandomButton: UIButton!
    
   
    @IBOutlet var redSliderLabel: UILabel!
    @IBOutlet var greenSliderLabel: UILabel!
    @IBOutlet var blueSliderLabel: UILabel!
    @IBOutlet var alphaSliderLabel: UILabel!
    @IBOutlet var radiusLabel: UILabel!
    @IBOutlet var gridentLabel: UILabel!
    
    
    @IBOutlet var gridentSwitch: UISwitch!

step 2. 設定畫面載入時需顯示的位置、數值

這邊有用 .isHidden 將漸層 Slider 的數值欄隱藏起來。

override func viewDidLoad() {
        super.viewDidLoad()
        
        ironManView.layer.cornerRadius = 40
        ironManOutsideImageView.layer.cornerRadius = 40
        ironManInsideImageView.layer.cornerRadius = 40
        radiusLabel.text = "40"
        ironManInsideImageView.isHidden = true
        gridentSwitch.isOn = false
        gridentSlider.isEnabled = false
        gridentLabel.text = String("0.5")
        gridentLabel.isHidden = true //將漸層數值欄隱藏
        
        let gridentLayer = CAGradientLayer()
        let gridentEffect = round(15 * gridentSlider.value)/15
        gridentLayer.locations = [0.0,NSNumber(value: gridentEffect)]
        gridentLayer.colors = [UIColor.orange.cgColor,UIColor.cyan.cgColor]
        
        redSliderLabel.text = String("127")
        greenSliderLabel.text = String("127")
        blueSliderLabel.text = String("127")
        alphaSliderLabel.text = String("0.5")
       
    }

step 3. 設定多個 IBAction

顏色調整 changeColor、隨機顏色與透明度 SliderRandom

將 4 個控制顏色、透明度的 Slider 都拉到同一個 IBAction 中，這樣才能夠在畫面拉動 Slider 時，將數值回傳至程式，使顏色、透明度改變。

Slider 拉桿動畫由 redSlider.setValue(Float(red), animated: true) 設定。

畫面中相對應的數值欄位由 redSliderLabel.text = String(format: "%.0f",red * 255) 設定，這邊乘上 255 是因為 RGB 顏色 數值範圍皆為 0 ~ 255。（也可以從 Slider 的數值欄設定最大值為 255）

//（上欄位）調整顏色
    @IBAction func chahgeColor(_ sender: Any) {
        ironManOutsideImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))
        
        redSliderLabel.text = String(format: "%.0f",redSlider.value * 255)
        greenSliderLabel.text = String(format: "%.0f", greenSlider.value * 255)
        blueSliderLabel.text = String(format: "%.0f", blueSlider.value * 255)
        alphaSliderLabel.text = String(format: "%.1f", alphaSlider.value)
               
    }

//（上欄位）紅色隨機
    @IBAction func redSliderRandom(_ sender: Any) {
        let red = CGFloat.random(in: 0...1)
        ironManOutsideImageView.backgroundColor = UIColor(red: red, green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))
        redSlider.setValue(Float(red), animated: true)
        redSliderLabel.text = String(format: "%.0f",red * 255)
    }

//（上欄位）綠色隨機
    @IBAction func greenSliderRandom(_ sender: Any) {
        let green = CGFloat.random(in: 0...1)
        ironManOutsideImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: green, blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))
        greenSlider.setValue(Float(green), animated: true)
        greenSliderLabel.text = String(format: "%.0f",green * 255)
    }

 //（上欄位）藍色隨機
    @IBAction func blueSliderRandom(_ sender: Any) {
        let blue = CGFloat.random(in: 0...1)
        ironManOutsideImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: blue, alpha: CGFloat(alphaSlider.value))        
        blueSlider.setValue(Float(blue), animated: true)
        blueSliderLabel.text = String(format: "%.0f",blue * 255)        
    }
    
 //（上欄位）隨機透明度
    @IBAction func alphaSliderRandom(_ sender: Any) {
        let alpha = CGFloat.random(in: 0...1)
        ironManOutsideImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: alpha)        
        alphaSlider.setValue(Float(alpha), animated: true)
        alphaSliderLabel.text = String(format: "%.1f",alpha)
    }

圓角 changeRadius、隨機圓角 radiusSliderRandom、漸層開關 gridentSwitchON、漸層調整 changeGrident

圓角的數值變動由 Slider 回傳，所以使用 radiusSlider.value。

//（下欄位）調整圓角
    @IBAction func changeRadius(_ sender: UISlider) {
        ironManView.clipsToBounds = true
        ironManOutsideImageView.layer.cornerRadius = CGFloat(radiusSlider.value)
        ironManView.layer.cornerRadius = CGFloat(radiusSlider.value)
        radiusLabel.text = String(format: "%.1f",radiusSlider.value)              
    }
    
    
    
  //（下欄位）隨機圓角
    @IBAction func radiusSliderRandom(_ sender: Any) {
        let radius = CGFloat.random(in: 0...80)
        ironManOutsideImageView.layer.cornerRadius = radius
        ironManView.layer.cornerRadius = radius
        radiusLabel.text = String(format: "%.0f",radius)
        radiusSlider.setValue(Float(radius), animated: true)                      
    }

這邊設定如果 (if) 開關開啟 (isOn) 的話，顏色 Slider 、顏色隨機按鈕…等，便不能操作 .isEnabled = false。2 個 ImageView (一個裡面去背、一個外面去背) 也跟著做切換。

如果開關關閉的話，則為 else 的情況，顏色 Slider 、顏色隨機按鈕…等，便可以操作 .isEnabled = true。

//（下欄位）漸層開關切換
    @IBAction func gridentSwitchON(_ sender: Any) {
        if gridentSwitch.isOn{
            gridentSlider.isEnabled = true
            ironManInsideImageView.isHidden = false
            ironManOutsideImageView.isHidden = true
            
            alphaSlider.isEnabled = false
            redSlider.isEnabled = false
            greenSlider.isEnabled = false
            blueSlider.isEnabled = false
            radiusSlider.isEnabled = false
            redRandomButton.isEnabled = false
            greenRandomButton.isEnabled = false
            blueRandomButton.isEnabled = false
            alphaRandomButton.isEnabled = false
            allRandomButton.isEnabled = false
            
            gridentLabel.isHidden = false
                                             
            let gridentLayer = CAGradientLayer()
            let gridentEffect = round(15 * gridentSlider.value)/15
            gridentLayer.colors = [UIColor.orange.cgColor,UIColor.cyan.cgColor]
            gridentLayer.frame = ironManView.bounds
            gridentLayer.cornerRadius = CGFloat(radiusSlider.value)
            gridentLayer.locations = [0.0,NSNumber(value: gridentEffect)]
            ironManView.layer.addSublayer(gridentLayer)
        }
        else{
            gridentSlider.isEnabled = false
            ironManInsideImageView.isHidden = true
            ironManOutsideImageView.isHidden = false
            
            alphaSlider.isEnabled = true
            redSlider.isEnabled = true
            greenSlider.isEnabled = true
            blueSlider.isEnabled = true
            radiusSlider.isEnabled = true
            redRandomButton.isEnabled = true
            greenRandomButton.isEnabled = true
            blueRandomButton.isEnabled = true
            alphaRandomButton.isEnabled = true
            allRandomButton.isEnabled = true
        }
        
    
    }
    
    
 //（下欄位）漸層調整
    @IBAction func changeGrident(_ sender: UISlider) {
            let gridentLayer = CAGradientLayer()
            let gridentEffect = round(15 * gridentSlider.value)/15
            
            gridentLayer.colors = [UIColor.orange.cgColor,UIColor.cyan.cgColor]
            
            gridentLayer.frame = ironManView.bounds
            gridentLayer.cornerRadius = CGFloat(radiusSlider.value)
            gridentLayer.locations = [0.0,NSNumber(value: gridentEffect)]
            ironManView.layer.addSublayer(gridentLayer)
            
            gridentLabel.text = String(format: "%.1f", gridentSlider.value)
    }

全部數值隨機 random

按下下方骰子按鈕後，全部數值都隨機跳動，Slider 也會跟著跑動。

//（下方骰子）全部隨機
    @IBAction func random(_ sender: Any) {
        let red = CGFloat.random(in: 0...1)
        let green = CGFloat.random(in: 0...1)
        let blue = CGFloat.random(in: 0...1)
        let alpha = CGFloat.random(in: 0...1)
        let radius = CGFloat.random(in: 0...80)
        
        ironManOutsideImageView.backgroundColor = UIColor(red: red, green: green, blue: blue, alpha: alpha)
        
        redSlider.setValue(Float(red), animated: true)
        greenSlider.setValue(Float(green), animated: true)
        blueSlider.setValue(Float(blue), animated: true)
        alphaSlider.setValue(Float(alpha), animated: true)
        radiusSlider.setValue(Float(radius), animated: true)
        
        
        redSliderLabel.text = String(format: "%.0f",red * 255)
        greenSliderLabel.text = String(format: "%.0f", green * 255)
        blueSliderLabel.text = String(format: "%.0f", blue * 255)
        alphaSliderLabel.text = String(format: "%.1f", alpha)
        radiusLabel.text = String(format: "%.0f", radius)
                     
    }

後記

因為使用到多個功能與程式，所以花了比想像中的時間還多！！
不過也因為重複練習程式碼，所以也對程式碼的使用更加上手。

之後有時間再回來做『不同區域變色』的進階練習！