利用 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,我們還可以做出漸層的圖片和文字。
參考連結