效果如下：
KMLayerDelegate.h
#import <UIKit/UIKit.h> @interface KMLayerDelegate : NSObject @end
KMLayerDelegate.m
#import "KMLayerDelegate.h" @implementation KMLayerDelegate /**
* 根据角度，获取对应的弧度
*
* @param degree 角度
*
* @return 对应的弧度
*/
static inline double radian(double degree) {
return degree * M_PI/;
} /**
* 绘画着色模式内容；绘画预定宽高大小的单元格，每个单元格包含两个半圆，分别为『左上角的上半圆』和『右下边的下半圆』
*
* @param info 信息
* @param context 上下文
*/
void drawColoredPattern(void *info, CGContextRef context) {
CGColorRef dotColor = [UIColor colorWithHue:0.0 saturation:0.0 brightness:0.0 alpha:0.8].CGColor; //圆点颜色；以色彩、饱和度、亮度和不透明度组合的颜色
CGColorRef dotShadowColor = [UIColor orangeColor].CGColor; //圆点阴影颜色 CGContextSetFillColorWithColor(context, dotColor); //设置填充色
CGContextSetShadowWithColor(context, CGSizeMake(2.0, 2.0), , dotShadowColor); //设置阴影颜色；以阴影位置偏差为(2.0, 2.0)、模糊效果的 dotShadowColor 作为阴影颜色 CGContextAddArc(context, 10.0, 10.0, 10.0, 0.0, radian(180.0), ); //添加圆点；以居中点为(10.0, 10.0)、半径为10.0、顺时针画0.0到180.0弧度的圆点（即为上半圆），注意0.0弧度为水平线左边位置开始
CGContextFillPath(context); CGContextAddArc(context, 30.0, 20.0, 10.0, 0.0, radian(180.0), ); //添加圆点；以居中点为(30.0, 20.0)、半径为10.0、逆时针画0.0到180.0弧度的圆点（即为下半圆），注意0.0弧度为水平线左边位置开始
CGContextFillPath(context);
} /**
* 绘画内容图层
*
* @param layer 当前图层
* @param context 上下文
*/
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context {
//图层背景颜色
CGColorRef backgroundColor = [UIColor lightGrayColor].CGColor;
CGContextSetFillColorWithColor(context, backgroundColor);
CGContextFillRect(context, layer.bounds); static const CGPatternCallbacks callbacks = { , &drawColoredPattern, NULL };
//绘画连续的单元格，每个单元格的内容由 drawColoredPattern 方法决定
CGContextSaveGState(context);
CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL);
CGContextSetFillColorSpace(context, patternSpace);
CGColorSpaceRelease(patternSpace); CGPatternRef pattern = CGPatternCreate(NULL,
layer.bounds,
CGAffineTransformIdentity,
40.0, //单元格的宽度
40.0, //单元格的高度
kCGPatternTilingConstantSpacing,
true,
&callbacks);
CGFloat alpha = 1.0; //着色模式内容的不透明度
CGContextSetFillPattern(context, pattern, &alpha);
CGPatternRelease(pattern);
CGContextFillRect(context, layer.bounds);
CGContextRestoreGState(context);
} @end
ViewController.h
//#import <UIKit/UIKit.h>
#import <QuartzCore/CALayer.h>
#import "KMLayerDelegate.h" @interface ViewController : UIViewController
@property (strong, nonatomic) KMLayerDelegate *layerDelegate; @end
ViewController.m
#import "ViewController.h" static CGFloat const kCornerRadius = 10.0;
static CGFloat const kWidthOfIcon = 120.0;
static CGFloat const kLineWidth = 5.0;
static CGFloat const kBaseNumber = ; ///< 24等分法 @interface ViewController ()
- (void)createShadowCornerImage:(UIImage *)image withRootLayer:(CALayer *)rootLayer;
- (void)createCustomDrawingLayer:(CALayer *)rootLayer;
- (void)createSuccessIconDrawingLayer:(CALayer *)rootLayer;
- (void)createWarningIconDrawingLayer:(CALayer *)rootLayer;
- (void)createErrorIconDrawingLayer:(CALayer *)rootLayer;
- (void)layoutUI;
@end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; [self layoutUI];
} - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} /**
* 创建带阴影效果的圆角图片图层
*
* @param image 图片
* @param rootLayer 根图层
*/
- (void)createShadowCornerImage:(UIImage *)image withRootLayer:(CALayer *)rootLayer {
// 子图层（图片的阴影图层）
CALayer *subLayer = [CALayer layer];
subLayer.frame = CGRectMake(20.0, 40.0, 150.0, 150.0);
subLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
subLayer.cornerRadius = kCornerRadius;
subLayer.borderColor = [UIColor blackColor].CGColor;
subLayer.borderWidth = 2.0;
subLayer.shadowColor = [UIColor blackColor].CGColor; // 设置阴影颜色
subLayer.shadowOpacity = 0.7; // 设置阴影不透明度
subLayer.shadowOffset = CGSizeMake(4.0, 3.0); // 设置阴影位置偏差
subLayer.shadowRadius = 5.0; // 设置阴影圆角半径
[rootLayer addSublayer:subLayer]; // 子图层的子图层（图片的内容图层）
CALayer *imageLayer = [CALayer layer];
imageLayer.frame = subLayer.bounds;
imageLayer.contents = (id)image.CGImage;
imageLayer.masksToBounds = YES; // 设置标示剪切界限；内容图层需设置为 YES，才能有圆角效果
imageLayer.cornerRadius = kCornerRadius;
CGAffineTransform affineTransform = CGAffineTransformConcat(CGAffineTransformMakeScale(0.8, 0.8), CGAffineTransformMakeRotation(M_PI_4/)); // 合并缩放和旋转效果；以0.8比例居中缩放，以45度/9=5度的角度顺时针旋转
imageLayer.affineTransform = affineTransform;
[subLayer addSublayer:imageLayer];
} /**
* 创建自定义绘画内容图层（KMLayerDelegate）
*
* @param rootLayer 根图层
*/
- (void)createCustomDrawingLayer:(CALayer *)rootLayer {
CALayer *drawingLayer = [CALayer layer];
drawingLayer.frame = CGRectMake(200.0, 40.0, 150.0, 150.0);
drawingLayer.backgroundColor = [UIColor orangeColor].CGColor; // 背景颜色会被内容图层遮住，所以最终呈现的以内容图层为准
drawingLayer.masksToBounds = YES; // 设置标示剪切界限；内容图层需设置为 YES，才能有圆角效果
drawingLayer.cornerRadius = kCornerRadius;
drawingLayer.borderColor = [UIColor blackColor].CGColor;
drawingLayer.borderWidth = 2.0;
drawingLayer.shadowColor = [UIColor darkGrayColor].CGColor; // 设置阴影颜色
drawingLayer.shadowOpacity = 0.8; // 设置阴影不透明度
drawingLayer.shadowOffset = CGSizeMake(8.0, 6.0); // 设置阴影位置偏差
drawingLayer.shadowRadius = 5.0; // 设置阴影圆角半径 _layerDelegate = [KMLayerDelegate new];
drawingLayer.delegate = _layerDelegate;
[drawingLayer setNeedsDisplay]; // 这里必须调用方法 setNeedsDisplay，才会触发委托代理方法 drawLayer:
[rootLayer addSublayer:drawingLayer];
} /**
* 创建绿色成功图标内容图层
*
* @param rootLayer 根图层
*/
- (void)createSuccessIconDrawingLayer:(CALayer *)rootLayer {
// 成功图标颜色：绿色
UIColor *const color = [UIColor colorWithRed:0.000 green:1.000 blue:0.502 alpha:1.000]; // 贝塞尔曲线路径；开始画圆
UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0.0, 0.0, kWidthOfIcon, kWidthOfIcon)];
// 然后以三点形成「打勾」效果
[path moveToPoint:CGPointMake(kWidthOfIcon/kBaseNumber*, kWidthOfIcon/kBaseNumber*)];
CGPoint p1 = CGPointMake(kWidthOfIcon/kBaseNumber*, kWidthOfIcon/kBaseNumber*);
[path addLineToPoint:p1]; CGPoint p2 = CGPointMake(kWidthOfIcon/kBaseNumber*, kWidthOfIcon/kBaseNumber*);
[path addLineToPoint:p2]; // 子图层
CAShapeLayer *subLayer = [CAShapeLayer layer];
subLayer.frame = CGRectMake(125.0, 210.0, kWidthOfIcon, kWidthOfIcon);
subLayer.path = path.CGPath;
subLayer.lineWidth = kLineWidth; // 线条宽度
subLayer.strokeColor = color.CGColor; // 线条颜色
subLayer.fillColor = [UIColor clearColor].CGColor; //清除填充色
[rootLayer addSublayer:subLayer];
} /**
* 创建黄色警告图标内容图层
*
* @param rootLayer 根图层
*/
- (void)createWarningIconDrawingLayer:(CALayer *)rootLayer {
CGFloat centerOfWidth = (kWidthOfIcon - kLineWidth)/;
// 警告图标颜色：黄色
UIColor *const color = [UIColor colorWithRed:1.000 green:0.800 blue:0.400 alpha:1.000]; // 贝塞尔曲线路径；开始画圆
UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0.0, 0.0, kWidthOfIcon, kWidthOfIcon)];
// 然后画感叹号
[path moveToPoint:CGPointMake(centerOfWidth, kWidthOfIcon/kBaseNumber*)];
CGPoint p1 = CGPointMake(centerOfWidth, kWidthOfIcon/kBaseNumber*);
[path addLineToPoint:p1]; [path moveToPoint:CGPointMake(centerOfWidth, kWidthOfIcon/kBaseNumber*)];
[path addArcWithCenter:CGPointMake(centerOfWidth, kWidthOfIcon/kBaseNumber*) radius:3.0 startAngle: endAngle:M_PI* clockwise:YES]; // 子图层
CAShapeLayer *subLayer = [CAShapeLayer layer];
subLayer.frame = CGRectMake(125.0, 360.0, kWidthOfIcon, kWidthOfIcon);
subLayer.path = path.CGPath;
subLayer.lineWidth = kLineWidth; // 线条宽度
subLayer.strokeColor = color.CGColor; // 线条颜色
subLayer.fillColor = [UIColor clearColor].CGColor; //清除填充色
[rootLayer addSublayer:subLayer];
} /**
* 创建红色错误图标内容图层
*
* @param rootLayer 根图层
*/
- (void)createErrorIconDrawingLayer:(CALayer *)rootLayer {
CGFloat keyVal1 = kWidthOfIcon/kBaseNumber*;
CGFloat keyVal2 = kWidthOfIcon/kBaseNumber*;
// 失败图标颜色：红色
UIColor *const color = [UIColor colorWithRed:1.000 green:0.400 blue:0.400 alpha:1.000]; // 贝塞尔曲线路径；开始画圆
UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0.0, 0.0, kWidthOfIcon, kWidthOfIcon)];
// 然后画交叉号
CGPoint p1 = CGPointMake(keyVal1, keyVal1);
[path moveToPoint:p1]; CGPoint p2 = CGPointMake(keyVal2, keyVal2);
[path addLineToPoint:p2]; CGPoint p3 = CGPointMake(keyVal2, keyVal1);
[path moveToPoint:p3]; CGPoint p4 = CGPointMake(keyVal1, keyVal2);
[path addLineToPoint:p4]; // 子图层
CAShapeLayer *subLayer = [CAShapeLayer layer];
subLayer.frame = CGRectMake(125.0, 510.0, kWidthOfIcon, kWidthOfIcon);
subLayer.path = path.CGPath;
subLayer.lineWidth = kLineWidth; // 线条宽度
subLayer.strokeColor = color.CGColor; // 线条颜色
subLayer.fillColor = [UIColor clearColor].CGColor; //清除填充色
[rootLayer addSublayer:subLayer];
} - (void)layoutUI {
//根图层
CALayer *rootLayer = self.view.layer;
rootLayer.backgroundColor = [UIColor colorWithRed:0.769 green:0.940 blue:0.943 alpha:1.000].CGColor;
rootLayer.cornerRadius = 40.0; [self createShadowCornerImage:[UIImage imageNamed:@"Emoticon_tusiji_icon2"]
withRootLayer:rootLayer];
[self createCustomDrawingLayer:rootLayer];
[self createSuccessIconDrawingLayer:rootLayer];
[self createWarningIconDrawingLayer:rootLayer];
[self createErrorIconDrawingLayer:rootLayer];
} @end