iOS基础05—-UIView与CALayer的联系与区别

Posted 2023-02-06 Shayne_win

ios基础05—-UIView与CALayer联系与区别

UIView

所有的视图都是由UIView派生而来，UIView可以处理触摸事件，可以支持Core Graphics绘图，可以做仿射变换(旋转或缩放)，以及简单的滑动和渐变动画。

CALayer

CALayer和UIView一样，最大的不同是CALayer不响应事件。每一个UIView都对应一个CALayer图层属性(但是也可以添加无数个子图层)。实际上CALayer才是真正用来在屏幕上显示和做动画的，UIView只是对它的一个封装，提供了一些处理触摸的功能以及Core Animation底层方法的高级接口。
这样分离功能的原因就是因为OSX上的NSView是用鼠标处理的，这样iOS和MacOS就可以共享CALayer的代码了。

CALayer最常用的地方就是在content上放置寄宿图：
contents: 是Any类型，但是实际上只有CGImage类型才能起效果；它常用的处理contents的属性包括:
contentRect:显示图片的某一部分；
contentGravity:类似于UIImage的contentMode
contentScale:图片的缩放尺寸；
maskToBounds:是否显示超出layer范围的内容
contentsCenter:设置可拉伸区域
cornerRadius:设置圆角
borderWidth:边框宽度
borderColor:边框颜色
shadowRadius:阴影圆角
shadowOpacity:阴影透明数
shadowOffset:阴影size
shadowColor:阴影color
shadowPath:使用CGPath对图层指定阴影形状，可以提高性能

blueLayer = CALayer()

blueLayer.frame = CGRect(x: 50, y: 50, width: 100, height: 100)

blueLayer.backgroundColor = UIColor.blue.cgColor

layerView.layer.addSublayer(blueLayer)

let img = UIImage(named: "BROOK")

blueLayer.contents = img?.cgImage //基本是UIImage类型，其他类型没有效果

blueLayer.contentsRect = CGRect.init(x: 0, y: 0, width: 0.5, height: 0.5) //显示图的某一部分，按坐标来的，1的话就是显示全部

blueLayer.contentsGravity = kCAGravityCenter //类似于UIImage的contentMode

blueLayer.contentsScale = (img?.scale)! //按图片大小缩放

blueLayer.masksToBounds = true // 是否显示超出Layer.frame范围的内容
blueLayer.contentsCenter = CGRect.init(x: 0.25, y: 0.25, width: 0.5, height: 0.5) //它定义了一个图片可拉伸的区域

Custome Drawing:如果不使用图片的话，还可以直接用Core Graphics直接在contents绘制寄宿图，通过继承UIView的drawRect(这个方法容易造成CPU和内存的浪费，莫要轻易使用)方法进行绘制，当视图在屏幕上出现时，drawRect会被调用；手动调用setNeedDisplay方法，drawRect也会被调用。不过drawRect通常在UIView中使用，所以如果要在controller上使用，就可以直接实现CALayerDelegate。

extension CALayerTestController:CALayerDelegate
//事先会先调用draw(_ layer: CALayer），如果没有实现就会找draw(_ layer: CALayer, in ctx: CGContext)函数
    func draw(_ layer: CALayer, in ctx: CGContext) 
       //使用Core Graphics画图,这里会返回图层的Context给你，直接用就好
        ctx.setLineWidth(10)
        ctx.setStrokeColor(UIColor.red.cgColor)
        ctx.strokeEllipse(in: layer.bounds)
    

CALayer虽然不关心任何响应事件，但是它有一系列方法帮你处理事件:contains和hitTest;
contains可以判断一个点是否在layer的frame里面；
hitTest则可以获取到点击事件所在图层：

override func touchesBegan(_ touches: Set, with event: UIEvent?) 

    let point = touches.first?.location(in: self.view)

    //contains

    if self.layerView.layer.contains(point!) 

        if blueLayer.contains(point!) 

            print("contain")

        

    

    //hittest

    let layer = self.layerView.layer.hitTest(point!)

    if layer == blueLayer 

        print("contain")

    

CALayer的锚点anchorPoint可以修改layer的位置:

//这是一个时钟的例子，在xib里让时钟分钟秒钟的center相同，然后对锚点进行调整，使三个图片的一端在同一个地方。

override func viewDidLoad()
super.viewDidLoad()
changeAnchorPoint()

timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(tick), userInfo: nil, repeats: true)

extension CALayerTestController

//修改图片的锚点

func changeAnchorPoint()

self.hour.layer.anchorPoint = CGPoint(x: 0.5, y: 0.9)

self.min.layer.anchorPoint = CGPoint(x: 0.5, y: 0.8)

self.second.layer.anchorPoint = CGPoint(x: 0.1, y: 0.5)

func tick()

//从当前时间拿到时分秒

let calendar = Calendar(identifier: .gregorian)

let components = calendar.dateComponents([.hour,.minute,.second], from: Date())

let hourAngle = (CGFloat(components.hour!)/12.0) * CGFloat(Double.pi * 2.0)

let minAngle = (CGFloat(components.minute!)/12.0) * CGFloat(Double.pi * 2.0)

let secondAngle = (CGFloat(components.second!)/12.0) * CGFloat(Double.pi * 2.0)

//转起来

self.hour.transform = CGAffineTransform(rotationAngle: hourAngle)

self.min.transform = CGAffineTransform(rotationAngle: minAngle)

self.second.transform = CGAffineTransform(rotationAngle: secondAngle)

CALayer的阴影shadow，阴影是根据寄宿图的轮廓来确定的：

layerView.layer.shadowOffset = CGSize(width: 5, height: 5)

    layerView.layer.shadowOpacity = 0.9

    layerView.layer.shadowColor = UIColor.black.cgColor

    layerView.layer.shadowRadius = 0

阴影和视图直接的边界线，为0边界线最明显
但是有一个问题，那就是如果图层需要masksToBounds剪裁，那么阴影就会被剪裁掉。那么要解决这个问题的方法就是用到两个图层：一个画阴影的外图层，一个用masksToBounds剪裁内容的内图层。（其实就是在需要阴影的view下面插入一个view，然后对其阴影进行设置，这样在视觉效果上就是一样的了）

let newShadowViewLayer = UIView()
newShadowViewLayer.backgroundColor = UIColor.white //必须要有颜色或其他填充物，否则就没有寄宿图，而阴影正好是围绕寄宿图的轮廓来确定的
newShadowViewLayer.frame = CGRect(x: (ContentWidth-200)/2, y: (ContentHeight-200)/2+220, width: 200, height: 200)
newShadowViewLayer.layer.shadowOffset = CGSize(width: 5, height: 5)
newShadowViewLayer.layer.shadowOpacity = 0.5
newShadowViewLayer.layer.shadowColor = UIColor.black.cgColor
newShadowViewLayer.layer.shadowRadius = 0
newShadowViewLayer.layer.cornerRadius = 4.0
newShadowViewLayer.layer.masksToBounds = false
self.view.addSubview(newShadowViewLayer) //注意不是加在layerView上,而且在layerView的更底部图层上，如果和self.view.addSubview(layerView)调个位置，则一样没有效果

layerView = UIView(frame: CGRect(x: (ContentWidth-200)/2, y: (ContentHeight-200)/2+220, width: 200, height: 200))
layerView.backgroundColor = UIColor.red
self.view.addSubview(layerView)

shadowPath属性，实时计算阴影是非常耗资源的一件事情，尤其是有多个字图层，而且还有透明效果的时候。所以为了提高性能就可以用Core Graphics提供的CGPath给图层设置任意形状的阴影：

//给钟表添加一个圆形的阴影
self.clock.layer.shadowOpacity = 0.5
let circlePath = CGMutablePath() //CGPath
circlePath.addEllipse(in: self.clock.bounds)
// self.clock.layer.shadowPath = circlePath
//给钟表添加一个矩形的阴影
let squarePath = CGMutablePath()
squarePath.addRect(self.clock.bounds)
self.clock.layer.shadowPath = squarePath

图层蒙版Mask， 给一张图片加蒙版，那么就会被剪裁成拥有蒙版的外形（待续）

Core Graphics 实现绘图的话会越来越慢！

总结：
1、UIView有一个CALayer的类型属性layer；而所有与绘图和坐标相关的属性及动画实际都是访问的layer的相关属性；
2、UIView继承自UIResponder，所以能接受响应事件，CALayer继承自NSObject，不能响应事件；
3、UIView可以有多个CALayer；

可以去github上查看Demo，喜欢的话star一下哦
github
CSDN

​