1.CALayer与UIView
UIView继承自UIResponder,可以响应触摸事件。
CALayer继承自NSObject,用于实际的图层内容管理。
iOS中每个视图都有一个与之关联的CALayer,用于管理图层内容。
2.CALayer简单使用
class ViewController: UIViewController {
var imageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
imageView = UIImageView(frame: CGRect(origin: view.center, size: CGSize(width: 200, height: 200)))
setUpLayer(layer: imageView.layer)
view.addSubview(imageView)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
func setUpLayer(layer: CALayer) {
//背景色
layer.backgroundColor = UIColor.blue.cgColor
//边框宽度
layer.borderWidth = 2
//边框颜色
layer.borderColor = UIColor.red.cgColor
//阴影透明度
layer.shadowOpacity = 0.7
//阴影角度
layer.shadowRadius = 10
}
}
效果如图:
在上面的代码中,我们做了下面的事情:
1.把图层背景颜色设置为蓝色
2.将边框宽度从默认值0改为2
3.将边框的颜色设置为红色
4.设置了阴影,透明度从0设置为0.7,并将阴影半径设置为10
接下来,在setUpLayer方法中加入如下代码,添加内容:
//设置内容
layer.contents = UIImage(named: "111.png")?.cgImage
//设置内容模式
layer.contentsGravity = kCAGravityCenter
结果如图:
由于contentsGravity我们设置的是center,该模式会把按照图片原大小显示,而我们的图片没有imageView大,就导致不会占满整个imageView。这里可以选择拉伸剪切模式,让图片适应imageView。
3.添加手势
我们给imageView添加点击和捏合手势,如下:
override func viewDidLoad() {
super.viewDidLoad()
imageView = UIImageView(frame: CGRect(origin: CGPoint(x: view.center.x-100, y: view.center.y-100), size: CGSize(width: 200, height: 200)))
let tap = UITapGestureRecognizer(target: self, action: #selector(tap(tap:)))
let pinch = UIPinchGestureRecognizer(target: self, action: #selector(pinch(pinch:)))
imageView.addGestureRecognizer(tap)
imageView.addGestureRecognizer(pinch)
//需要有这句,才能开启UIImageView的交互
imageView.isUserInteractionEnabled = true
setUpLayer(layer: imageView.layer)
view.addSubview(imageView)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
func tap(tap: UITapGestureRecognizer) {
//改变阴影的透明度
imageView.layer.shadowOpacity = imageView.layer.shadowOpacity == 0.7 ? 0 : 0.7
}
func pinch(pinch: UIPinchGestureRecognizer) {
let offset: CGFloat = pinch.scale < 1 ? 5.0 : -5.0
let oldFrame = imageView.layer.frame
let oldOrigin = oldFrame.origin
let newOrigin = CGPoint(x: oldOrigin.x + offset, y: oldOrigin.y + offset)
let newSize = CGSize(width: oldFrame.width + (offset * -2.0), height: oldFrame.height + (offset * -2.0))
let newFrame = CGRect(origin: newOrigin, size: newSize)
if newFrame.width >= 100.0 && newFrame.width <= 300.0 {
imageView.layer.borderWidth -= offset
imageView.layer.cornerRadius += (offset / 2.0)
imageView.layer.frame = newFrame
}
}
稍微修改了一下imageview的位置,让它居中,方便模拟器上面控制:
放大:
缩小:
点击手势,是使imageview周围的阴影消失。捏合手势,使imageview的边框变宽和变窄。(在边窄的时候,不会修改了图层的内容,除非把图层的masksToBounds设置为true。设置为true后,图层内容会随着变宽的变化而变化。)
设置为true后缩小:
CALayer还有一些地方需要知道:
- 1.图层还可以添加图层,跟View可以添加View一样
- 2.图层属性是可以设置动画的,图层属性改变时,可以自定义动画时间
- 3.图层比View更加轻巧,有助于提高性能
- 4.图层比View具有更多的属性。
4.添加图层
// 创建CALayer
let layer = CALayer()
layer.frame = someView.bounds
//设置图像
layer.contents = UIImage(named: "111.png")?.CGImage
layer.contentsGravity = kCAGravityCenter
//指定放大图像时使用的过滤器
layer.magnificationFilter = kCAFilterLinear
//几何变化
layer.geometryFlipped = false
//背景颜色
layer.backgroundColor = UIColor(red: 11/255.0, green: 86/255.0, blue: 14/255.0, alpha: 1.0).CGColor
//透明度
layer.opacity = 1.0
//是否隐藏
layer.hidden = false
//是否剪切
layer.masksToBounds = false
// 设置边界,圆角
layer.cornerRadius = 100.0
layer.borderWidth = 12.0
layer.borderColor = UIColor.whiteColor().CGColor
// 设置阴影
layer.shadowOpacity = 0.75
layer.shadowOffset = CGSize(width: 0, height: 3)
layer.shadowRadius = 3.0
someView.layer.addSublayer(layer)
CALayer还有两个属性shouldRasterize和drawsAsynchronously可以提高性能。
shouldRasterize默认为false,设置为true可以提高性能,因为设置后图层的内容只需要呈现一次。用在图层设置之前。
drawsAsynchronously默认为false,设置为true可以提高性能,当层的内容必须重新绘制时,可以提高性能。用在图层设置完毕后。
5.常用属性
属性 | 作用 |
---|---|
contentsGravity | 内容的模式 |
displayContents | 是否展示内容 |
geometryFlipped | 几何翻转 |
hidden | 是否隐藏 |
opacity | 透明度 |
cornerRadius | 圆角角度 |
borderWidth | 边框宽度 |
borderColor | 边框颜色 |
backgroundColor | 背景颜色 |
shadowOpacity | 阴影透明度 |
shadowOffset | 阴影偏移 |
shadowRadius | 阴影圆角角度 |
shadowColor | 阴影颜色 |
magnificationFilter | 放大时的过滤器 |