CALayer 知识：创建带阴影效果的圆角图片图层和创建自定义绘画内容图层

效果如下：

KMLayerDelegate.h

1 #import <UIKit/UIKit.h>

2 

3 @interface KMLayerDelegate : NSObject

4 

5 @end

KMLayerDelegate.m

 1 #import "KMLayerDelegate.h"

 2 

 3 @implementation KMLayerDelegate

 4 

 5 /**

 6  *  根据角度，获取对应的弧度

 7  *

 8  *  @param degree 角度

 9  *

10  *  @return 对应的弧度

11  */

12 static inline double radian(double degree) {

13     return degree * M_PI/180;

14 }

15 

16 /**

17  *  绘画着色模式内容；绘画预定宽高大小的单元格，每个单元格包含两个半圆，分别为『左上角的上半圆』和『右下边的下半圆』

18  *

19  *  @param info    信息

20  *  @param context 上下文

21  */

22 void drawColoredPattern(void *info, CGContextRef context) {

23     CGColorRef dotColor = [UIColor colorWithHue:0.0 saturation:0.0 brightness:0.0 alpha:0.8].CGColor; //圆点颜色；以色彩、饱和度、亮度和不透明度组合的颜色

24     CGColorRef dotShadowColor = [UIColor orangeColor].CGColor; //圆点阴影颜色

25     

26     CGContextSetFillColorWithColor(context, dotColor); //设置填充色

27     CGContextSetShadowWithColor(context, CGSizeMake(2.0, 2.0), 1, dotShadowColor); //设置阴影颜色；以阴影位置偏差为(2.0, 2.0)、模糊效果的 dotShadowColor 作为阴影颜色

28     

29     CGContextAddArc(context, 10.0, 10.0, 10.0, 0.0, radian(180.0), 1); //添加圆点；以居中点为(10.0, 10.0)、半径为10.0、顺时针画0.0到180.0弧度的圆点（即为上半圆），注意0.0弧度为水平线左边位置开始

30     CGContextFillPath(context);

31     

32     CGContextAddArc(context, 30.0, 20.0, 10.0, 0.0, radian(180.0), 0); //添加圆点；以居中点为(30.0, 20.0)、半径为10.0、逆时针画0.0到180.0弧度的圆点（即为下半圆），注意0.0弧度为水平线左边位置开始

33     CGContextFillPath(context);

34 }

35 

36 /**

37  *  绘画内容图层

38  *

39  *  @param layer   当前图层

40  *  @param context 上下文

41  */

42 - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context {

43     //图层背景颜色

44     CGColorRef backgroundColor = [UIColor lightGrayColor].CGColor;

45     CGContextSetFillColorWithColor(context, backgroundColor);

46     CGContextFillRect(context, layer.bounds);

47     

48     static const CGPatternCallbacks callbacks = { 0, &drawColoredPattern, NULL };

49     //绘画连续的单元格，每个单元格的内容由 drawColoredPattern 方法决定

50     CGContextSaveGState(context);

51     CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL);

52     CGContextSetFillColorSpace(context, patternSpace);

53     CGColorSpaceRelease(patternSpace);

54     

55     CGPatternRef pattern = CGPatternCreate(NULL,

56                                            layer.bounds,

57                                            CGAffineTransformIdentity,

58                                            40.0, //单元格的宽度

59                                            40.0, //单元格的高度

60                                            kCGPatternTilingConstantSpacing,

61                                            true,

62                                            &callbacks);

63     CGFloat alpha = 1.0; //着色模式内容的不透明度

64     CGContextSetFillPattern(context, pattern, &alpha);

65     CGPatternRelease(pattern);

66     CGContextFillRect(context, layer.bounds);

67     CGContextRestoreGState(context);

68 }

69 

70 @end

ViewController.h

1 #import <UIKit/UIKit.h>

2 #import "KMLayerDelegate.h"

3 

4 @interface ViewController : UIViewController

5 @property (strong, nonatomic) KMLayerDelegate *layerDelegate;

6 

7 @end

ViewController.m

 1 #import "ViewController.h"

 2 

 3 static const CGFloat cornerRadius = 10.0;

 4 @interface ViewController ()

 5 - (void)createShadowCornerImage:(UIImage *)image withRootLayer:(CALayer *)rootLayer;

 6 - (void)createCustomDrawingLayer:(CALayer *)rootLayer;

 7 - (void)layoutUI;

 8 @end

 9 

