我們今天繼續來寫調色盤的程式。

滑桿連動顏色

首先，我們寫一個方法 SliderSum：
只要滑桿的數值改變，就會即時更新顏色顯示區塊 vRGB。

// 連動滑桿與顏色
    @IBAction func SliderSum(_ sender: Any) {
        vRGB.backgroundColor = UIColor(
            red: CGFloat((sldRedValue.value)/255),
            green: CGFloat((sldGreenValue.value)/255),
            blue: CGFloat((sldBlueValue.value)/255),
            alpha: 1
        )
    }

Tips：RGB 的值範圍是 0~1，但我們滑桿是 0~255，所以記得除以 255 轉換。

滑桿 ➜ 文字欄位

當滑桿改變時，我們希望對應的 UITextField 也跟著更新，
這樣使用者可以即時看到目前的數值。

// 滑桿變動時，同步更新文字欄位並顯示顏色
    @IBAction func SliderToText(_ sender: UISlider) {
            
        txfRedText.text = "\(Int(sldRedValue.value))"
        txfGreenText.text = "\(Int(sldGreenValue.value))"
        txfBlueText.text = "\(Int(sldBlueValue.value))"

        SliderSum(sender)
    }

Tips：這裡使用 Int() 轉型，將滑桿的浮點數轉成整數顯示。

文字欄位 ➜ 滑桿

如果使用者直接輸入數值，我們也要更新對應的滑桿，並限制數值範圍在 0~255。
這裡的重點有三個：

• 檢查是否能成功轉成 Int。
• 若超過範圍，自動修正。
• 失敗時，設為 0。

// 文字欄位輸入時，同步更新滑桿並修正範圍，最後顯示顏色
    @IBAction func TextToSlider(_ sender: UITextField) {
        
        // Red
        if let redStringValue = txfRedText.text {
            
            if let redIntValue = Int(redStringValue) {
                
                let redValue = max(0, min(255,redIntValue)) // 限制在 0~255
                sldRedValue.setValue(Float(redValue), animated: true)
                txfRedText.text = "\(redValue)"
                
            } else {
                sldRedValue.setValue(0, animated: true)
                txfRedText.text = "0"
            }
            
        } else {
            sldRedValue.setValue(0, animated: true)
        }
        
        // Green
        if let greenStringValue = txfGreenText.text {
            
            if let greenIntValue = Int(greenStringValue) {
                
                let greenValue = max(0, min(255,greenIntValue))
                sldGreenValue.setValue(Float(greenValue), animated: true)
                txfGreenText.text = "\(greenValue)"
                
            } else {
                sldGreenValue.setValue(0, animated: true)
                txfGreenText.text = "0"
            }
            
        } else {
            sldGreenValue.setValue(0, animated: true)
        }
        
        // Blue
        if let blueStringValue = txfBlueText.text {
            
            if let blueIntValue = Int(blueStringValue) {
                let blueValue = max(0, min(255,blueIntValue))
                sldBlueValue.setValue(Float(blueValue), animated: true)
                txfBlueText.text = "\(blueValue)"
                
            } else {
                sldBlueValue.setValue(0, animated: true)
                txfBlueText.text = "0"
            }
            
        } else {
            sldBlueValue.setValue(0, animated: true)
        }
        
        SliderSum(sender) // 最後更新顏色
    }

Tips：max(0, min(255, value)) 是數值夾取的技巧，可有效避免超過範圍。

鍵盤 Return 收起

輸入完畢後，按下鍵盤的 Return 鍵要自動收起鍵盤，並套用輸入的值。

// 處理鍵盤 return，收回鍵盤並更新顏色
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        
        textField.resignFirstResponder()
        
        TextToSlider(textField)
        return true
    }

Tips: 要讓這段程式生效，別忘了在 viewDidLoad() 中設定 delegate：

// MARK: - LifeCycle

    override func viewDidLoad() {
        super.viewDidLoad ( )
        // 設定文字欄位代理，方便處理鍵盤事件
        txfRedText.delegate = self
        txfGreenText.delegate = self
        txfBlueText.delegate = self
    }

結語

這樣我們就能讓他動起來了喔，透過這次的練習，學會了如何讓滑桿 UISlider 與文字欄位 UITextField 互相同步，並且即時反映在顏色顯示區塊上。

你也學會了如何處理數值範圍、資料型別轉換、還有如何讓鍵盤操作更順暢。