Basic tutorials for Calayer use in IOS development _ios

First, a brief introduction
what you can see in iOS is basically uiview, such as a button, a text label, a text entry box, an icon, and so on, all of which are uiview.

In fact, UIView can be displayed on the screen, because it is a layer inside, when creating UIView objects, UIView automatically create a layer (that is, Calayer object), through the UIView layer properties can access this layer

@property (Nonatomic,readonly,retain) Calayer *layer;

When UIView needs to be displayed on the screen, the DrawRect: method is called to draw and all the content is drawn on its own layer, the system copies the layer to the screen when the drawing is finished, and the UIView is displayed.

In other words, the UIView itself does not have a display function, and the display is the layer inside it.

Calayer is included in the Quartzcore framework, a cross-platform framework that can be used both in iOS and in Mac OS X. The essence of developing animation using core animation is to convert the contents of Calayer into bitmaps for hardware operation, so it is necessary to familiarize yourself with the Calayer in order to master the animation operation.

UIView is the basis of interface elements in iOS systems, and all interface elements are inherited from it. It is entirely implemented by coreanimation (it seems not to be the case with Macs). Its real drawing part is managed by a class called Calayer (Core Animation Layer). The UIView itself, more like a Calayer manager, accesses its drawing and coordinates-related attributes, such as Frame,bounds, which are actually internally accessing the associated properties of the Calayer it contains.

Calayer in iOS is designed primarily for content display and animation operations, Calayer itself is not included in the Uikit, it does not respond to events. Because Calayer at the beginning of design to consider its animation operation function, Calayer many properties in the modification can form animation effect, this property is called "Implicit animation properties." But for the root layer of uiview, the modification of the property does not animate, because in many cases the root layer acts more as a container, and if its property changes are animated, it directly affects the child layer. In addition, the UIView root layer creation work is entirely done by iOS and cannot be recreated, but you can add a child layer to the root layer or remove the sublayer.

Second, simple use

UIView can be displayed solely because of the internal Calayer object. Therefore, by manipulating this Calayer object, you can easily adjust some of the interface properties of UIView, such as shadow, fillet size, border width, and color.

Create a new item and add a view to the storyboard.

1. Set the width and color of the border by layer

Copy Code code as follows:

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Weak, nonatomic) Iboutlet UIView *customview;

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];
Set the width of the border to 20
self.customview.layer.borderwidth=20;
Set the color of a border
Self.customview.layer.bordercolor=[uicolor Greencolor]. Cgcolor;
}

@end

2. Set the border to fillet by layer

Copy Code code as follows:

Set the rounded corners of the layer
self.customview.layer.cornerradius=20;

3. Add a picture to the layer

Copy Code code as follows:

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Weak, nonatomic) Iboutlet UIView *customview;

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];
Set the width of the border to 20
self.customview.layer.borderwidth=5;
Set the color of a border
Self.customview.layer.bordercolor=[uicolor Blackcolor]. Cgcolor;

Set the rounded corners of the layer
self.customview.layer.cornerradius=20;

Add a image,contents on the view's layer to accept content
self.customview.layer.contents= (ID) [UIImage imagenamed:@ "Me"]. Cgimage;

}
@end

Description: Contents is the ID type, you can accept the content, the above example let layer display a picture, careful observation can be found that four rounded corners of the part of a corner out.

The reason for the cause:

The root layer on the CustomView

UIImage Layer

After adding

That's because the image you set is not displayed on the main layer, but on the child layer. You can cut off the part of the main layer by setting a range.

The following two methods are recommended to use the method in layer (the second type) Self.customview.layer.maskstobounds=yes;

Copy Code code as follows:

-(void) viewdidload
{
[Super Viewdidload];
Set the width of the border to 20
self.customview.layer.borderwidth=5;
Set the color of a border
Self.customview.layer.bordercolor=[uicolor Blackcolor]. Cgcolor;

Set the rounded corners of the layer
self.customview.layer.cornerradius=20;
Set the portion of more than the child layer cut off
Methods used in the UI framework
Self.customview.clipstobounds=yes;
Self.customview.layer.maskstobounds=yes;

Add a image,contents on the view's layer to accept content
self.customview.layer.contents= (ID) [UIImage imagenamed:@ "Me"]. Cgimage;
}

Note: You cannot directly accept things in the UI frame in layer

4. Setting shadows

To set a shadow, you should not only set the shadow color, but also set the shadow shift and transparency.

Because if you do not set a bias shift, the shadow and layer completely overlap, and the default transparency is 0 (that is, fully transparent).

Copy Code code as follows:

-(void) viewdidload
{
[Super Viewdidload];

Set the color of the shadow
Self.customview.layer.shadowcolor=[uicolor Blackcolor]. Cgcolor;
Sets the offset of the shadow, or, if it is a positive number, the offset to the right
Self.customview.layer.shadowoffset=cgsizemake (15, 5);
Set the opacity of the shadow (between 0~1, 0 means fully transparent)
self.customview.layer.shadowopacity=0.6;
}

Supplemental NOTE: If you set a portion that is more than the main layer to be dropped, setting the shadow will not have a display effect. \

Copy Code code as follows:

