在IOS的开发中,经常需要针对大量的UIViews进行个性化定制,这样的空间包括Button、Label、slider、web view and so on。几乎UIView的子类都可能会遇到个性化定制的时候。那么接下来就针对UIView的特性CALayer开进行一个个性化定制吧。
What Are CALayers?
- Layer的大小位置 <size、position>
- Layer的背景颜色 <backgroundColor>
- Layer的内容 <image、core graphics的绘图>
- Layer的阴影 <shadow>
- Layer的边缘 <edges>
- and so on
Getting Started
创建一个给予Single-View Application的项目工程,LayerFun。添加CALayer的类库QuartCore.framework。
打开ViewController.m 文件,引入QuartzCore头文件,并尝试设置当前View的Layer设置。
在viewdidload方法中添加如下代码:
- self.view.layer.backgroundColor = [UIColor orangeColor].CGColor;
- self.view.layer.cornerRadius = 20.0f;
- self.view.layer.frame = CGRectInset(self.view.layer.frame, 20.0f, 20.0f);
运行工程,可以看到当前视图的view已经有了橘色背景颜色、圆角以及位置的变化。
CALayers and Sublayers
就像UIView有subViews一样,CALayer也有subLayers,这样就可以像UIView那样的使用方式来使用CALayer了,例如:
CALayer *subLayer = [CALayer layer];
不管你有多少个subLayers,当你创建了一个CALayer之后,你就可以设置它的属性了,并且要指定其大小和位置。设置完成之后,将其add到某个Layer的subLayer,就可以显示了。例如:
[myLayer addSublayer:sublayer];
接下来继续在viewdidload方法中添加如下代码,实现layer的addSublayer:
- CALayer *subLayer = [CALayer layer];
- subLayer.backgroundColor = [UIColor blueColor].CGColor;
- subLayer.shadowColor = [UIColor blackColor].CGColor;
- subLayer.shadowOffset = CGSizeMake(0, 5);
- subLayer.shadowRadius = 5.0f;
- subLayer.shadowOpacity = 0.8f;
- subLayer.frame = CGRectMake(30.0f, 30.0f, 128, 192);
- subLayer.borderColor = [UIColor blackColor].CGColor;
- subLayer.borderWidth = 2.0f;
- subLayer.cornerRadius = 10.0f;
- [self.view.layer addSublayer:subLayer];
完成后运行,就可以看到在当前视图的Layer上新增加了另一个layer之后,两个layer的显示完全由开发者自己定制,并且方法简单。
![](https://img-my.csdn.net/uploads/201210/14/1350183525_4582.png)
Setting CALayer Image Content
对于CALayer来说,不一定只能对其填充颜色,还可以通过其他很多元素进行填充,使其达到要求,例如使用图片来填充。
首先选择一张需要的图片,本例使用的图片地址:download a splash screen ,你们可以下载来暂时使用。
添加图片到工程,使用一下的内容更改viewdidload里面的部分代码:
subLayer.contents = (id) [UIImage imageNamed:@"BattleMapSplashScreen.jpeg"].CGImage;
subLayer.borderColor = [UIColor blackColor].CGColor;
subLayer.borderWidth = 2.0f;
但是可以看到图片并没有圆角化,只需要对subLayer设置masksToBounds为YES既可以实现图片的圆角化。另外阴影、边框的颜色等等都可以自己定制。
完成代码:
CALayer *sublayer = [CALayer layer];
sublayer.backgroundColor = [UIColor blueColor].CGColor;
sublayer.shadowOffset = CGSizeMake(0, 3);
sublayer.shadowRadius = 5.0;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shadowOpacity = 0.8;
sublayer.frame = CGRectMake(30, 30, 128, 192);
sublayer.borderColor = [UIColor blackColor].CGColor;
sublayer.borderWidth = 2.0;
sublayer.cornerRadius = 10.0;
[self.view.layer addSublayer:sublayer];
CALayer *imageLayer = [CALayer layer];
imageLayer.frame = sublayer.bounds;
imageLayer.cornerRadius = 10.0;
imageLayer.contents = (id) [UIImage imageNamed:@"BattleMapSplashScreen.jpg"].CGImage;
imageLayer.masksToBounds = YES;
[sublayer addSublayer:imageLayer];
CALayer and Custom Drawn Content
接下来实现一个自定义卡通效果的样式显示:
按照如下代码例子重写viewdidload即可实现:
新建一个Layer:
- CALayer *customDrawn = [CALayer layer];
- customDrawn.delegate = self;
- customDrawn.backgroundColor = [UIColor greenColor].CGColor;
- customDrawn.frame = CGRectMake(30, 250, 128, 40);
- customDrawn.shadowOffset = CGSizeMake(0, 3);
- customDrawn.shadowRadius = 5.0;
- customDrawn.shadowColor = [UIColor blackColor].CGColor;
- customDrawn.shadowOpacity = 0.8;
- customDrawn.cornerRadius = 10.0;
- customDrawn.borderColor = [UIColor blackColor].CGColor;
- customDrawn.borderWidth = 2.0;
- customDrawn.masksToBounds = YES;
- [self.view.layer addSublayer:customDrawn];
- [customDrawn setNeedsDisplay];
使用C++语法写一个绘制方法:
- void DrawColoredPattern(void *info, CGContextRef context){
- CGColorRef dotColor = [UIColor colorWithHue:0 saturation:0 brightness:0.07f alpha:1.0].CGColor;
- CGColorRef shadowColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.1].CGColor;
- CGContextSetFillColorWithColor(context, dotColor);
- CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 1, shadowColor);
- CGContextAddArc(context, 3, 3, 4, 0, radians(360), 0);
- CGContextFillPath(context);
- CGContextAddArc(context, 16, 16, 4, 0, radians(360), 0);
- CGContextFillPath(context);
- }
重写CALayer的drawLayer:inContext方法:
- -(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{
- CGColorRef bgColor = [UIColor colorWithHue:0.6 saturation:1.0 brightness:1.0 alpha:1.0].CGColor;
- CGContextSetFillColorWithColor(ctx, bgColor);
- CGContextFillRect(ctx, layer.bounds);
- static const CGPatternCallbacks callbacks = { 0, &DrawColoredPattern, NULL};
- CGContextSaveGState(ctx);
- CGColorSpaceRef patterSpace = CGColorSpaceCreatePattern(NULL);
- CGContextSetFillColorSpace(ctx, patterSpace);
- CGColorSpaceRelease(patterSpace);
- CGPatternRef pattern = CGPatternCreate(NULL, layer.bounds, CGAffineTransformIdentity, 24, 24, kCGPatternTilingConstantSpacing, true, &callbacks);
- CGFloat alpha = 1.0;
- CGContextSetFillPattern(ctx, pattern, &alpha);
- CGPatternRelease(pattern);
- CGContextFillRect(ctx, layer.bounds);
- CGContextRestoreGState(ctx);
- }
![](https://img-my.csdn.net/uploads/201210/14/1350184422_9283.png)
OK,这样就实现了一个完全自定义的图片样式化的显示了,虽然结果看起来好像是一张图片,可是实现却是使用CoreGraphics来绘制的。
Demo下载地址:sample project