利用 CAGradientLayer 製作漸層背景

參考以下連結 CAGradientLayer 的介紹，我們可以為 iOS App 畫面加上美麗的漸層背景。

利用 CAGradientLayer 製作漸層

以下我們分別示範三個例子:

• 將 controller 的整個 view 加上漸層背景。
• 將 table view controller 的整個 table 加上漸層背景。
• 將某個 view 加上漸層背景。

將 controller 的整個 view 加上漸層背景

假設 storyboard 設計的 App 畫面如下:

func setupGradientBackground() {
     let gradientLayer = CAGradientLayer()
     gradientLayer.frame = view.bounds
     gradientLayer.colors = [
        CGColor(srgbRed: 1, green: 0, blue: 0, alpha: 1),
        CGColor(srgbRed: 0, green: 0, blue: 1, alpha: 1)
     ]
     view.layer.insertSublayer(gradientLayer, at: 0)    
}

override func viewDidLoad() {
     super.viewDidLoad()
     setupGradientBackground()        
}

說明

gradientLayer.frame = view.bounds

讓漸層的大小等於 controller view 的大小。

view.layer.insertSublayer(gradientLayer, at: 0)

將漸層的 layer 加在最底層。

要特別注意的，如果使用 addSublayer 加入漸層，它將變成在最上層，覆蓋我們辛苦在 storyboard 設計的畫面。

view.layer.addSublayer(gradientLayer)

將 table view controller 的整個 table 加上漸層背景

新增繼承 UITableViewController 的 GradientTableViewController，將它設為 table view controller 的 class。

class GradientTableViewController: UITableViewController {

    func setupGradientBackground() {
        let backgroundView = UIView()
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [
            CGColor(srgbRed: 1, green: 1, blue: 1, alpha: 1),
            CGColor(srgbRed: 0, green: 0, blue: 1, alpha: 1)
        ]
        gradientLayer.frame = tableView.frame
        backgroundView.layer.addSublayer(gradientLayer)
        tableView.backgroundView = backgroundView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupGradientBackground()
    }
}

說明

let backgroundView = UIView()

產生顯示漸層的 backgroundView。

gradientLayer.frame = tableView.frame
backgroundView.layer.addSublayer(gradientLayer)

將 CAGradientLayer 的大小設成 table view 的大小，然後將 CAGradientLayer 加到 backgroundView.layer。

tableView.backgroundView = backgroundView

將顯示漸層的 backgroundView 設為 tableView 的 backgroundView，讓表格顯示美麗的漸層背景。

將某個 view 加上漸層背景

class DemoView: UIView {
    var gradientLayer: CAGradientLayer!
    override func layoutSubviews() {
        super.layoutSubviews()
        if gradientLayer == nil {
           gradientLayer = CAGradientLayer()
           gradientLayer.colors = [
           CGColor(srgbRed: 1, green: 0, blue: 0, alpha: 1),
           CGColor(srgbRed: 0, green: 0, blue: 1, alpha: 1)
           ]
           layer.insertSublayer(gradientLayer, at: 0)
        }
        gradientLayer.frame = bounds
        
    }
}

考慮到 auto layout，我們在它的 function layoutSubviews 加入漸層。layoutSubviews() 是 UIView 的 function，當它執行時，它會依據 auto layout 的 constraint 排版 subviews。當我們在 function layoutSubviews 的 super.layoutSubviews() 後寫程式時，元件已經依 auto layout 的 constraint 得到位置大小，因此我們用 gradientLayer.frame = bounds 設定漸層的大小。

另外 view 可能動態改變尺寸，比方在 iPhone 直向跟橫向時依 auto layout 條件改變尺寸而呼叫 layoutSubviews，因此我們在裡面做檢查，只在第一次呼叫時產生 CAGradientLayer，之後呼叫時只會修改漸層的尺寸。

範例: