iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
0

RGB跟Hex之間的色碼轉換,是我們在選擇顏色時經常會遇到的問題之一。
第一,二天的文章會介紹如何實做一個簡易的RGB跟Hex切換APP,來解決這個小難題。

下圖即是完成後的樣子

https://ithelp.ithome.com.tw/upload/images/20171219/201076942Sur4NQBxo.png

首先在storyboard丟進一個UISegmentedControl作為切換,及四個textField可以輸入RGB及Hex值,一個轉換按鈕button,及顯示結果色的label。

開始程式的部分:

/* 首先用一個enum 來表示RGB切換成Hex及Hex切換成RGB的兩種情況,並丟出一個預設值給var conversion。 */

@IBOutlet weak var redTextField: UITextField!
    @IBOutlet weak var greenTextFiled: UITextField!
    @IBOutlet weak var blueTextField: UITextField!
    @IBOutlet weak var alphaTextField: UITextField!
    @IBOutlet weak var conversionBtn: UIButton!
    @IBOutlet weak var resultLabel: UILabel!
    enum Conversion {
        case RGBtoHex
        case HextoRGB
    }
    var conversion: Conversion = .HextoRGB

/* 接著讓UISegmentedControl成可以切換的模式。並在切換之際,使用TextField.text?.removeAll(),清空TextField裡面的值,以便進行下一次輸入 */

 @IBAction func selectSegemntAction(_ sender: UISegmentedControl) {
       switch sender.selectedSegmentIndex {
       case 0:
           conversion = .HextoRGB
           conversionBtn.setTitle("Convert Hex to RGB", for: .normal)
       case 1:
           conversion = .RGBtoHex
           conversionBtn.setTitle("Convert RGB to Hex", for: .normal)
       default:
           conversion = .HextoRGB
           conversionBtn.setTitle("Convert RGB to Hex", for: .normal)
       }
       print(conversion)
       redTextField.text?.removeAll()
       greenTextFiled.text?.removeAll()
       blueTextField.text?.removeAll()
       alphaTextField.text?.removeAll()
   }
/* 接下來我們怎麼處理HextoRGB及RGBtoHex 兩個模式的切換?在像這樣已經知道enum Conversion裡面的case 數量是有限的時候,switch 就是個很好的選擇 
我們分別給HextoRGB,及RGBtoHex這兩個case裡面執行func convertHexToRGB()及 func convertRGBToHex()。 至於這兩個func 會如何執行Hex跟RGB之間的切換呢? 我們會在稍後定義這兩個func的內容 */
     switch conversion {
       case .HextoRGB:
           self.view.backgroundColor = convertHexToRGB()
       case .RGBtoHex:
           self.view.backgroundColor = convertRGBToHex()
       }

/*但是在這之前,我們必須確保使用在按下convert按鈕之前,者輸入四個TextField的值都是正確的,而非空值,將導致我們的APP壞掉(crush)。
這時候,我們可以先丟出 guard let 這個方法,並將可能發生錯誤的情況(空值)以return的方式處理。
*/

    guard let redText = redTextField.text else { return }
     guard let greenText = greenTextFiled.text else { return }
     guard let blueText = blueTextField.text else { return }
     guard let alphaText = alphaTextField.text else { return }

下一篇
Day 2: RGB跟Hex的color convertor
系列文
Swift 學習目標 -- 30 天送審第一支APP33

1 則留言

1
Howard
iT邦新手 5 級 ‧ 2017-12-20 10:42:38

程式碼區塊可以用三個 ` 包起來

```
這裡是程式碼
```

我要留言

立即登入留言