iOS Development UI Chapter-calayer (Create Layer)
One, add a layer
Steps to add a layer:
1. Create Layer2. Set the properties of the layer (color is set, bounds can be displayed) 3. Add a layer to the interface (on the layer of the Controller view)
1//2// YYVIEWCONTROLLER.M 3// 01-Create a simple layer 4//5// Created by Apple on 14-6-21.6// Copyright (c) 2 014 Years itcase. All rights reserved. 7//8 9 #import "YYViewController.h" @interface Yyviewcontroller () @end14 @implementation Yyviewcontrol Ler16-(void) viewDidLoad18 { [super viewdidload];20] //1. Create a layer22 // Use object method to create 23 // Calayer *layer=[[calayer alloc]init];24 //Use the class method to create a *layer=[calayer of calayer layer];26//2 . Set the properties of the layer (be sure to set the position, the color properties can be displayed) Layer.backgroundcolor=[uicolor Browncolor]. cgcolor;29 layer.bounds=cgrectmake (0, 0, 32), Layer.position=cgpointmake (+); //3. Adding a layer to the interface [Self.view.layer addsublayer:layer];34}35 @end
Second, add a layer to display the picture
code example:
1//2// YYVIEWCONTROLLER.M 3// 02-Add a layer showing pictures 4//5// Created by Apple on 14-6-21.6// Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYViewController.h" @interface Yyviewcontroller () @end14 @implementation Yyviewcontrol Ler16-(void) viewDidLoad18 { [super viewdidload];20 //Create a LAYER21 calayer *mylayer=[calayer layer]; //Set the properties of the layer at Mylayer.bounds=cgrectmake (+, +, + ); mylayer.position=cgpointmake (100, +/ /Set the picture to be displayed mylayer.contents= (ID) [UIImage imagenamed:@ "Me"]. CGIMAGE;28 //Set the fillet radius to 1029 mylayer.cornerradius=10;30 //If the picture is set, you need to set this property to Yes to show the fillet effect MYLAYER.MASKSTOBOUNDS=YES;32 //Set Border mylayer.borderwidth=3;34 Mylayer.bordercolor=[uicolor Browncolor]. cgcolor;35 //Add layer to interface [Self.view.layer addsublayer:mylayer];38}39 @end
Execution effect:
Description: In line 27th set the picture to be displayed, note that the UIImage cgimage attribute is used here, is a cgimageref type of data
Third, cgcolorref and cgimageref data types
1. Brief description
Calayer is defined in the Quartzcore framework; cgimageref, cgcolorref two data types are defined in the Coregraphics framework; Uicolor, uiimage are defined in the Uikit framework.
Second, the Quartzcore framework and the Coregraphics framework are available across platforms and can be used on both iOS and Mac OS x, but Uikit can only be used in iOS
Therefore, in order to ensure portability, quartzcore can not use UIImage, Uicolor, can only use Cgimageref, Cgcolorref
However, in many cases, the Coregraphics object can be obtained by Uikit the specific method of the object, such as UIImage Cgimage method can return a cgimageref
2. Import the Quartzcore framework
It is no longer necessary for us to import this framework in XCODE5, if we need to import the framework before IOS6 and XCODE4
(1) Click on the project name and click on the right targets below target
(2) After clicking on Build pases, expand link Binary ...., add + sign
(3) Enter "Quartz" in the search box, check quartzcore.framework, and add
(4) Once added, this frame will appear in the project folder
Finally, you need to import the framework's main header file in your project code.
#import <QuartzCore/QuartzCore.h>
Iv. selection of UIView and Calayer
You can see that the previous 2 effects can be implemented not only by adding layers, but also by adding uiview. The layer that displays the picture can be implemented with a uiimageview. Since Calayer and UIView all can achieve the same display effect, then who should choose who is good?
In fact, compared with the Calayer,uiview more than one event processing function. In other words, Calayer cannot handle user touch events, while UIView can.
Therefore, in the process of selection, you need to take into account the actual situation, if the displayed things need to interact with the user, with UIView, if you do not need to interact with the user, with UIView or Calayer can
Of course, the performance of Calayer is higher because it is less capable of event handling and more lightweight
V. Additional Information
1. Adding a child layer
1 #import "YYViewController.h" 2 3 @interface Yyviewcontroller () 4 5 @end 6 7 @implementation Yyviewcontroll ER 8 9-(void) VIEWDIDLOAD10 {one [super viewdidload];12 ] NSLog (@ "star-%@", self.view.layer.sublayers) //1. Create a LAYER15// Use object method to create a // Calayer *layer=[[calayer ALLOC]INIT];17 //Use the class method to create a calayer *layer=[calayer layer];19 //2. Set the properties of the layer (be sure to set the position, Color properties can be displayed) Layer.backgroundcolor=[uicolor Browncolor]. cgcolor;22 layer.bounds=cgrectmake (0, 0, V, +), Layer.position=cgpointmake (+ 25); //3. Adding a layer to the interface [Self.view.layer addsublayer:layer];27 NSLog (@ "end-%@", self.view.layer.sublayers); 29}
The printing results are as follows:
Note: Before adding a layer, the Controller view layer has two sub-layers, and after adding, there are three sub-layers.
2. Access Layer
1-(void) Viewdidload 2 {3 [Super Viewdidload]; 4 5 calayer *layer=[calayer layer]; 6 Layer.backgroundcolor=[uicolor Browncolor]. Cgcolor; 7 layer.bounds=cgrectmake (0, 0, 9), 8 layer.position=cgpointmake (+); Self.view.layer addsublayer:layer];11 //calayer Access all sub-layers via the Sublayers property (@ "NSLog", SELF.VIEW.LAYER.SUBLAYERS[2]); NSLog (@ "%@", layer); //calayer can also access the parent layer through the Superlayer property 16 NSLog (@ "%@", Layer.superlayer); NSLog (@ "%@", Self.view.layer); 18}
UIView can access all sub-views through the Subviews property, similarly, Calayer can access all child layers through the Sublayers property
UIView can access the parent view through the Superview property, similarly, Calayer can also access the parent layer through the Superlayer property
3. Note
In storyboard, drag a button on the interface to print the number of child layers.
1-(void) Viewdidload 2 {3 [Super Viewdidload]; 4 5 calayer *layer=[calayer layer]; 6 Layer.backgroundcolor=[uicolor Browncolor]. Cgcolor; 7 layer.bounds=cgrectmake (0, 0, 9), 8 layer.position=cgpointmake (+); Self.view.layer addsublayer:layer];11 //Print all Layer12 NSLog (@ "%@", self.view.layer.sublayers); 13}
The printing results are as follows:
Special NOTE: If one control is a child of another control, the layer of the control is also a child layer of the other control.
iOS Development UI Chapter-calayer (Create Layer)