#7–紙娃娃x 調色大師App

呈現畫面：

使用元件包含：

IImageView

Page control

Label

Button

Slider

ScrollView

View

畫面架構主要分為：

• 上半部：準備ImageView去背圖片當背景，設定view的backgroundColor加入可條漸層顏色。
• 中間：可切換下半部各個View的Button。
• 下半部：放各個身體部位換裝的Button（我這裡是設定Button的background放入Image），使用可左右捲動的Scroll View當底。

上半部大部分單純是用UIImageView拼湊，再拉好Outlet命名。

中間部分則是在新增一個View裡面擺可以切換下半部各個View的Button，並在各個Button設定好Tag，再全部拉到同一個Action。

@IBAction func showAllButton(_ sender: UIButton) {
        switch sender.tag{
        case 0 :
            bodyView.isHidden = false
            headView.isHidden = true
            faceView.isHidden = true
            beardView.isHidden = true
            glassesView.isHidden = true
            colorView.isHidden = true
        case 1 :
            bodyView.isHidden = true
            headView.isHidden = false
            faceView.isHidden = true
            beardView.isHidden = true
            glassesView.isHidden = true
            colorView.isHidden = true
        case 2 :
            bodyView.isHidden = true
            headView.isHidden = true
            faceView.isHidden = false
            beardView.isHidden = true
            glassesView.isHidden = true
            colorView.isHidden = true
        case 3 :
            bodyView.isHidden = true
            headView.isHidden = true
            faceView.isHidden = true
            beardView.isHidden = false
            glassesView.isHidden = true
            colorView.isHidden = true
        case 4 :
            bodyView.isHidden = true
            headView.isHidden = true
            faceView.isHidden = true
            beardView.isHidden = true
            glassesView.isHidden = false
            colorView.isHidden = true
        case 5 :
            bodyView.isHidden = true
            headView.isHidden = true
            faceView.isHidden = true
            beardView.isHidden = true
            glassesView.isHidden = true
            colorView.isHidden = false
        default:
            break
        }
    }

下半部的View最耗時間，因為要將所有View佈置好Button的圖案，再把同一類型得部位拉到同一個Action，以下用身體舉例。

@IBAction func bodyButton(_ sender: UIButton) {
        showBodyImage.image = sender.currentBackgroundImage
    }

（由於我鬍子、眼鏡的View裡面設定可以不選擇的選項，所以我將不選則的兩個Button一樣設Tag並特別拉額外的Action）

//眼鏡、鬍子不選設定
    @IBAction func nilButton(_ sender: UIButton) {
        if sender.tag == 0{
            showBeardImage.image = nil
        }else{
            showGlassesImage.image = nil
        }
    }

接下來就是背景漸層設定，使用Slider搭配CAGradientLayer，先在function外定義以下變數，方便在各function內使用。

其實畫面中還有兩個用來顯示顏色圓型View，只是是白色所以看不到。

自行改變所有背景顏色的Action

//自行更改背景顏色
    @IBAction func changeBgColor(_ sender: UISlider) {
        color1 = UIColor(red: CGFloat(redslider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))
        color2 = UIColor(red: CGFloat(redSlider2.value), green: CGFloat(greenSlider2.value), blue: CGFloat(blueSlider2.value), alpha: CGFloat(alphaSlider2.value))
        gradientLayer.frame = view.frame
        gradientLayer.colors = [color1.cgColor,color2.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        view.layer.insertSublayer(gradientLayer, at: 0)
        RgbColorView.backgroundColor = color1
        RgbColorView2.backgroundColor = color2
    }

隨機改變角色、背景畫面的Action

//隨機角色、背景
    @IBAction func randomCharacter(_ sender: UIButton) {
        showBodyImage.image = UIImage(named: "body\(Int.random(in: 0...18))")
        showFaceImage.image = UIImage(named: "face\(Int.random(in: 0...18))")
        showGlassesImage.image = UIImage(named: "Glasses\(Int.random(in: 0...8))")
        showHeadImage.image = UIImage(named: "head\(Int.random(in: 0...18))")
        showBeardImage.image = UIImage(named: "beard\(Int.random(in: 0...18))")
        backGroundImage.image = UIImage(named: "game\(Int.random(in: 0...3))")
    }

隨機背景顏色的Action

//隨機背景顏色
    @IBAction func randomColorbutton(_ sender: UIButton) {
        red1 = Float.random(in: 1...255)/255
        green1 = Float.random(in: 1...255)/255
        blue1 = Float.random(in: 1...255)/255
        alpha1 = Float.random(in: 1...255)/255
        red2 = Float.random(in: 1...255)/255
        green2 = Float.random(in: 1...255)/255
        blue2 = Float.random(in: 1...255)/255
        alpha2 = Float.random(in: 1...255)/255
        color1 = UIColor(red: CGFloat(red1), green: CGFloat(green1), blue: CGFloat(blue1), alpha: CGFloat(alpha1))
        color2 = UIColor(red: CGFloat(red2), green: CGFloat(green2), blue: CGFloat(blue2), alpha: CGFloat(alpha2))
        gradientLayer.frame = view.frame
        gradientLayer.colors = [color1.cgColor,color2.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        view.layer.insertSublayer(gradientLayer, at: 0)
        RgbColorView.backgroundColor = color1
        RgbColorView2.backgroundColor = color2
        redslider.value = red1
        greenSlider.value = green1
        blueSlider.value = blue1
        alphaSlider.value = alpha1
        redSlider2.value = red2
        greenSlider2.value = green2
        blueSlider2.value = blue2
        alphaSlider2.value = alpha2
    }

點選clear消除全部背景顏色的Action

//clear背景顏色
    @IBAction func clearColorButton(_ sender: UIButton) {
        RgbColorView.backgroundColor = .white
        RgbColorView2.backgroundColor = .white
        gradientLayer.removeFromSuperlayer()
        redslider.value = 1
        greenSlider.value = 1
        blueSlider.value = 1
        alphaSlider.value = 1
        redSlider2.value = 1
        greenSlider2.value = 1
        blueSlider2.value = 1
        alphaSlider2.value = 1
    }

.removeFromSuperlayer() （移除漸層）

參考資料：

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

#105 使用 Open Peeps 圖庫開發紙娃娃 App

利用 CAGradientLayer 製作漸層背景

#32 紙娃娃App x 調色大師

GitHub網址：

GitHub - casper41807/paperDoll