調色大師 — 我不要黑心史奴比

最近莫名的喜歡史奴比

還上了蝦皮買了一堆史奴比手機殼😂

所以這次作業就決定是你了

利用之前課堂上教的，做了一張去背的史奴比圖

使用元件

Slider,Switch,Label,imageView

使用技巧

IBOulet,IBAction,CAGradientLayer 製作漸層,Random隨機配色,if/else判斷

做一個基本的Slider調色很簡單

但當你加了一堆有的沒的

隨機配色、漸層、背景圖啊…

再加上一堆 if 判斷 switch開關就會搞得很混亂

其實這隻app還有一些小bug，正在努力把他抓出來除掉😅

（謎之音：可以做一個重置的按鈕出來啊笨蛋）

程式碼如下

import UIKit
class ViewController: UIViewController {
@IBOutlet weak var snoopy: UIImageView!
@IBOutlet weak var sky: UIImageView!
@IBOutlet weak var redcolor: UISlider!
@IBOutlet weak var greencolor: UISlider!
@IBOutlet weak var bluecolor: UISlider!
@IBOutlet weak var alpha: UISlider!
@IBOutlet weak var redlabel: UILabel!
@IBOutlet weak var greenlabel: UILabel!
@IBOutlet weak var bluelanel: UILabel!
@IBOutlet weak var alphalabel: UILabel!
@IBOutlet weak var RedSwitch: UISwitch!
@IBOutlet weak var GreenSwitch: UISwitch!
@IBOutlet weak var BlueSwitch: UISwitch!
@IBOutlet weak var RandomColor: UIButton!
@IBOutlet weak var graydientview: UIImageView!
@IBOutlet weak var graySwitch: UISwitch!
//上面是變數--outlet
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
//下面是功能--action
//Slider滑動調整顏色&Label顯示目前數值
@IBAction func coloradjust(_ sender: Any) {
snoopy.backgroundColor = UIColor(red: CGFloat(redcolor.value), green: CGFloat(greencolor.value), blue: CGFloat(bluecolor.value), alpha: CGFloat(alpha.value))
//label顯示slider的值，"％.2f"為小數點後兩位
redlabel.text=String(format: "%.2f",redcolor.value)
greenlabel.text=String(format:"%.2f",greencolor.value)
bluelanel.text=String(format:"%.2f",bluecolor.value)
alphalabel.text=String(format:"%.2f",alpha.value)
}
//Switch開關控制
@IBAction func SwitchColor(_ sender: UISwitch) {
//如果紅綠藍其中一個Switch打開，則亂數按鈕不能按
if RedSwitch.isOn || GreenSwitch.isOn || BlueSwitch.isOn{
RandomColor.isEnabled=false
//如果Switch打開，則Slider不能滑動
if RedSwitch.isOn{
redcolor.isEnabled=false
}else{
redcolor.isEnabled=true
}
if GreenSwitch.isOn{
greencolor.isEnabled=false
}else{
greencolor.isEnabled=true
}
if BlueSwitch.isOn{
bluecolor.isEnabled=false
}else{
bluecolor.isEnabled=true
}
}else{
RandomColor.isEnabled=true
}
}
//RandomColor 亂數產生顏色
@IBAction func Random(_ sender: UIButton) {
let red = Double.random(in: 0...1)
let green = Double.random(in: 0...1)
let blue = Double.random(in: 0...1)
let alpha = 1
snoopy.backgroundColor=UIColor(red: CGFloat(red), green: CGFloat(green), blue: CGFloat(blue), alpha: CGFloat(alpha))
redlabel.text=String(format: "%.2f",red)
greenlabel.text=String(format: "%.2f",green)
bluelanel.text=String(format: "%.2f",blue)
alphalabel.text=String(alpha)
redcolor.value = Float(red)
greencolor.value = Float(green)
bluecolor.value = Float(blue)
}
//漸層開關
@IBAction func graydientSwitch(_ sender: UISwitch) {
let Layer = CAGradientLayer()
if graySwitch.isOn{
redcolor.isEnabled=false
greencolor.isEnabled=false
bluecolor.isEnabled=false
alpha.isEnabled=false
RandomColor.isEnabled=false
snoopy.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0)
sky.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0)
Layer.frame = graydientview.bounds
Layer.colors = [UIColor.orange.cgColor, UIColor.blue.cgColor]
Layer.startPoint = CGPoint(x: 0, y: 0)
Layer.endPoint = CGPoint(x: 1, y: 1)
graydientview.layer.addSublayer(Layer)
}
else{
redcolor.isEnabled=true
greencolor.isEnabled=true
bluecolor.isEnabled=true
alpha.isEnabled=true
RandomColor.isEnabled=true
snoopy.backgroundColor = UIColor(red: CGFloat(redcolor.value), green: CGFloat(greencolor.value), blue: CGFloat(bluecolor.value), alpha: CGFloat(alpha.value))
//label顯示slider的值，"％.2f"為小數點後兩位
redlabel.text=String(format: "%.2f",redcolor.value)
greenlabel.text=String(format:"%.2f",greencolor.value)
bluelanel.text=String(format:"%.2f",bluecolor.value)
alphalabel.text=String(format:"%.2f",alpha.value)
Layer.frame = graydientview.bounds
Layer.colors = [UIColor(displayP3Red: 0, green: 0, blue: 0, alpha: 0).cgColor,UIColor(displayP3Red: 0, green: 0, blue: 0, alpha: 0).cgColor]
graydientview.layer.addSublayer(Layer)
}
}
}

參考文章如下～

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

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

利用 CAGradientLayer 製作漸層

[study#8-2] 調色大師-聖誕美甲選色

#13 莫莉

#13 調色大師：維尼穿花襯衫也好看

Github

linmin927/snoopy_color