#8 ㄇㄚˊ幾兔 調色盤＆漸層調色

Peter 出的作業量，讓我的表情跟ㄇㄚˊ幾兔一樣

別人台上1分鐘，我台下已經懷疑人生

ㄇㄚˊ幾兔 顏色換起來！

1. 圖片準備：去背圖片、遮蔽用圖片、頁面背景圖片、按鈕圖片、AppIcon

ㄇㄚˊ幾圖片出處：ㄇㄚˊ幾 Facebook (@machiko324)

2. 將Red、Green、Blue、Alpha、CornerRadius、BorderWidth Slider共用同個IBAction func

@IBAction func backgroundControlSlider(_ sender: UISlider) {
backgroundSetting(redSlider.value, greenSlider.value, blueSlider.value, alphaSlider.value, cornerRadiusSlider.value, borderWidthSlider.value)
}

3.介紹自己寫的 func backgroundSetting

主要是設定ㄇㄚˊ幾兔顏色、圖片圓角及圖片邊框

3.1 func 參數要丟對應Slider的值

func backgroundSetting(_ red:Float, _ green:Float, _ blue:Float, _ alpha:Float, _ corner:Float, _ border:Float){
redSlider.value = red
greenSlider.value = green
blueSlider.value = blue
alphaSlider.value = alpha
cornerRadiusSlider.value = corner
borderWidthSlider.value = border

3.2 調整 ImageView背景 RGB 三原色＋透明度

//background Color
ShowImageView.backgroundColor = UIColor(red: CGFloat(red/255), green: CGFloat(green/255), blue: CGFloat(blue/255), alpha: CGFloat(alphaSlider.value))

3.3 調整 ImageView邊角＋UIView邊角
因為ImageView是疊在UIView上，所以兩個邊角同時做調整

//corner Radius
ShowImageView.clipsToBounds = true
ShowImageView.layer.cornerRadius = CGFloat(cornerRadiusSlider.value)
ShowUIView.layer.cornerRadius = CGFloat(cornerRadiusSlider.value)

3.4 調整 ImageView 紅色邊框粗細

//border Width
ShowUIView.layer.borderColor = UIColor.systemOrange.cgColor
ShowUIView.layer.borderWidth = CGFloat(borderWidthSlider.value)

3.5 storyborard 同步顯示 Slider 調整的參數

//Label Text
redSliderLabel.text = String(format: "Red : %.2f", red)
greenSliderLabel.text = String(format: "Green : %.2f", green)
blueSliderLabel.text = String(format: "Blue : %.2f", blue)
alPhaSliderLabel.text = String(format: "Alpha : %.2f", alpha)
cornerRadiusSliderLabel.text = String(format: "Corner Radius : %.0f", corner)
borderSliderLabel.text = String(format: "Border Width : %.0f", border)
}

4.介紹自己寫的 func drawMaskImage

我將 let gradientLayer 宣告寫在外面，主要是讓切換 Mode可以使用

4.1 設定漸層layer的大小和位置

func drawMaskImage(){
gradientLayer.frame = ShowUIView.bounds

4.2 設定漸層的顏色

gradientLayer.colors = [
UIColor.red.cgColor,
UIColor.orange.cgColor,
UIColor.yellow.cgColor,
UIColor.green.cgColor,
UIColor.blue.cgColor,
UIColor.purple.cgColor
]   

4.3 調整漸層顏色分布的比例

gradientLayer.locations = [
0,
NSNumber(value:gradientSlider.value*1),
NSNumber(value:gradientSlider.value*2),
NSNumber(value:gradientSlider.value*3),
NSNumber(value:gradientSlider.value*4)
]

4.4 顯示 mask 漸層圖片

ShowUIView 方形漸層圖片之後會被做遮罩

machikoLineImageView 做遮罩用的圖片

看不懂沒關係，只要知道是 將方形漸層圖片切出你想要的形狀

let machikoLineView = UIImage(named: "machikoLine")
let machikoLineImageview = UIImageView(image: machikoLineView)
machikoLineImageview.frame.size = CGSize(width: 300, height: 300)
ShowUIView.mask = machikoLineImageview
ShowUIView.layer.addSublayer(gradientLayer)

補充說明：mask 中文是遮罩的意思，設定 UIView 元件的 mask，我們讓 view 只顯示 mask 裡非透明的區塊，其它部分被遮起來。

左邊是人像圖片, 右邊是瓦納卡孤樹風景

人像圖片：

黑色的地方就是非透明的區塊

黑色以外的地方是透明區塊也是去背區塊

設定瓦納卡孤樹的遮罩(mask)為人像圖片結果：

設定孤樹的遮罩(mask)為人像圖片

4.5 storyborard 同步顯示 Graditent Slider 調整的參數

gradientSliderLabel.text = String(format: "Gradient : %.2f", gradientSlider.value)
}

