Cat learning IOS () UI-CALayer, iosuicalayer

Cat learning IOS () UI-CALayer, iosuicalayer

CAT/CAT sharing, must be excellent

For Original Articles, please reprint them. Reprinted Please note: Yan Nai-yu's blog
Http://blog.csdn.net/u013357243? Viewmode = contents

CALayer

In iOS, what you can see is basically a UIView, such as a button, a text tag, a text input box, and an icon. These are all uiviews.

In fact, the reason why UIView can be displayed on the screen is that it has a layer inside it.

When a UIView object is created, a layer (CALayer object) is automatically created in the UIView, which can be accessed through the layer attribute of the UIView.

@property(nonatomic,readonly,retain) CALayer *layer; 

When UIView needs to be displayed on the screen, it will call the drawRect: Method for drawing, and all content will be drawn on its own layer. After the drawing is complete, the system copies the layer to the screen, so the UIView is displayed.

In other words, UIView itself does not have the display function. It only has the display function in its internal CAlayer layer.

Basic use of CALayer

By operating the CALayer object, you can easily adjust the appearance attributes of the UIView, such:

Border Width and color

// Set the layer border self. customView. layer. borderWidth = 10; // set the layer border color self. customView. layer. borderColor = [UIColor greenColor]. CGColor;

Rounded corner size

// Set the rounded corner of the layer (set the rounded corner of the main layer) self. customView. layer. cornerRadius = 10;

However, if you set the image, it will be like this: The color bug on the four corners

// The set image is not displayed on the primary layer, but on the child layer. customView. layer. contents = (id) [UIImage imageNamed: @ "cat"]. CGImage;

The reason is that the rounded corner we set is in the main view on the layer, and the picture is placed in the subview.

Solution: cut out the part that exceeds the main layer.

// Cut out the part that exceeds the main layer (both methods are acceptable) // self. customView. clipsToBounds = YES; // self. customView. layer. masksToBounds = YES;

After solution:
Effect:

The white on the four corners disappears.
Code:

-(Void) viewDidLoad {[super viewDidLoad]; // sets the layer border self. customView. layer. borderWidth = 10; // set the layer border color self. customView. layer. borderColor = [UIColor greenColor]. CGColor; // sets the rounded corner of the layer (sets the rounded corner of the main layer) self. customView. layer. cornerRadius = 10; // you can specify that the part of the main layer is exceeded. customView. layer. masksToBounds = YES; // The set image is not displayed on the primary layer, but on the child layer. customView. layer. contents = (id) [UIImage imageNamed: @ "cat"]. CGImage ;}

Shadow

Effect:

The corner is shown because I have commented out the code that has been cut out of the main layer.
Because the shadow is outside the main view, the Shadow cannot be displayed without comments.
Solution:
There is no way to use this code. Let's discuss it with the artist mm...
Code:

-(Void) viewDidLoad {[super viewDidLoad]; // sets the layer border self. customView. layer. borderWidth = 10; // set the layer border color self. customView. layer. borderColor = [UIColor greenColor]. CGColor; // sets the rounded corner of the layer (sets the rounded corner of the main layer) self. customView. layer. cornerRadius = 10; // set to cut out the part of the main layer. // self. customView. layer. masksToBounds = YES; // The set image is not displayed on the primary layer, but on the child layer. customView. layer. contents = (id) [UIImage imageNamed: @ "cat"]. C GImage; // set the shadow color self. customView. layer. shadowColor = [UIColor purpleColor]. CGColor; // sets the shadow offset. // if the value is positive, the shadow offset self is shifted to the right. customView. layer. shadowOffset = CGSizeMake (10, 10); // set the shadow transparency to 0 ~ 1 1 completely opaque 0 completely transparent self. customView. layer. shadowOpacity = 1 ;}

You can also add animations to layers to achieve some cool effects.

Basic Attributes of CALayer

Width and height

@property CGRect bounds;

Location (default value: midpoint, determined by anchorPoint)

@property CGPoint position;

The anchor (the range of x and y is 0-1) determines the meaning of position.

@property CGPoint anchorPoint;

Background color (CGColorRef type)

@property CGColorRef backgroundColor;

Deformation Property

@property CATransform3D transform;

Border color (CGColorRef type)

@property CGColorRef borderColor;

Border Width

@property CGFloat borderWidth;

Rounded corner radius

@property CGColorRef borderColor;

Content (for example, set it to image CGImageRef)

@property(retain) id contents;

XYZ axis

The relationship between CALayer and UIView

1. First
CALayer is defined in the QuartzCore framework
CGImageRef and CGColorRef are defined in CoreGraphics framework.
UIColor and UIImage are defined in the UIKit framework.

2. Second
The QuartzCore and CoreGraphics frameworks can be used across platforms, both iOS and Mac OS X.
However, UIKit can only be used in iOS

To ensure portability, QuartzCore cannot use UIImage or UIColor. Only CGImageRef and CGColorRef can be used.

UIView and CALayer Selection

With CALayer, you can make the same interface effect as UIImageView.

Since CALayer and UIView can achieve the same display effect, who should I choose?
In fact, compared with CALayer, UIView has an additional event processing function. That is to say, CALayer cannot process user touch events, while UIView can
Therefore, if the displayed items need to interact with users, use UIView. If you do not need to interact with users, use UIView or CALayer.
Of course, CALayer has higher performance because it lacks the event processing function and is more lightweight.

Roles of position and anchorPoint

CALayer has two important attributes: position and anchorPoint.

@property CGPoint position;

Used to set the location of CALayer in the parent layer
Starting from the upper left corner of the parent layer (0, 0)

@property CGPoint anchorPoint;

It is called "positioning point" and "anchor"
Determines the position indicated by the position attribute of CALayer.
Use your own upper left corner as the origin (0, 0)
The value range of x and y is 0 to 0 ~ 1. The default value is (0.5, 0.5)

Add a red layer to the green Layer

The position to which the red layer is displayed depends on the position attribute.

CALayer implicit Animation

Each UIView is associated with a CALayer by default. We can call this Layer as the Root Layer)

All non-Root layers, that is, manually created CALayer objects, all have implicit animations.

What is implicit animation?
When some attributes of a non-Root Layer are modified, some animation effects are automatically generated by default.
These attributes are called animation Properties)

List several common Animatable Properties:
Bounds: used to set the width and height of CALayer. Modifying this attribute will produce a scaling animation.
BackgroundColor: used to set the background color of CALayer. Modifying this attribute will produce a gradient animation of the background color.
Position: used to set the location of CALayer. Modifying this attribute produces a translation animation.

You can disable the default implicit animation effect through an animation transaction (CATransaction ).

[CATransaction begin];[CATransaction setDisableActions:YES];self.myview.layer.position = CGPointMake(10, 10);[CATransaction commit];