利用 CAGradientLayer 製作漸層
開發 iOS App 時，我們時常希望畫面上出現美麗的漸層。(或是偉大的美術設計師希望) 製作漸層有很多方法，其中最簡單的莫過於利用 CAGradientLayer。
製作漸層畫面
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
說明
let gradientLayer = CAGradientLayer()建立專長顯示漸層顏色的 CAGradientLayer 物件。
gradientLayer.frame = gradientView.bounds設定漸層 layer 的大小和位置。因為我們要將它加到 gradientView 上，希望它完全佔滿 gradientView，所以將 layer 的 frame 設為 gradientView.bounds。我們一般會讀取 bounds 取得代表元件大小，座標為 (0, 0) 的長方形框框，關於 bounds & frame 的差別，有興趣的朋友可另外查詢它們的差異。
gradientLayer.colors = [UIColor.orange.cgColor, UIColor.blue.cgColor]設定漸層的顏色。colors 的型別是 [Any]，表示它是 array，因此我們可在 array 裡加入多個顏色，十個也不是問題。雖然 array 的型別是 [Any]，但其實 array 裡的東西必須是 CGColor，因此我們利用 UIColor 的屬性 cgColor 取得 CGColor 型別的顏色。
產生 CGColor 有很多方法，有興趣的可參考以下連結。
gradientView.layer.addSublayer(gradientLayer)利用 gradientView.layer 的 addSublayer 加入 gradientLayer。因為 gradientLayer 是 layer，所以必須用 addSublayer 加入，不能用 addSubview。
結果
如下圖所示 ，由於當初 gradientLayer.colors = [UIColor.orange.cgColor, UIColor.blue.cgColor] 設定 array 的成員是橘色和藍色，因此漸層將由上而下，從橘色開始，然後慢慢漸層到藍色。
調整漸層方向
漸層預設的方向為由上而下，只要設定 CAGradientLayer 的 startPoint & endPoint，我們即可自由控制漸層的方向。
想調整漸層的方向，我們必須先了解 CAGradientLayer 的座標系統。
如下圖所示，CAGradientLayer 的左上角座標是 (0,0)，右下角座標是 (1,1)。
因為 CAGradientLayer 預設的 startPoint 是 (0.5, 0.0)，endPoint 是 (0.5, 1.0)，因此漸層的方向為由上而下。
如何變成由左而右呢 ?
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)從 (0, 0.5) 到 (1, 0.5) 即代表由左而右。
從 (0, 0) 到 (1, 1) 可實現從左上往右下的對角線方向。
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)
調整漸層顏色分布的比例
漸層預設是很公平的，CAGradientLayer colors 裡的顏色會平均分配。若是想改變也可以。CAGradientLayer 的屬性 locations (型別為 [NSNumber])可控制每個顏色開始漸層的位置，數字範圍為 0 ~ 1。比方 gradientLayer.locations = [0, 0.5] 表示橘色到藍色的漸層從 0 開始，到 0.5 結束，而 0.5 之後則都是藍色。
為了更了解 locations 的概念，讓我們再多看個例子。比方顏色為橘，藍，橘，locations 設為 [0, 0.3, 1]，此表示橘到藍的漸層從 0 開始，到 0.3 結束，然後藍到橘的漸層從 0.3 開始，到 1 結束。
gradientLayer.colors = [UIColor.orange.cgColor, UIColor.blue.cgColor, UIColor.orange.cgColor]
gradientLayer.locations = [0, 0.3, 1]
在設定 locations 時，有幾個要特別注意的地方:
1. locations 的成員數量應該等於 colors 的顏色數量。
2. locations 裡的成員數字應該要愈來愈大。
製作漸層背景
漸層的圖片和文字
利用 UIView 的 mask，我們還可以做出漸層的圖片和文字。
參考連結
