The attributes of the Calayer layer in IOS development and the method of customizing the layer _ios

Properties of the Calayer layer
I. Position and Anchorpoint

1. Brief introduction

Calayer has 2 very important properties: position and Anchorpoint

@property cgpoint position;

Used to set the position of Calayer in the parent layer

In the upper-left corner of the parent layer as the origin (0, 0)

@property Cgpoint Anchorpoint;

Called "Anchor Point", "anchored point"

Determines which point in the Calayer is where the position attribute refers.

Take your own upper-left corner as the origin (0, 0).

Its x, y values range is 0~1, the default value is (0.5, 0.5)

2. Illustration

Anchorpoint

Its value is 0~1

Anchorpoint of Red layer (0,0)

Anchorpoint of Red layer (0.5,0.5)

Anchorpoint of Red layer (1,1)

Anchorpoint of Red layer (0.5,0)

Position and Anchorpoint

Add a red layer to the green layer, where the red layer appears, determined by the Position property

Suppose the position of the red layer is (100,100)

Exactly which point of the red layer moves to (100,100) coordinates position, anchor point.

The anchor point of the red layer is (0,0)

The anchor point of the red layer is (0.5,0.5)

The anchor point of the red layer is (1,1)

The anchor point of the red layer is (0.5,0)

3. code example

(1) No anchor points are set. The default anchor point location is (0.5,0.5)

Copy Code code as follows:

//
Yyviewcontroller.m
03-anchor points and other attributes
//
Created by Apple on 14-6-21.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface Yyviewcontroller ()

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];
Creating layers
Calayer *layer=[calayer layer];
Set the properties of a layer
Layer.backgroundcolor=[uicolor Redcolor]. Cgcolor;
Layer.bounds=cgrectmake (0, 0, 100, 100);
Add Layers
[Self.view.layer Addsublayer:layer];

}

@end

Display effect:

(1) Set the anchor point position as (0,0)

Copy Code code as follows:

-(void) viewdidload
{
[Super Viewdidload];
Creating layers
Calayer *layer=[calayer layer];
Set the properties of a layer
Layer.backgroundcolor=[uicolor Redcolor]. Cgcolor;
Layer.bounds=cgrectmake (0, 0, 100, 100);
Set anchor point to (0,0)
Layer.anchorpoint=cgpointzero;
Add Layers
[Self.view.layer Addsublayer:layer];
}
@end

Display effect:

Two, implicit animation

1. Simple description

Each uiview internally is associated with a calayer, which we can call Layer root Layer (root layer)

All non-root Layer, which are manually created Calayer objects, are implicitly animated

What is an implicit animation?

When you modify a partial property that is not root layer, the default automatically produces some animation effects

These properties are referred to as animatable properties (animated)

Enumerate a few common animatable Properties:

Bounds: Used to set the width and height of the calayer. Modifying this property will result in a zoom animation

BackgroundColor: Used to set the background color of the calayer. Modifying this property will result in a gradient animation of the background color

Position: Used to set the location of the Calayer. Modifying this property will result in a translation animation

2. code example

Copy Code code as follows:

//
Yyviewcontroller.m
04-Implicit animation
//
Created by Apple on 14-6-21.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Nonatomic,strong) Calayer *layer;
@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];
Creating layers
Calayer *mylayer=[calayer layer];
Set layer Properties
Mylayer.backgroundcolor=[uicolor Browncolor]. Cgcolor;
Mylayer.bounds=cgrectmake (0, 0, 150, 100);
Show Location
Mylayer.position=cgpointmake (100, 100);
Mylayer.anchorpoint=cgpointzero;
mylayer.cornerradius=20;
Add Layers
[Self.view.layer Addsublayer:mylayer];
Self.layer=mylayer;
}

-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event
{
Implicit animation
Self.layer.bounds=cgrectmake (0, 0, 200, 60);
Self.layer.backgroundcolor=[uicolor Yellowcolor]. Cgcolor;
}
@end

Turn off implicit animation:

Copy Code code as follows:

[Catransaction begin];
[Catransaction Setdisableactions:yes];
Implicit animation
Self.layer.bounds=cgrectmake (0, 0, 200, 60);
Self.layer.backgroundcolor=[uicolor Yellowcolor]. Cgcolor;
[Catransaction commit];

How do I see if an attribute in Calayer supports implicit animation?

You can view the header file to see if there are any animatable, and if so, support it.

You can also view official documents

These attributes, as indicated in the document, are supported by implicit animation.

Custom Layer
One, the first way

1. Simple description

Before you want to draw something in view, you need to customize view, create a class to associate with it, let the class inherit from UIView, and then rewrite its drawrect: method, and then paint in the method.

To draw a graphic:
(1) Getting context
(2) Drawing graphics
(3) Rendering graphics

If you draw something on a layer, it is similar to the procedure above.
code example:
Creates a new class that inherits the class from the Calayer

YYMYLAYER.M file

Copy Code code as follows:

//
Yymylayer.m
05-Custom Layer (1)
//
Created by Apple on 14-6-21.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYMylayer.h"

@implementation Yymylayer
Override this method to draw a graphic inside the method
-(void) Drawincontext: (cgcontextref) CTX
{
1. Drawing graphics
Draw a Circle
Cgcontextaddellipseinrect (CTX, CGRectMake (50, 50, 100, 100));
Set properties (color)
[[Uicolor Yellowcolor]set];
Cgcontextsetrgbfillcolor (CTX, 0, 0, 1, 1);

2. Rendering
Cgcontextfillpath (CTX);
}
@end

