CALayer.mask平常可能用不太到,但是在UI設計時有時可以做出許多特殊的效果,如TKCalendarView中翻頁時將view的部分遮擋住以顯示後方的view。

CALayer.mask是使用maskLayer的alpha channel來做遮罩,也就是maskLayer alphe = 1的地方顯示,alpha = 0的地方則不顯示。

下方是將imageView做出一個圓形遮罩的範例

let imageView = UIImageView(image: UIImage(named: "cat"))
let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(ovalIn: imageView.bounds.insetBy(dx: 20, dy: 20)).cgPath
imageView.layer.mask = maskLayer
view.addSubview(imageView)

個人使用時多半是使用幾何形狀作為遮罩,所以使用CAShpapeLayer賦予需要遮罩範圍的path來達到想要的效果。 以下是更多的範例

圓角

let path = UIBezierPath(roundedRect: imageView.bounds, cornerRadius: 20)
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
imageView.layer.mask = maskLayer

甜甜圈

let path = UIBezierPath(ovalIn: imageView.bounds)
let path2 = UIBezierPath(ovalIn: imageView.bounds.insetBy(dx: 50, dy: 50))
path.append(path2)
path.usesEvenOddFillRule = true
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
maskLayer.fillRule = kCAFillRuleEvenOdd
imageView.layer.mask = maskLayer

圖片

當然也不一定需要使用CAShapeLayer,也可以使用image來做遮罩

let maskLayer = CALayer()
maskLayer.contents =  UIImage(named: "noCat").cgImage
maskLayer.frame = imageView.bounds
imageView.layer.mask = maskLayer

Alpha channel

上面有提到是使用alpha channel做遮罩,所以當然也可以做出半透明的

let maskLayer = CALayer()
maskLayer.contents =  UIImage(named: "lineMask").cgImage
maskLayer.frame = imageView.bounds
imageView.layer.mask = maskLayer

下載Playground

Download


powhu

iOS developer who loves design