5. 切換模式 Background Color / Gradient Mask

在不同模式下限制使用者操作

切回 Background Color 模式補充：

因為Background Color用不到 gradientLayer，所以要移除

還要記得復原 ShowUIView mask

gradientLayer.removeFromSuperlayer()

ShowUIView.mask = nil

@IBAction func switchMode(_ sender: Any) {
if gradientSwitch.isOn{
modeLabel.text = "Gradient Mask"
drawMaskImage()
redSlider.isEnabled = false
greenSlider.isEnabled = false
blueSlider.isEnabled = false
alphaSlider.isEnabled = false
cornerRadiusSlider.isEnabled = false
borderWidthSlider.isEnabled = false
gradientSlider.isEnabled = true
}
else {
modeLabel.text = "Backgroud Color"
ShowImageView.image = UIImage(named: "machiko")
redSlider.isEnabled = true
greenSlider.isEnabled = true
blueSlider.isEnabled = true
alphaSlider.isEnabled = true
cornerRadiusSlider.isEnabled = true
borderWidthSlider.isEnabled = true
gradientSlider.isEnabled = false
//reset gradient & mask
gradientLayer.removeFromSuperlayer()
ShowUIView.mask = nil
}

6. 清空按鈕 在不同模式下還原該模式預設值

Background Color : 還原 ㄇㄚˊ幾兔顏色、圖片圓角及圖片邊框

Gradient Mask : 還原 ㄇㄚˊ幾兔漸層色彩

@IBAction func clearButton(_ sender: Any) {
if gradientSwitch.isOn{
gradientSlider.value = 0.2
drawMaskImage()
}
else{
backgroundSetting(255, 255, 255, 1, 0, 0)
}
}

7. 調整 Gradient Mask 用的 Slider

@IBAction func backgroundGradientSlider(_ sender: UISlider) {
drawMaskImage()
}

8. 亂數按鈕 在不同模式下亂數產生調整值

Background Color : 亂數產生 ㄇㄚˊ幾兔顏色、圖片圓角及圖片邊框

Gradient Mask : 亂數產生 ㄇㄚˊ幾兔漸層色彩

@IBAction func randomButton(_ sender: Any) {
if gradientSwitch.isOn{
//let gradientRandom = Float.random(in: 0.0...1)
//gradientSlider.value = gradientRandom
gradientSlider.value = Float.random(in: 0.0...1)
drawMaskImage()
}
else{
let redRandom = Float.random(in: 0...255)
let greenRandom = Float.random(in: 0...255)
let blueRandom = Float.random(in: 0...255)
let alphaRandom = Float.random(in: 0...1)
let cornerRadiusRandom = Float.random(in: 0...150)
let borderWidthRandom = Float.random(in: 0...10)
backgroundSetting(redRandom, greenRandom, blueRandom, alphaRandom, cornerRadiusRandom, borderWidthRandom)
}
}

9. 頁面背景圖片設定

self.view.backgroundColor = UIColor(patternImage: UIImage(imageLiteralResourceName: "machikoBackground"))

GitHub Link:

Marso-Yu/BackgroundColor-Gradient-Mask

參考資料：

iOS SDK 的 frame & bounds

利用 CAGradientLayer 製作漸層

利用 UIView 的 mask 為圖片文字染上美麗的漸層

利用 mask 設計特別形狀的圖片

讓圖片同時有圓角和陰影

#13 調色大師 － 辛普森家庭