Simple introduction and use examples of UI advanced--calayer

Calayer:

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 you create a UIView object, a layer (that is, the Calayer object) is automatically created inside UIView, which can be accessed through the Layer property of the UIView.

1 @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 UIView is displayed. In other words, the UIView itself does not have the ability to display, it is the inner layer of the display function.

About Calayer Details:

First of all
Calayer is defined in the Quartzcore framework.
Cgimageref, cgcolorref Two types of data are defined in the Coregraphics framework.
Uicolor, uiimage are defined in the Uikit framework.
Secondly
The Quartzcore framework and 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
In order to ensure portability, Quartzcore cannot use UIImage, Uicolor, can only use Cgimageref, Cgcolorref

UIView and Calayer options:

By Calayer, you can make the same interface effect as 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, and UIView can
So, 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

Properties of the Calayer:

//Width and Height@property cgrect bounds;//location (default midpoint, determined by Anchorpoint)@property cgpoint position;//The anchor Point (x, y range is 0-1), which determines the meaning of the position@property cgpoint anchorpoint;//Background color (cgcolorref type)@property cgcolorref backgroundcolor;//Deformation Properties@property Catransform3d transform;//Border Color (cgcolorref type)@property cgcolorref bordercolor;//Border Width@property cgfloat borderWidth;//Fillet radius@property cgcolorref Cornerradius;//content (e.g. set as Picture cgimageref)@property (Retain)IDContents

Calayer has 2 very important properties: position and Anchorpoint

@property cgpoint position;

Used to set the position of the Calayer in the parent layer
The upper left corner of the parent layer is the origin (0, 0).

@property Cgpoint Anchorpoint;

Known as Anchor Point, Anchor Point
Determines which point of the calayer is in the position indicated by the position attribute
In its own upper left corner as the origin (0, 0)
Its x, y range is 0~1, the default value is (0.5, 0.5)
Diagram Description:

Anchorpoint

It has a value of 0~1

The anchorpoint of the Red layer is (0,0)

The anchorpoint of the Red layer is (0.5,0.5)

The anchorpoint of the Red layer is (

The anchorpoint of the Red layer is (0.5,0)

Position and Anchorpoint

Add a red layer to the green layer, where the red layer appears, determined by the Position property

Suppose the position of the red layer is (100,100)

Exactly which point of the red layer is moved to (100,100) The coordinate position, the anchor point.

The anchor point of the red layer is (0,0)

The anchor point of the red layer is (0.5,0.5)

The anchor point of the red layer is (

The anchor point of the red layer is (0.5,0)

Basic examples of code used:

1 //2 //uiimage+jw.h3 //basic use of layers4 //5 //Created by Xiaomoge on 15-1-5.6 //Copyright (c) 2015 Xiaomoge. All rights reserved.7 //8 9 #import<UIKit/UIKit.h>Ten  One @interfaceUIImage (JW) A  - //take a picture, crop it to a rounded effect, fillet size, border, border color new picture -+ (UIImage *) Cornerimagewithimagename: (NSString *) imageName Cornerradius: (cgfloat) Cornerradius borderWidth: (cgfloat ) BorderWidth bordercolor: (Uicolor *) bordercolor; the  - @end

1 //2 //uiimage+jw.m3 //basic use of layers4 //5 //Created by Xiaomoge on 15-1-5.6 //Copyright (c) 2015 Xiaomoge. All rights reserved.7 //8 9 #import "uiimage+jw.h"Ten  One @implementationUIImage (JW) A  -+ (UIImage *) Cornerimagewithimagename: (NSString *) imageName Cornerradius: (cgfloat) Cornerradius borderWidth: (cgfloat ) BorderWidth bordercolor: (Uicolor *) bordercolor{ -  theUIImage *sourceimage =[UIImage imagenamed:imagename]; -     //To open a bitmap context -Uigraphicsbeginimagecontextwithoptions (Sourceimage.size, NO,0.0); -     //draw a picture in the bitmap context +  -     //The picture is cropped to have rounded corners +Calayer *layer =[Calayer layer]; A      at     //Layer Setting Size -Layer.bounds = CGRectMake (0,0, SourceImage.size.width, sourceImage.size.height); -      -     //Set Content -Layer.contents = (ID) Sourceimage.cgimage; -      in     //Set rounded corners -Layer.cornerradius =Cornerradius; to     //cropping +Layer.maskstobounds =YES; -     the     //Set Border *Layer.borderwidth =BorderWidth; $     Panax Notoginseng     //Set Border color -Layer.bordercolor =Bordercolor.cgcolor; the      +      A [Layer Renderincontext:uigraphicsgetcurrentcontext ()]; the      +     //get a new picture from a bitmap context -UIImage *newimg =Uigraphicsgetimagefromcurrentimagecontext (); $      $     //end edit of bitmap - Uigraphicsendimagecontext (); -      the     //back to new picture -     returnnewimg;Wuyi } the @end

1 //2 //VIEWCONTROLLER.M3 //basic use of layers4 //5 //Created by Xiaomoge on 15-1-5.6 //Copyright (c) 2015 Xiaomoge. All rights reserved.7 //8 9 #import "ViewController.h"Ten #import "uiimage+jw.h" One  A @interfaceViewcontroller () -@property (Weak, nonatomic) Iboutlet Uiimageview *Imgview; -@property (Weak, nonatomic) Iboutlet UIView *Redview; the  - @end -  - @implementationViewcontroller +  -- (void) Viewdidload { + [Super Viewdidload]; A     //Get rounded pictures atUIImage *image = [UIImage cornerimagewithimagename:@"Papa"Cornerradius:TenBorderWidth:2Bordercolor:[uicolor Redcolor]]; -      -     //AutoLayout effect of size setting -     //Set Shadow color -Self.redView.layer.shadowColor =[Uicolor Blackcolor]. Cgcolor; -     //transparency of Shadows inSelf.redView.layer.shadowOpacity =0.5; -      to     //the position of the shadow +Self.redView.layer.shadowOffset = Cgsizemake ( Max, Max); -      the     //set content general settings picture, and the data type of the picture is Cgimageref *Self.redView.layer.contents = (ID) image. Cgimage; $     Panax Notoginseng     /* - * Set the maskstobounds to Yes, the shadow is not out, the reason, the shadow is also cut off the * If you want to have a rounded effect and want to have a shadow, the picture has a rounded effect + * Convert images to rounded corners and show A      */ the } + @end

Simple introduction and use examples of advanced UI--calayer