图层CALayer

来源:互联网 发布:淘宝商城weimeixiaowu 编辑:程序博客网 时间:2024/04/30 21:00

0:UIView
所有的视图都是由UIView派生而来,UIView可以处理触摸事件,可以支持Core Graphics绘图,可以做仿射变换(旋转或缩放),以及简单的滑动和渐变动画。
1: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, 给一张图片加蒙版,那么就会被剪裁成拥有蒙版的外形:

原创粉丝点击