iOS Development UI Chapter-calayer Introduction

first, Brief introduction

In iOS, what you can see and touch is basically uiview, such as a button, a text label, a text input box, an icon, and so on, all of which are uiview.

In fact, UIView can be displayed on the screen entirely because of a layer inside it, when the UIView object is created, a layer (that is, Calayer object) is automatically created inside the UIView, which can be accessed through the Layer property of UIView

@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, and after the drawing is finished, the layer is copied to the screen, so the display of the UIView is completed.

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

Second, simple use

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

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

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

1 #import "YYViewController.h" 2  3 @interface Yyviewcontroller () 4 @property (weak, nonatomic) Iboutlet UIView *custo MView; 5  6 @end 7  8 @implementation Yyviewcontroller 9-(void) ViewDidLoad11 {     [super viewdidload];13     // Set the width of the border to     self.customview.layer.borderwidth=20;15     //Set the color of the border     Self.customView.layer.borderColor =[uicolor Greencolor]. Cgcolor;17}18 @end

　　

2. Set the border to rounded corners through a layer

1     //Set the fillet of Layer 2     self.customview.layer.cornerradius=20;

3. Add a picture on the layer

1 #import "YYViewController.h" 2  3 @interface Yyviewcontroller () 4 @property (weak, nonatomic) Iboutlet UIView *custo MView; 5  6 @end 7  8 @implementation Yyviewcontroller 9-(void) ViewDidLoad11 {     [super viewdidload];13     // Set the width of the border to     self.customview.layer.borderwidth=5;15     //Set the color of the border     self.customview.layer.bordercolor= [Uicolor Blackcolor]. CGCOLOR;17     //Set the fillet of layer     self.customview.layer.cornerradius=20;20     // Add a image,contents on the view's layer to accept the content     self.customview.layer.contents= (id) [UIImage imagenamed:@ "Me"]. cgimage;23     }25 @end

Description: Contents is the ID type, can accept the content, the above instance let layer display a picture, careful observation can find four rounded corners of the part of the open a corner out.

Explanation of Cause:

The root layer on the CustomView

Layers of UIImage

After adding

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

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