Copy Code code as follows:

In the controller, create a custom class
//
Yyviewcontroller.m
05-Custom Layer (1)
//
Created by Apple on 14-6-21.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"
#import "YYMylayer.h"

@interface Yyviewcontroller ()

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

1. Create a custom layer
Yymylayer *layer=[yymylayer layer];
2. Set the layer properties
Layer.backgroundcolor=[uicolor Browncolor]. Cgcolor;
Layer.bounds=cgrectmake (0, 0, 200, 150);
Layer.anchorpoint=cgpointzero;
Layer.position=cgpointmake (100, 100);
layer.cornerradius=20;
Layer.shadowcolor=[uicolor Blackcolor]. Cgcolor;
Layer.shadowoffset=cgsizemake (10, 20);
layer.shadowopacity=0.6;

[Layer Setneedsdisplay];
3. Add Layer
[Self.view.layer Addsublayer:layer];

}

@end

Note the point:
(1) The default is colorless and will not be displayed. You also need to set the color of the graphic in order for the drawing to be displayed. Note You cannot directly use classes in the UI framework
(2) in the custom Layer-(void) Drawincontext: The method does not call itself, can only be called by itself through the Setneeddisplay method, painting in view DrawRect: The method is automatically called when the view is first displayed.
Implementation effect:

2. Expand
Drawing instructions in UIView

Copy Code code as follows:

#import "YYVIEW.h"

@implementation Yyview

-(void) DrawRect: (cgrect) rect
{
1. Getting context
Cgcontextref Ctx=uigraphicsgetcurrentcontext ();
2. Drawing graphics
Cgcontextaddellipseinrect (CTX, CGRectMake (50, 50, 100, 100));
Set properties (color)
[[Uicolor Yellowcolor]set];
Cgcontextsetrgbfillcolor (CTX, 0, 0, 1, 1);

3. Rendering
Cgcontextfillpath (CTX);
When performing a render operation, essentially its interior is equivalent to calling the following method
[Self.layer Drawincontext:ctx];
}

Description: Draws the graph in the UIView, obtains the context is this view corresponding layer context. In rendering, it is to render the graphics to the corresponding layer.

When performing a render operation, essentially its interior is equivalent to executing the [Self.layer drawincontext:ctx];

Second, two ways

Method Description: Sets the delegate of the Calayer and then lets delegate implement Drawlayer:incontext: method, when Calayer needs a drawing, the delegate Drawlayer:incontext is invoked: method to draw.

code example:

Copy Code code as follows:

//
Yyviewcontroller.m
06-Custom Layer (2)
//
Created by Apple on 14-6-21.
Copyright (c) 2014 itcase. All rights reserved.

#import "YYViewController.h"
@interface Yyviewcontroller ()
@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
    [super Viewdidload];
   //1. Create a custom layer
& nbsp;   calayer *layer=[calayer layer];
   //2. Set layer Properties
    layer.backgroundcolor=[uicolor Browncolor]. Cgcolor;
    layer.bounds=cgrectmake (0, 0, 200, 150);
    Layer.anchorpoint=cgpointzero;
    layer.position=cgpointmake (100, 100);
    layer.cornerradius=20;
    Layer.shadowcolor=[uicolor Blackcolor]. Cgcolor;
    Layer.shadowoffset=cgsizemake (10, 20);
    layer.shadowopacity=0.6;
   
   //settings Agent
    layer.delegate=self
     [Layer Setneedsdisplay];
   //3. Add Layer
    [Self.view.layer addsublayer:layer];
}

-(void) Drawlayer: (Calayer *) layer Incontext: (cgcontextref) CTX
{
1. Drawing graphics
Draw a Circle
Cgcontextaddellipseinrect (CTX, CGRectMake (50, 50, 100, 100));
Set properties (color)
[[Uicolor Yellowcolor]set];
Cgcontextsetrgbfillcolor (CTX, 0, 0, 1, 1);

2. Rendering
Cgcontextfillpath (CTX);
}
@end

Implementation effect:

Note: You can no longer set a uiview to Calayer delegate, because the UIView object is already the delegate of its internal root layer, and the delegate that is set to another layer is problematic.

When setting up a proxy, it does not require us to comply with the protocol, stating that this method is nsobject and that no additional display of compliance is required.

Hint: If you want to set up a proxy for a class later, but the agent does not require us to comply with any particular protocol, then we can assume that the protocol method is nsobject inside.
&NBSP
Third, supplemental note
(1) Whichever method you take to customize the layer, you must call the Calayer Setneedsdisplay method to properly draw.
(2) The detailed reality process:
When UIView needs to be displayed, the layer inside it prepares a cgcontextref (graphics context) and then invokes the Drawlayer:incontext of delegate (here is UIView): method, and pass in the prepared Cgcontextref object. and UIView in the Drawlayer:incontext: method will call its own DrawRect: method. Usually in DrawRect: in the Uigraphicsgetcurrentcontext () is obtained by the layer in the Cgcontextref object, in DrawRect: Completed all the drawings will be filled in the layer of cgcontextref, It is then copied to the screen.