CALayer 不仅仅是 iOS 动画学习 - CALayer 中介绍的那些内容,他还有一些其他属性,比如 shadowColor,borderWidth,borderColor 等等,这些属性我们只需要简单点设置就能看到很好的效果,这里就介绍一下这些属性。
这个属性大家应该都很熟悉,在 iOS 中几乎无处不见,大家应该也经常用 cornerRadius 控制着图层角的曲率,它是一个浮点数,默认值为 0(0 的时候为直角),你可以把它设置成任意值。默认情况下,这个曲率值只影响背景颜色而不影响背景图片或是子图层,不过 CALayer 还有一个 masksToBounds 属性,只需把它设置为 YES,图层里的东西都会被截取,下面用代码来解释一下:
用 storyboard 创建视图如下:
添加代码:
- @interface ViewController()@property(weak, nonatomic) IBOutlet UIView * topView;@property(weak, nonatomic) IBOutlet UIView * bottomView;
- @end
- - (void) viewDidLoad { [super viewDidLoad];
- self.topView.layer.cornerRadius = 20.0f;
- self.bottomView.layer.cornerRadius = 20.0f;
- // 设置底部视图的masksToBounds属性为YES
- self.bottomView.layer.masksToBounds = YES;
- // Do any additional setup after loading the view, typically from a nib.
- }
以上代码产生的效果图如下,我们可以看到,没有将 masksToBounds 设置为 YES 的顶部视图,对子图层是不会切割的,
CALayer 另外两个非常有用属性就是
和
- borderWidth
。二者共同定义了图层边的绘制样式。这条线(也被称作 stroke)沿着图层的
- borderColor
绘制,同时也包含图层的角。
- bounds
borderWidth 是以点为单位的定义边框粗细的浮点数,默认为 0;borderColor 定义了边框的颜色,默认为黑色。
边框是绘制在图层边界里面的,而且在所有子内容之前,也在子图层之前。我们可以在上面代码的基础上添加边框,就能看出效果了
添加之后的代码
- @interface ViewController()@property(weak, nonatomic) IBOutlet UIView * topView;@property(weak, nonatomic) IBOutlet UIView * bottomView;
- @end
- @implementation ViewController
- - (void) viewDidLoad { [super viewDidLoad];
- self.topView.layer.cornerRadius = 20.0f;
- self.bottomView.layer.cornerRadius = 20.0f;
- self.topView.layer.borderWidth = 5.0f;
- self.bottomView.layer.borderWidth = 5.0f;
- // 设置底部视图的masksToBounds属性为YES
- self.bottomView.layer.masksToBounds = YES;
- // Do any additional setup after loading the view, typically from a nib.
- }
运行之后的效果图如下,可以看到边框在子内容之前
iOS 另一个常见特性是阴影,给 shadowOpacity 一个大于默认值 (0) 的值,阴影就可以显示在图层下,shadowOpacity 的值必须是 0.0(不可见)到 1.0(完全不透明)之间的浮点数。除了这个参数之外,还有另外三个属性: shadowColor,shadowOffset 和 shadowRadius
显而易见,
属性控制着阴影的颜色,和
- shadowColor
和
- borderColor
一样,它的类型也是
- backgroundColor
。阴影默认是黑色,大多数时候你需要的阴影也是黑色的(其他颜色的阴影看起来是不是有一点点奇怪。。)。
- CGColorRef
属性控制着阴影的方向和距离。它是一个
- shadowOffset
的值,宽度控制这阴影横向的位移,高度控制着纵向的位移。
- CGSize
的默认值是 {0, -3},意即阴影相对于 Y 轴有 3 个点的向上位移。
- shadowOffset
属性控制着阴影的模糊度,当它的值是 0 的时候,阴影就和视图一样有一个非常确定的边界线。当值越来越大的时候,边界线看上去就会越来越模糊和自然。苹果自家的应用设计更偏向于自然的阴影,所以一个非零值再合适不过了
- shadowRadius
当阴影和裁剪扯上关系的时候就有一个头疼的限制:阴影通常就是在 Layer 的边界之外,如果你开启了
属性,所有从图层中突出来的内容都会被才剪掉。
- masksToBounds
从技术角度来说,这个结果是可以是可以理解的,但确实又不是我们想要的效果。如果你想沿着内容裁切,你需要用到两个图层:一个只画阴影的空的外图层,和一个用
裁剪内容的内图层。
- masksToBounds
- shadowPath
图层阴影并不总是方的,而是从图层内容的形状继承而来,但是实时计算阴影也是一个非常消耗资源的,尤其是图层有多个子图层,每个图层还有一个有透明效果的寄宿图的时候。
如果你事先知道你的阴影形状会是什么样子的,你可以通过指定一个
来提高性能,
- shadowPath
是一个
- shadowPath
类型(一个指向
- CGPathRef
的指针)。
- CGPath
是一个 Core Graphics 对象,用来指定任意的一个矢量图形。我们可以通过这个属性单独于图层形状之外指定阴影的形状。
- CGPath
通过
属性,我们可以沿边界裁剪图形;通过
- masksToBounds
属性,我们还可以设定一个圆角。但是有时候你希望展现的内容不是在一个矩形或圆角矩形。比如,你想展示一个有星形框架的图片,又或者想让一些古卷文字慢慢渐变成背景色,而不是一个突兀的边界。
- cornerRadius
使用一个 32 位有 alpha 通道的 png 图片通常是创建一个无矩形视图最方便的方法,你可以给它指定一个透明蒙板来实现。但是这个方法不能让你以编码的方式动态地生成蒙板,也不能让子图层或子视图裁剪成同样的形状。
CALayer 有一个属性叫做
可以解决这个问题。这个属性本身就是个 CALayer 类型,有和其他图层一样的绘制和布局属性。它类似于一个子图层,相对于父图层(即拥有该属性的图层)布局,但是它却不是一个普通的子图层。不同于那些绘制在父图层中的子图层,
- mask
图层定义了父图层的部分可见区域。
- mask
图层的
- mask
属性是无关紧要的,真正重要的是图层的轮廓。
- Color
属性就像是一个饼干切割机,
- mask
图层实心的部分会被保留下来,其他的则会被抛弃
- mask
代码如下:
@interface ViewController () <CALayerDelegate>
@property (weak, nonatomic) IBOutlet UIView *topView;
@property (weak, nonatomic) IBOutlet UIView *bottomView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.topView.layer.contents = (__bridge id)[UIImage imageNamed:@"image02"].CGImage;
self.topView.layer.contentsGravity = kCAGravityResizeAspect;
self.bottomView.layer.contents = (__bridge id)[UIImage imageNamed:@"image02"].CGImage;
self.bottomView.layer.contentsGravity = kCAGravityResizeAspect;
// 注意创建的 layer 需要实体,可以在内部用图片来创建实体的 layer,这里 backgroundColor 就是为了创建一个实体 layer,并不会真正产生颜色效果
CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(0, 0, 75, 75);
layer.backgroundColor = [UIColor redColor].CGColor;
self.topView.layer.mask = layer;
// Do any additional setup after loading the view, typically from a nib.
}
CALayer 还有很多有意思的属性,大家可以查看头文件做更多的了解,这里只是介绍了常用的一些属性
来源: http://www.cnblogs.com/Devhwl/p/7155916.html