#10–1 調色大師
Published in
8 min readAug 18, 2020
已經學習到怎麼製作漸層和用 UISlider 來調整元件，這次就把兩個項目合併使用。下面是製作漸層的程式：
let gradientView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
let gradientLayer = CAGradientLayer()
gradientLayer.frame = gradientView.bounds
gradientLayer.colors = [UIColor.orange.cgColor, UIColor.blue.cgColor]
gradientView.layer.addSublayer(gradientLayer)
gradientView程式的部分只有兩個地方有進行變更
- 沒有定義 gradientView 尺寸位置
- gradientLayer.colors 的部分必須把 RGBA 數值改成 Slider 的數值
顯示項目的設置
//龍貓的圖片
@IBOutlet weak var totoroImageView: UIImageView!//漸層的圖層
@IBOutlet weak var gradientView: UIView!//漸層上方顏色的Slider：依序為紅、綠、藍、透明度
@IBOutlet weak var topRedSlider: UISlider!@IBOutlet weak var topGreenSlider: UISlider!@IBOutlet weak var topBlueSlider: UISlider!@IBOutlet weak var topAlphaSlider: UISlider!//漸層下方顏色的Slider：依序為紅、綠、藍、透明度
@IBOutlet weak var bottomRedSlider: UISlider!@IBOutlet weak var bottomGreenSlider: UISlider!@IBOutlet weak var bottomBlueSlider: UISlider!@IBOutlet weak var bottomAlphaSlider: UISlider!//控制中間位置的Slider
@IBOutlet weak var gradientMiddleSlider: UISlider!// layer才能製作漸層，view 只能變更 backgroundcolor 而且是單色的
所以還需要定義一個漸層的 layer 出來
let gradientLayer = CAGradientLayer()
手動調整漸層的 function
@IBAction func changeGradientColor(_ sender: UISlider) {gradientLayer.frame = gradientView.bounds//讓所有控制顏色的 Slider 數值填入對應位置
gradientLayer.colors = [CGColor(red: CGFloat(topRedSlider.value), green: CGFloat(topGreenSlider.value),
blue: CGFloat(topBlueSlider.value),
alpha: CGFloat(topAlphaSlider.value)),
CGColor(red: CGFloat(bottomRedSlider.value),
green: CGFloat(bottomGreenSlider.value),
blue: CGFloat(bottomBlueSlider.value),
alpha: CGFloat(bottomAlphaSlider.value))]//gradientMiddleSlider只有調整中間區塊，數值放在中間位置
gradientLayer.locations = [0, NSNumber(value: gradientMiddleSlider.value) , 1]gradientView.layer.addSublayer(gradientLayer)}
亂數調整漸層的 function
將每個 Slider 定義為亂數填入對應位置就可以了
@IBAction func ratioColorChange(_ sender: Any) {//定義亂數
topRedSlider.value = Float.random(in: 0…1)topGreenSlider.value = Float.random(in: 0…1)topBlueSlider.value = Float.random(in: 0…1)topAlphaSlider.value = Float.random(in: 0…1)bottomRedSlider.value = Float.random(in: 0…1)bottomGreenSlider.value = Float.random(in: 0…1)bottomBlueSlider.value = Float.random(in: 0…1)bottomAlphaSlider.value = Float.random(in: 0…1)gradientMiddleSlider.value = Float.random(in: 0…1)//以下就和前一個function 相同
gradientLayer.frame = gradientView.boundsgradientLayer.colors = [CGColor(red: CGFloat(topRedSlider.value), green: CGFloat(topGreenSlider.value), blue: CGFloat(topBlueSlider.value), alpha: CGFloat(topAlphaSlider.value)),CGColor(red: CGFloat(bottomRedSlider.value), green: CGFloat(bottomGreenSlider.value), blue: CGFloat(bottomBlueSlider.value), alpha: CGFloat(bottomAlphaSlider.value))]gradientLayer.locations = [0, NSNumber(value: gradientMiddleSlider.value) , 1]gradientView.layer.addSublayer(gradientLayer)}
增加：圓角和陰影
顯示項目增加設置
//增加一個透明的 view 並把totoroImageView、gradientView包含在裡面
@IBOutlet weak var mainView: UIView!//控制圓角尺寸的UISlider
@IBOutlet weak var cornerRadiusSlider: UISlider!//控制陰影擴散範圍的UISlider
@IBOutlet weak var shadowSlider: UISlider!
圓角
//切掉超出邊界的部分
totoroImageView.clipsToBounds = true//用UISlider來調整圓角的大小
totoroImageView.layer.cornerRadius = CGFloat(cornerRadiusSlider.value)//用UISlider來調整圓角的大小
mainView.layer.cornerRadius = CGFloat(cornerRadiusSlider.value)
寫兩次調整圓角的程式是因為 mainView 用來設定陰影，必須讓mailView和圖片的形狀相同，否則，陰影的形狀就會和圖片合不起來。
陰影
@IBAction func shadowChange(_ sender: UISlider) {//超出邊界的部分不要遮罩：讓陰影不要被切掉
mainView.layer.masksToBounds = false//設定陰影的顏色
mainView.layer.shadowColor = UIColor.darkGray.cgColor//陰影位置
mainView.layer.shadowOffset = CGSize(width: 1, height: 1)//陰影透明度
mainView.layer.shadowOpacity = 0.5//用UISlider控制陰影擴散程度
mainView.layer.shadowRadius = CGFloat(shadowSlider.value)}
- clipsToBounds 是 UIView 的屬性、masksToBounds 是 CALayer 的屬性但用途是一樣的。
- 圓角和陰影應該是可以放在同一個 function 裡的，但是我製作時放在同一個 function 陰影常常無法顯示，所以就拆開了。
