CALayer 了解與使用

官網文檔：CoreAnimation-CALayer

一、什麼是CALayer

根據CA的字首就可以知道，這個屬于Core Animation的，簡單說就是呈現内容和動畫的層。

二、UIView與CALayer的差別和選擇

UIView：用于管理繪畫層的容器

CALayer：實際具備顯示能力的層，以bitmap儲存的,不具備事件響應能力。

兩者具有互相依賴的關系，每一個UIView至少有一個Layer,而UIView上内容的顯示依靠Layer.

最簡單的差別：UIView具有事件響應能力。

由于CALayer具備更好的性能,資源消耗小，從優化角度，如果隻做顯示可以使用CALayer或其子類，比如隻顯示一張圖檔時，直接添加一張content為目标圖檔的CALayer.

三、CALayer及其子類

CALayer提供一些特殊的子類layer

CALayer及其子類

最好的Layer使用執行個體：https://github.com/scotteg/LayerPlayer 

四、執行個體練習

使用CALayer顯示圖像，使用CATextLayer顯示文本

效果圖如下：

如果使用UIView層級關系，建立一個UIImageView對象和UILabel對象完成布局就可以了。

如果使用CALayer和CATextLayer,如下代碼所示。

CALayer添加方式：

/// 通過layer 和 textLayer 添加圖檔和文字層
    func addImageTitleLayer(to view:UIView) -> Void {
        
        let groupImg = UIImage(named: "icon_group")
        let layer  = CALayer() //隻适合填充Image.cgImage(相當于UIImageView) 顔色 或者自定義繪制的
        layer.frame = CGRect(x: (100-16)/2, y: 10, width: 16, height: 16)
        layer.contents =   groupImg?.cgImage
        layer.contentsScale = UIScreen.main.scale  // 避免圖檔模糊
        
        let text = CATextLayer()  //主要填充文字 相當于UILabel
        text.contents = groupImg?.cgImage
        text.string = "群組"
        text.contentsScale = UIScreen.main.scale // 避免文字模糊
        // 設定字型,與UILabel不一樣
        let uiFont = UIFont.systemFont(ofSize: 12)
        layer.font = CGFont(uiFont.fontName as CFString)  // 這裡設定的是字型名字
        text.fontSize = 12    //設定字型大小
        text.foregroundColor = UIColor.black.cgColor
        text.alignmentMode = kCAAlignmentCenter //對齊方式
        text.frame = CGRect(x: 35, y: 30, width: 30, height: 30)
        //将圖層添加到目标View上
        view.layer.addSublayer(layer)
        view.layer.addSublayer(text)
        
    }
           

重點：

1. 使用Layer需要設定contentScale，這樣内容才會根據不同螢幕适配，避免模糊問題。

2. 使用CALayer設定字型，需要分兩步。設定字型名字和字型大小。

利用CAShapeLayer繪制虛線

效果圖：

/// 繪制虛線
    func createDashLineLayer(width:CGFloat,color:UIColor = UIColor.black, dash:Array<Int>=[8,4]) -> CALayer {
        let lineLayer = CAShapeLayer()
        lineLayer.bounds = CGRect(x: 0, y: 0, width: width, height: 1)
        lineLayer.position = CGPoint(x: 50, y: 99)  //中心點
        lineLayer.strokeColor = color.cgColor // 路徑顔色
        lineLayer.lineWidth = 1
        lineLayer.lineJoin = kCALineJoinRound
        lineLayer.lineDashPattern = dash as [NSNumber]  //這個數組表示 先繪制前一個數字個點，再空白後面數字個點，然後重複繪制
        
        //設定路徑
        let path = CGMutablePath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: width, y: 0))
        //将路徑添加到layar上
        lineLayer.path = path
        return lineLayer
    }
           

關于DashPattern數組說明：會按照數組順序先繪制在留白再繪制的方式進行，然後重複。

比如：假設填充顔色為黑色

[8,4] 先繪制8個點，留白4個點 依次重複。

[8,4,1]  8黑、4白、1黑、8白、4黑、1白 依次

[8,4,20,10] 8黑、4白、20黑、10白 依次

同樣的也可以繪制圓邊的虛線。

部落格參考：CALayer繪制

CALayer 自定義layer

CALayer屬性詳解及動畫使用