10 @implementation ViewController

11 

12 - (void)viewDidLoad {

13     [super viewDidLoad];

14     

15     [self layoutUI];

16 }

17 

18 - (void)didReceiveMemoryWarning {

19     [super didReceiveMemoryWarning];

20     // Dispose of any resources that can be recreated.

21 }

22 

23 /**

24  *  创建带阴影效果的圆角图片图层

25  *

26  *  @param image     图片

27  *  @param rootLayer 根图层

28  */

29 - (void)createShadowCornerImage:(UIImage *)image withRootLayer:(CALayer *)rootLayer {

30     //子图层（图片的阴影图层）

31     CALayer *subLayer = [CALayer layer];

32     subLayer.frame = CGRectMake(40.0, 40.0, 240.0, 240.0);

33     subLayer.backgroundColor = [UIColor lightGrayColor].CGColor;

34     subLayer.cornerRadius = cornerRadius;

35     subLayer.borderColor = [UIColor blackColor].CGColor;

36     subLayer.borderWidth = 2.0;

37     subLayer.shadowColor = [UIColor blackColor].CGColor; //设置阴影颜色

38     subLayer.shadowOpacity = 0.7; //设置阴影不透明度

39     subLayer.shadowOffset = CGSizeMake(4.0, 3.0); //设置阴影位置偏差

40     subLayer.shadowRadius = 5.0; //设置阴影圆角半径

41     [rootLayer addSublayer:subLayer];

42     

43     //子图层的子图层（图片的内容图层）

44     CALayer *imageLayer = [CALayer layer];

45     imageLayer.frame = subLayer.bounds;

46     imageLayer.contents = (id)image.CGImage;

47     imageLayer.masksToBounds = YES; //设置标示剪切界限；内容图层需设置为 YES，才能有圆角效果

48     imageLayer.cornerRadius = cornerRadius;

49     CGAffineTransform affineTransform = CGAffineTransformConcat(CGAffineTransformMakeScale(0.8, 0.8), CGAffineTransformMakeRotation(M_PI_4/9)); //合并缩放和旋转效果；以0.8比例居中缩放，以45度/9=5度的角度顺时针旋转

50     imageLayer.affineTransform = affineTransform;

51     [subLayer addSublayer:imageLayer];

52 }

53 

54 /**

55  *  创建自定义绘画内容图层

56  *

57  *  @param rootLayer 根图层

58  */

59 - (void)createCustomDrawingLayer:(CALayer *)rootLayer {

60     CALayer *drawingLayer = [CALayer layer];

61     drawingLayer.frame = CGRectMake(40.0, 320.0, 240.0, 240.0);

62     drawingLayer.backgroundColor = [UIColor orangeColor].CGColor; //背景颜色会被内容图层遮住，所以最终呈现的以内容图层为准

63     drawingLayer.masksToBounds = YES; //设置标示剪切界限；内容图层需设置为 YES，才能有圆角效果

64     drawingLayer.cornerRadius = cornerRadius;

65     drawingLayer.borderColor = [UIColor blackColor].CGColor;

66     drawingLayer.borderWidth = 2.0;

67     drawingLayer.shadowColor = [UIColor darkGrayColor].CGColor; //设置阴影颜色

68     drawingLayer.shadowOpacity = 0.8; //设置阴影不透明度

69     drawingLayer.shadowOffset = CGSizeMake(8.0, 6.0); //设置阴影位置偏差

70     drawingLayer.shadowRadius = 5.0; //设置阴影圆角半径

71     

72     _layerDelegate = [KMLayerDelegate new];

73     drawingLayer.delegate = _layerDelegate;

74     [drawingLayer setNeedsDisplay]; //这里必须调用方法 setNeedsDisplay，才会触发委托代理方法 drawLayer:

75     [rootLayer addSublayer:drawingLayer];

76 }

77 

78 - (void)layoutUI {

79     //根图层

80     CALayer *rootLayer = self.view.layer;

81     rootLayer.backgroundColor = [UIColor cyanColor].CGColor;

82     rootLayer.cornerRadius = 40.0;

83     

84     [self createShadowCornerImage:[UIImage imageNamed:@"Emoticon_tusiji_icon2"]

85                     withRootLayer:rootLayer];

86     [self createCustomDrawingLayer:rootLayer];

87 }

88 

89 @end