-(void) viewdidload
{
[Super Viewdidload];

Set the width of the border to 20
self.customview.layer.borderwidth=5;
Set the color of a border
Self.customview.layer.bordercolor=[uicolor Blackcolor]. Cgcolor;

Set the rounded corners of the layer
self.customview.layer.cornerradius=20;
Set the portion of more than the child layer cut off
Methods used in the UI framework
Self.customview.clipstobounds=yes;
Self.customview.layer.maskstobounds=yes;

Add a image,contents on the view's layer to accept content
self.customview.layer.contents= (ID) [UIImage imagenamed:@ "Me"]. Cgimage;

Set the color of the shadow
Self.customview.layer.shadowcolor=[uicolor Blackcolor]. Cgcolor;
Sets the offset of the shadow, or, if it is a positive number, the offset to the right
Self.customview.layer.shadowoffset=cgsizemake (15, 5);
Set the opacity of the shadow (between 0~1, 0 means fully transparent)
self.customview.layer.shadowopacity=0.6;
}

The display of the code that has been cut beyond the main layer part is commented out

Copy Code code as follows:

-(void) viewdidload
{
[Super Viewdidload];

Set the width of the border to 20
self.customview.layer.borderwidth=5;
Set the color of a border
Self.customview.layer.bordercolor=[uicolor Blackcolor]. Cgcolor;

Set the rounded corners of the layer
self.customview.layer.cornerradius=20;
Set the portion of more than the child layer cut off
Methods used in the UI framework
Self.customview.clipstobounds=yes;
Self.customview.layer.maskstobounds=yes;

Add a image,contents on the view's layer to accept content
self.customview.layer.contents= (ID) [UIImage imagenamed:@ "Me"]. Cgimage;

Set the color of the shadow
Self.customview.layer.shadowcolor=[uicolor Blackcolor]. Cgcolor;
Sets the offset of the shadow, or, if it is a positive number, the offset to the right
Self.customview.layer.shadowoffset=cgsizemake (15, 5);
Set the opacity of the shadow (between 0~1, 0 means fully transparent)
self.customview.layer.shadowopacity=0.6;
}

5. As long as the inherited from the UIView have layer attributes, the following picture as an example to illustrate.

Add a new picture to the storyboard.

Simple Setup Example

Copy Code code as follows:

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Weak, nonatomic) Iboutlet UIView *customview;
@property (Weak, nonatomic) Iboutlet Uiimageview *iconview;

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

Set the border width and color of a picture layer
Self.iconview.layer.bordercolor=[uicolor Browncolor]. Cgcolor;
self.iconview.layer.borderwidth=5;

Set the rounded corners of the layer
self.iconview.layer.cornerradius=20;
Set the portion of more than the child layer cut off
Self.iconview.layer.maskstobounds=yes;
}

Set the Bounds property, you need to remove the automatic layout properties in storyboard when setting.

Set the deformation properties of a picture (transform)

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];
}

-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event
{

Set by UIView (2D effect)
Self.iconview.transform=cgaffinetransformmaketranslation (0,-100);
Set by layer (3D effect, x,y,z three directions)
Self.iconview.layer.transform=catransform3dmaketranslation (100, 20, 0);
}

Set by UIView (2D effect)

Set by layer (3D effect)

Using KVC to set up

Copy Code code as follows:

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Weak, nonatomic) Iboutlet UIView *customview;
@property (Weak, nonatomic) Iboutlet Uiimageview *iconview;

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
& nbsp;   [Super Viewdidload];
}

-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event
{

   //through Uivi EW settings (2D effect)
//    self.iconview.transform=cgaffinetransformmaketranslation (0, -100);
    //through layer to set (3D effect, x,y,z three directions)
//    self.iconview.layer.transform= Catransform3dmaketranslation (100, 20, 0);
   
   //Set
    nsvalue *v=[nsvalue by KVC Valuewithcatransform3d:catransform3dmaketranslation (100, 20, 0)];
    [Self.iconView.layer setvalue:v forkeypath:@ "transform"];
   //If you only need to set a move in a certain direction, you can refer to the following code
   //move to the left in the direction of X
     [Self.iconView.layer setvalue:@ ( -100) forkeypath:@ "transform.translation.x"];
}

Look at Apple's official documentation, and the following properties can be set by KVC.

Rotate a Radian

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];
}

-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event
{

Set by UIView (2D effect)
Self.iconview.transform=cgaffinetransformmaketranslation (0,-100);
Set by layer (3D effect, x,y,z three directions)
Self.iconview.layer.transform=catransform3dmaketranslation (100, 20, 0);

Set by KVC
Nsvalue *v=[nsvalue valuewithcatransform3d:catransform3dmaketranslation (100, 20, 0)];
[Self.iconView.layer setvalue:v forkeypath:@ "transform"];
If you only need to set the move in a certain direction, you can refer to the following code
Move 100 to the left in the direction of X
[Self.iconView.layer setvalue:@ ( -100) forkeypath:@ "transform.translation.x"];

Rotating
Self.iconview.layer.transform=catransform3dmakerotation (M_pi_4, 1, 1, 0.5);
}

Add: three-dimensional coordinate system