iOS 開發教學 - 暸解 CALayer 1/2 ( iOS Development - An introduction to CALayer Part 1)

我們之前利用了兩個篇幅介紹了 Storyboard，現在可以更進一步深入 iOS 開發。在這篇文章中我想先介紹 CALayer，為什麼呢？因為在 iOS 開發中常常會使用到許多不同的 View，而每一個 View 都是藉由 CALayer ( 或稱 Layer ) 來處理視覺上的效果與內容，所以先認識 CALayer 會幫助之後的開發工作。最後，本篇文章是基於 Swift 4 的環境下進行。

什麼是 CALayer

根據官方的文件，我們從字面上可以了解 CALayer ( 或稱 Layer ) 是一個物件，它專門負責管理圖像內容，而且你可以透過它來呈現特殊的視覺效果。換句話說，Layer 提供了比較簡單的方式滿足開發者對於 Graphics 相關的需求，所以開發者不需要自己去操作底層。更白話一點來說，我們可以透過 Layer 來設定圖形內容、大小、位置或者是特殊的動畫效果等等。而 UIView ( 或稱 View ) 其實也只是一個包著 Layer 的物件，因此我們使用 View 的時候其實是透過 Layer 幫我們處理視覺上的效果，而其他的部分則由 View 自己來處理。所以你也可以理解成 View 表面上是負責處理所有事情，而實際上它將所有圖形、視覺上的任務轉交給 Layer 處理。

---

如何使用 Layer

如同上一段所說，Layer 主要是負責圖像、視覺上的處理。所以，我將透過幾個簡單的例子來示範怎麼使用 Layer。首先，新增一個 Single View App，然後新增一個 View 到畫面中。首先，我們來設定背景顏色與外框顏色：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var demoView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // 設定 Layer 背景顏色
        demoView.layer.backgroundColor = UIColor.yellow.cgColor
        // 設定 Layer 邊框的寬度
        demoView.layer.borderWidth = 6.0
        // 設定 Layer 邊框的顏色
        demoView.layer.borderColor = UIColor.gray.cgColor
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

若按照上面範例所做，你的畫面看起來會像這樣：

接下來繼續設定 Layer 其他的屬性，我們來嘗試將 View 的邊框變成圓角的形狀：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var demoView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // 設定 Layer 背景顏色
        demoView.layer.backgroundColor = UIColor.yellow.cgColor
        // 設定 Layer 邊框的寬度
        demoView.layer.borderWidth = 6.0
        // 設定 Layer 邊框的顏色
        demoView.layer.borderColor = UIColor.gray.cgColor
        // 設定 Layer 邊框圓角的彎度
        demoView.layer.cornerRadius = 20
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

加入圓角的設定後，你的畫面應該看起來像這樣：

以上的兩個範例只是讓你稍微對 Layer 的控制有一個簡單的認識，你可以透過它設定透明度、加入圖片甚至是加上陰影。但是它的用途不僅僅如此，我們還可以利用Layer 做更多特別的效果。我將在接下來的文章中介紹更多關於 Layer 的用法，繼續閱讀 iOS 開發教學 - 暸解 CALayer 2/2。

---

Environment :
  ・ macOS
  ・ Swift 4