⑩「擁抱多彩台灣 」自創獨特T-shirt — Random Color (1)

初步構想

VividHue 主打「擁抱多彩台灣」，每個人都可以挑選自己喜歡的顏色、尺寸和款式。設計主要利用 Taiwan Icon Font 進行 UI 設計構圖，並結合 Canvas 推出 Mockup 模特兒造型，打造一款衣服訂購 App。

APP 架構

任務一：Random 功能，結合 Slider 自訂顏色功能（本篇重點）
任務二： UIStepper 和數字Int 變字串 String 練習
任務三： 登入系統、驗證 
任務四： 透過json 匯入圖片資料

本篇重點 — Random Color

📍Xcode 拉線步驟
📍@IBOutlet & @IBAction
📍UISlider & Colors & Random Button
📍Float.random(in: 0…1) & CGFloat(型別問題)

T-Shirt / LOGO 設計

1. 造型: 台灣珍奶（款式一）和台灣地圖（款式二）
2. 文字：使用法文Je suis taïwanais(e) 和荷蘭文Ik ben Taiwanees
3. 利用Canvas 提供T-shirt Mockup 功能
4. 利用Brandmark Logo Make 製作商標

Canvas 可以進行不同底色修改

Canvas 提供Mockup 功能

利用Brandmark Logo Maker製作商標

Xcode 拉Segue

1. Tab Bar Controller 放置於開頭
2. Navigation Controller (前面) ＋ View Controller （後面）
3. 變換tabbar顏色可以選則Image Tint
4. 注意：Tab Bar Controller 和 Navigation Controller （利用View Controller連接）、View Controller 和 View Controller（利用Show 連接）

Tab Bar Controller 放置於開頭

Navigation Controller (前面) ＋ View Controller （後面）

變換tabbar顏色使用Image Tint

右下角：Navigation Controller 按下後，前面會跑出Navigation Controller

出現Navigation Bar 後，再利用View Controller 進行連接Tab Bar Controller

如何透明化圖片

1. 將想要變色的圖片，照片後製成透明
2. 選擇利用Hide Markup Toolbar 編輯圖片
3. 點選想要改變顏色的地方，出現紅色表示成功選取，再來按下Enter 變成灰色後，表示成功挖空成透明色

IBOutlet ( UI Slider )

1. 拉線建立IBOutlet ，之後可以變更圖片

2. 建立五種Slider: 紅色(red)、綠色(green)、藍色(blue)、透明度(alpha)、隨機按鈕(random)

@IBOutlet weak var ImageColor1: UIImageView!
@IBOutlet weak var redSlider: UISlider!
@IBOutlet weak var greenSlider: UISlider!
@IBOutlet weak var blueSlider: UISlider!
@IBOutlet weak var alphaSlider: UISlider!
@IBOutlet weak var random: UIButton!

3. 隱藏Slider 到按鈕後面，且將Random 覆蓋其上方

4. 若不確定是否拉線成功，可以點選右方進行檢查

IBAction 開始執行

1. 四個Slider 連到同一條IBAction — changeColor
2. 圖片拉IBOutlet，function 裡面加入backgroundColor = UIColor

@IBOutlet weak var ImageColor1: UIImageView!


@IBAction func changeColor(_ sender: Any) {
    ImageColor1.backgroundColor = UIColor(cgColor: 
    CGColor(red: CGFloat(redSlider.value), 
            green: CGFloat(greenSlider.value), 
            blue: CGFloat(blueSlider.value), 
            alpha: CGFloat(alphaSlider.value)))
    }

 // 註解：CGFloat 寫法解決redSlider.value(float)型別不一問題，snippet 打入cgred

3. 加入random 按鈕，float. random (in: 0…1 ) 表示顏色透明度變化

  // 隨機改變圖片顏色
    
    @IBAction func randomColor(_ sender: Any) {
        
        // 隨機產生顏色
        
        redSlider.value = Float.random(in: 0...1)
        greenSlider.value = Float.random(in: 0...1)
        blueSlider.value = Float.random(in: 0...1)
        alphaSlider.value = Float.random(in: 0...1)
        
        // 改變圖片
        ImageColor1.backgroundColor = UIColor
        (cgColor: CGColor(red: CGFloat(redSlider.value), 
        green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), 
        alpha: CGFloat(alphaSlider.value)))
        
    } 

4. slider 加入動畫效果

 //動畫效果
        redSlider.setValue(.random(in: 0...1), animated: true)

5. 簡化版 — 利用refactor(Extract to Method) 整理程式碼

 // Before

@IBAction func changeColor(_ sender: Any) {
        ImageColor1.backgroundColor = UIColor
        (cgColor: CGColor(red: CGFloat(redSlider.value), 
        green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), 
        alpha: CGFloat(alphaSlider.value)))
    }

// After

    fileprivate func extractedFunc() {
        ImageColor1.backgroundColor = UIColor(cgColor: CGColor
        (red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), 
        blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value)))
    }
    
    @IBAction func changeColor(_ sender: Any) {
        extractedFunc()
    }

作品展示

GitHub

GitHub - ccwj1970/VividHue-T-Shirt-Online-Shopping