1-(void) Viewdidload 2 {3     [Super Viewdidload]; 4     //Set border width of 5     self.customview.layer.borderwidth=5; 6     //Set the color of the border 7     Self.customview.layer.bordercolor=[uicolor Blackcolor]. Cgcolor; 8      9     //Set the fillet of layer     self.customview.layer.cornerradius=20;11     //Set the portion of the layer beyond the sublayer cut off     Methods used in the UI Framework//    self.customview.clipstobounds=yes;14     self.customview.layer.maskstobounds=yes;15     +     //Add a image,contents on the view's layer to accept the content     self.customview.layer.contents= (id) [UIImage imagenamed:@ "Me" ]. CGIMAGE;18}

Note: You cannot directly accept anything in the UI frame in a layer

4. Setting shadows

Set the shadow, not only the shadow color, but also the offset and transparency of the shadow.

Because if the offset is not set, then the shadow and layer are completely overlapping, and the default transparency is 0 (that is, completely transparent).

1-(void) Viewdidload 2 {3     [Super Viewdidload]; 4      5     //Set shadow color 6     self.customview.layer.shadowcolor=[ Uicolor Blackcolor]. Cgcolor; 7     //sets the offset of the shadow, if positive, represents the offset to the right 8     self.customview.layer.shadowoffset=cgsizemake (5); 9     //sets the transparency of the shadow (0~ 1, 0 is fully transparent)     self.customview.layer.shadowopacity=0.6;11}

Supplemental NOTE: If you set a portion of the main layer to be removed, the shadow will not be displayed.

1-(void) Viewdidload 2 {3     [Super Viewdidload]; 4      5     //Set Border width is 6     self.customview.layer.borderwidth= 5; 7     //Set the color of the Border 8     Self.customview.layer.bordercolor=[uicolor Blackcolor]. Cgcolor; 9     //Set the fillet of layer one by one     self.customview.layer.cornerradius=20;12     //Set the portion of the layer beyond the sublayer to be cut off     // Methods used in the UI Framework     //    self.customview.clipstobounds=yes;15     self.customview.layer.maskstobounds=yes;16     +     //Add a image,contents on the view layer to accept the content     self.customview.layer.contents= (id) [UIImage imagenamed : @ "Me"]. cgimage;19     //Set the color of the shadow     Self.customview.layer.shadowcolor=[uicolor Blackcolor]. Cgcolor;22     //sets the offset of the shadow, if positive, represents the offset to the right of the     Self.customview.layer.shadowoffset=cgsizemake (5);     Set the transparency of the shadow (between 0~1, 0 is completely transparent)     self.customview.layer.shadowopacity=0.6;26}

　　

The effect of annotating code that cuts out of the main layer section

1-(void) Viewdidload 2 {3     [Super Viewdidload]; 4      5     //Set Border width is 6     self.customview.layer.borderwidth= 5; 7     //Set the color of the Border 8     Self.customview.layer.bordercolor=[uicolor Blackcolor]. Cgcolor; 9     //Set the fillet of layer one by one     self.customview.layer.cornerradius=20;12     //Set the portion of the layer beyond the sublayer to be cut off     // Methods used in the UI Framework     ://    self.customview.clipstobounds=yes;15//    Self.customview.layer.maskstobounds=yes; +     //Add a image,contents on the view layer to accept the content     self.customview.layer.contents= (id) [UIImage imagenamed:@ "Me"]. cgimage;19     //Set the color of the shadow     Self.customview.layer.shadowcolor=[uicolor Blackcolor]. Cgcolor;22     //sets the offset of the shadow, if positive, represents the offset to the right of the     Self.customview.layer.shadowoffset=cgsizemake (5);     Set the transparency of the shadow (between 0~1, 0 is completely transparent)     self.customview.layer.shadowopacity=0.6;26}

5. As long as the inherited from UIView has a layer attribute, the following is illustrated in the picture as an example.

Add a new picture in storyboard.

Simple Setup Example

1 #import "YYViewController.h" 2  3 @interface Yyviewcontroller () 4 @property (weak, nonatomic) Iboutlet UIView *custo MView; 5 @property (weak, nonatomic) Iboutlet Uiimageview *iconview; 6  7 @end 8  9 @implementation YYViewController10-(void) viewDidLoad12 {     [super viewdidload];14     15< c5/>//set the border width and color of the picture layer     Self.iconview.layer.bordercolor=[uicolor Browncolor]. cgcolor;17     self.iconview.layer.borderwidth=5;18     //Set the fillet     of layer SELF.ICONVIEW.LAYER.CORNERRADIUS=20;21     //sets the portion of the sub-layer to be cut off by        self.iconview.layer.maskstobounds=yes;23}

Set the Bounds property to remove the automatic layout properties from the storyboard when set.

Set the deformation properties of a picture (transform)

1 @implementation Yyviewcontroller 2  3-(void) Viewdidload 4 {5     [super Viewdidload]; 6} 7  8-(void) touchesbe Gan: (Nsset *) touches withevent: (Uievent *) Event 9 {Ten     //via UIView settings (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); 15}

Set with UIView (2D effect)

Through layer settings (3D effect)

Setting with KVC

1 #import "YYViewController.h" 2  3 @interface Yyviewcontroller () 4 @property (weak, nonatomic) Iboutlet UIView *custo MView; 5 @property (weak, nonatomic) Iboutlet Uiimageview *iconview; 6  7 @end 8  9 @implementation YYViewController10-(void) viewDidLoad12 {     [Super viewdidload];14}15-(v OID) Touchesbegan: (Nsset *) touches withevent: (uievent *) event17 {//     via UIView settings (2D effect)//    Self.iconview.transform=cgaffinetransformmaketranslation (0, -100);/     /    set by layer (3D effect, x, Y, z three directions) Self.iconview.layer.transform=catransform3dmaketranslation (0),     //KVC to set the     nsvalue *v =[nsvalue valuewithcatransform3d:catransform3dmaketranslation (0)];26     [Self.iconView.layer setvalue:v forkeypath:@ "Transform"];27     //If it is only necessary to set the movement in a certain direction, you can refer to the code below     //To move to the left in the direction of x 10029     [ Self.iconView.layer setvalue:@ ( -100) forkeypath:@ "transform.translation.x"];30}

To view Apple's official documentation, the following properties can be set through KVC.

Rotate one Radian

1 @implementation Yyviewcontroller 2  3-(void) Viewdidload 4 {5     [super Viewdidload]; 6} 7  8-(void) touchesbe Gan: (Nsset *) touches withevent: (Uievent *) Event 9 {Ten     //via UIView settings (2D effect)//    self.iconview.transform= Cgaffinetransformmaketranslation (0, -100);/     /    set by layer (3D effect, x, Y, z three directions) Self.iconview.layer.transform=catransform3dmaketranslation (0), +/     /KVC to set up//    Nsvalue * V=[nsvalue valuewithcatransform3d:catransform3dmaketranslation (0)];18//    [Self.iconView.layer Setvalue:v forkeypath:@ "Transform"];19////    If you only need to set the movement in one Direction, you can refer to the code below////move to the    left in the direction of X 10021//    [Self.iconView.layer setvalue:@ ( -100) forkeypath:@ "transform.translation.x"];22     //Rotary     Self.iconview.layer.transform=catransform3dmakerotation (M_pi_4, 1, 1, 0.5); 25}

Supplemental: three-dimensional coordinate system

iOS Development UI Chapter-calayer Introduction