CALayer knowledge: Create a rounded corner image layer with a shadow effect and a custom painting content layer,

CALayer knowledge: Create a rounded corner image layer with a shadow effect and a custom painting content layer,

The effect is as follows:

KMLayerDelegate. h

1 #import <UIKit/UIKit.h>2 3 @interface KMLayerDelegate : NSObject4 5 @end

KMLayerDelegate. m

1 # import "KMLayerDelegate. h "2 3 @ implementation KMLayerDelegate 4 5/*** according to angle, obtain the corresponding radian 7*8 * @ param degree angle 9*10 * @ return radian 11 */12 static inline double radian (double degree) {13 return degree * M_PI/180; 14} 15 16/** 17 * painting coloring mode content; draw a cell of the predefined width and height, each cell contains two half circles, they are "upper half circle in the upper left corner" and "lower half circle in the lower right corner" 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; // dot color; 24 CGColorRef dotShadowColor = [UIColor orangeColor] in combination with color, saturation, brightness, and opacity. CGColor; // dot shadow color 25 26 CGContextSetFillColorWithColor (context, dotColor); // set the fill color 27 CGContextSetShadowWithColor (context, CGSizeMake (2.0, 2.0), 1, dotShadowColor ); // set the shadow color. The dotShadowColor with the Shadow location deviation (2.0, 2.0) and blur effect is used as the shadow color 28 29 CGContextAddArc (context, 10.0, 10.0, 10.0, 0.0, radian (180.0), 1); // Add dots; Center (10.0, 10.0) the radius is 10.0, and the circle between 0.0 and 180.0 radian is drawn clockwise (that is, the upper half circle). Note that 0.0 radian is the start 30 CGContextFillPath (context) on the left of the horizontal line; 31 32 CGContextAddArc (context, 30.0, 20.0, 10.0, 0.0, radian (180.0), 0); // Add a dot; Center (30.0, 20.0) the radius is 10.0, and the circle between 0.0 and 180.0 radian is drawn counterclockwise (that is, the lower half circle). Note that 0.0 radian is the start 33 CGContextFillPath (context) on the left of the horizontal line ); 34} 35 36/** 37 * painting content layer 38*39 * @ param layer current layer 40 * @ param context 41 */42-(void) drawLayer :( CALayer *) layer inContext :( CGContextRef) context {43 // layer background color 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 // draw a continuous cell, the content of each cell is determined by the drawColoredPattern Method 50 CGContextSaveGState (context); 51 CGColorSpaceRef patternSpace = NULL); 52 values (context, patternSpace); 53 cgcolorspacerelspace (patternSpace ); 54 55 CGPatternRef pattern = CGPatternCreate (NULL, 56 layer. bounds, 57 CGAffineTransformIdentity, 58 40.0, // cell width 59 40.0, // cell height 60 kCGPatternTilingConstantSpacing, 61 true, 62 & callbacks); 63 CGFloat alpha = 1.0; // opacity of the colored content 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 : UIViewController5 @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 ViewController11 12-(void) viewDidLoad {13 [super viewDidLoad]; 14 15 [self layoutUI]; 16} 17 18-(void) didReceiveMemoryWarning {19 [super didreceivemorywarning]; 20 // Dispose of any resources that can be recreated.21} 22 23/** 24 * Create a shadow rounded corner image layer 25*26 * @ param image 27 * @ param rootLayer root layer 28 */29-(void) createShadowCornerImage :( UIImage *) image withRootLayer :( CALayer *) rootLayer {30 // child layer (shadow layer of the image) 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; // set the shadow color 38 subLayer. shadowOpacity = 0.7; // set the shadow opacity 39 subLayer. shadowOffset = CGSizeMake (4.0, 3.0); // sets the shadow position deviation of 40 subLayer. shadowRadius = 5.0; // set the radius of the Shadow rounded corner 41 [rootLayer addSublayer: subLayer]; 42 43 // child layer (the content layer of the image) 44 CALayer * imageLayer = [CALayer layer]; 45 imageLayer. frame = subLayer. bounds; 46 imageLayer. contents = (id) image. CGImage; 47 imageLayer. masksToBounds = YES; // you can specify the cut limit. The content layer must be set to YES to have the rounded corner effect 48 imageLayer. cornerRadius = cornerRadius; 49 CGAffineTransform affineTransform = round (CGAffineTransformMakeScale (0.8, 0.8), round (M_PI_4/9); // merge the zoom and rotate effects. Center the scale to 0.8, rotate 50 imageLayer clockwise at an angle of 45 degrees/9 = 5 degrees. affineTransform = affineTransform; 51 [subLayer addSublayer: imageLayer]; 52} 53 54/** 55 * create custom painting content layer 56*57 * @ param rootLayer root layer 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; // the background color will be covered by the content layer, so the final display is based on the content layer 63 drawingLayer. masksToBounds = YES; // you can specify the cut limit. The content layer must be set to YES to have the rounded corner effect 64 drawingLayer. cornerRadius = cornerRadius; 65 drawingLayer. borderColor = [UIColor blackColor]. CGColor; 66 drawingLayer. borderWidth = 2.0; 67 drawingLayer. shadowColor = [UIColor darkGrayColor]. CGColor; // set the shadow color 68 drawingLayer. shadowOpacity = 0.8; // sets the shadow opacity 69 drawingLayer. shadowOffset = CGSizeMake (8.0, 6.0); // sets the shadow position deviation of 70 drawingLayer. shadowRadius = 5.0; // set the radius of the Shadow rounded corner 71 72 _ layerDelegate = [KMLayerDelegate new]; 73 drawingLayer. delegate = _ layerDelegate; 74 [drawingLayer setNeedsDisplay]; // call the setNeedsDisplay method to trigger the delegate proxy method drawLayer: 75 [rootLayer addSublayer: drawingLayer]; 76} 77 78-(void) layoutUI {79 // root layer 80 CALayer * rootLayer = self. view. layer; 81 rootLayer. backgroundColor = [UIColor cyanColor]. CGColor; 82 rootLayer. cornerRadius = 40.0; 83 84 [self createShadowCornerImage: [UIImage imageNamed: @ "login"] 85 withRootLayer: rootLayer]; 86 [self createCustomDrawingLayer: rootLayer]; 87} 88 89 @ end