上一篇文章中初步介绍了Core Animation框架,从中我们能发现图层树是其中的最基础和核心的概念。那么本文将会介绍最基础的CALayer,通过其中的一些基本属性实现基础的视觉效果。
寄宿图
俗话说一图胜千言,图片能给用户带来文字更好的视觉效果和更清晰的信息表达。在日常编写代码的过程中对于图片的处理使用最多的就是UIImageView视图控件。其实CALayer中的寄宿图也能胜任这项任务,其中使用到的属性就是寄宿图contents。该属性定义如下:
@property(strong) id contents;
contents的属性类型是id,这意味着该属性可以被任意赋值。但是在现实编码的过程中该属性只会处理CGImage对象,其余的赋值操作得到的结果都只会得到空白图层显示。之所以会如此怪异是因为在macOS的Cocoa框架中contents是可以接受CGImage和NSImage,而iOS的Cocoa Touch框架中其实接受的是一个指向CGImage对象的结构化指针CGImageRef。加载图形的代码与效果:
layer = CALayer()
viewForLayer = UIView.init(frame: CGRect.init(x: 50, y: 50, width: self.view.bounds.width - 100, height: self.view.bounds.height/2))
layer.frame = viewForLayer.bounds
layer.contents = UIImage.init(named: "YiXiu")?.cgImage
viewForLayer.layer.addSublayer(layer)
self.view.addSubview(viewForLayer)
CALayer中添加图片的方式与UIImageView的操作一样的简单。不过上图的显示效果不是很理想有很明显,这个现象在UIImageView中也会经常遇到,因此这里当然也有类似的处理方法。与View中的contentMode对应CALayer有一个contentsGravity,后者是一个NSString类型的枚举而前者是一个UIKit类型的枚举。contentsGravity枚举的可选值:
kCAGravityCenter
kCAGravityTop
kCAGravityBottom
kCAGravityLeft
kCAGravityRight
kCAGravityTopLeft
kCAGravityTopRight
kCAGravityBottomLeft
kCAGravityBottomRight
kCAGravityResize
kCAGravityResizeAspect
kCAGravityResizeAspectFill
//设置居中
layer.contentsGravity = kCAGravityResizeAspect
图层阴影
iOS系统中常见的一个特性就是阴影,阴影在设计中的目的就是强调图层的景深显示图层的优先级。实现阴影效果的属性为:shadowOpacity、shadowColor、shadowOffset、shadowRadius、shadowPath,分别对应阴影的透明度、阴影颜色、阴影偏移、阴影圆角、阴影形状。最常用的是前面四个,最后一个shadowPath是在开发人员提前知道阴影形状时用来提过对图层阴影计算效率的。
//任意图层的透明度取值范围为0~1的浮点
layer.shadowOpacity = 1
//阴影的偏移量
layer.shadowOffset = CGSize.init(width: 30, height: 30)
//阴影的圆角值
layer.shadowRadius = 10
//阴影的颜色
layer.shadowColor = UIColor.gray.cgColor
图层边框
CALayer存在一个外框,我们可以通过设置边框的宽度的颜色来实现自定义外观。具体的设置操作:
layer.borderWidth = 2
layer.borderColor = UIColor.blue.cgColor
其他属性
圆角矩形是iOS设计中最常使用的设计美学,CALayer中的圆角设置:
viewForLayer.layer.cornerRadius = 10.0
CALayer中的透明度设置:
layer.opacity = 0.5;
CALayer中的背景色设置:
layer.backgroundColor = UIColor.red.cgColor
CALayer中设置超出内容的显示:
layer.masksToBounds = true
注意:当masksToBounds设置为true的时候图层会被截取,然后圆角设置就导致失败。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。