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< c6/>//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
Original address: http://www.cnblogs.com/wendingding/p/3800010.html
iOS Development UI Chapter-calayer Introduction