iOS 新手筆記：漸層色圖層CAGradientLayer

選擇漸層顏色，控制漸層方向、範圍以及位置

最近很夯漸層口罩的顏色：獨角獸粉藍

property

• 顏色 colors ：漸層顏色的array，顏色以CGColor

gradientLayer.colors = [UIColor.red.cgColor,UIColor.yellow.cgColor]

• 方向和範圍 startPoint endPoint ：以起始點至終點線性漸層，以layer的bounds長寬作為單位範圍。

// 漸層方向和範圍
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)

以layer的bounds長寬作為單位範圍

漸層方向

漸層範圍

• 位置 locations ：漸層的位置範圍
  梯度介於0~1且值愈來愈大，array成員個數和漸層顏色數量相同。

示範

• 顏色漸層由上至下、由紅至黃再由黃至紅
• 2/10～4/10：由紅至黃漸層
• 6/10～8/10：由黃至紅漸層

gradientLayer.colors = [UIColor.red.cgColor,UIColor.yellow.cgColor,UIColor.yellow.cgColor,UIColor.red.cgColor]
gradientLayer.locations = [0.2,0.4,0.6,0.8]

漸層位置設定0.2、0.4、0.6、0.8

示範：漸層口罩的顏色【獨角獸粉藍】

// 以下程式碼加在viewDidLoad的function裡
// 宣告漸層色圖層物件
let gradientLayer = CAGradientLayer()
gradientLayer.frame = CGRect(x: view.center.x-166, y: view.center.y/2-100, width: 328, height: 190)
// 漸層顏色
gradientLayer.colors = [UIColor(red: 249/255, green: 212/255, blue: 220/255, alpha: 1).cgColor,UIColor(red: 220/255, green: 215/255, blue: 228/255, alpha: 1).cgColor,UIColor(red: 203/255, green: 226/255, blue: 236/255, alpha: 1).cgColor,UIColor(red: 200/255, green: 222/255, blue: 215/255, alpha: 1).cgColor]
        
// 漸層方向和範圍
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 0, y: 1)
        
// 漸層梯度位置: 梯度介於0~1，array成員個數和漸層顏色數量相同
gradientLayer.locations = [0.2,0.4,0.6,0.8]
// 加入漸層色子圖層至view上
view.layer.addSublayer(gradientLayer)