6 Specialzed layers 特殊层 第二部分 读书笔记

CAGradientLayer

 

CAGradientLayer is used to generate a smooth gradient between two or more colors. 是用来产生渐变色的。

It's possible to replicate the appearance of a CAGradientLayer using Core Graphics to draw into an ordinary layer's backing image, but the advantage of using a CAGradientLayer instead is that the drawing is hardware accelerated.

好处是硬件加速的。

Basic Gradients

 

We'll start with a simple diagonal gradient from red to blue (see Listing 6.6). The gradient colors are specified using the colors property, which is an array. The colors array expects values of type CGColorRef (which is not an NSObject derivative), so we need to use the bridging trick that we first saw in Chapter 2 to keep the compiler happy.

gradients colors 是一个数组，要用到CGColorRef 。

 

CAGradientLayer also has startPoint and endPoint properties that define the direction of the gradient. These are specified in unit coordinates, not points, so the top-left corner of the layer is specified with {0, 0} and the bottom-right corner is {1, 1}. The resulting gradient is shown in Figure 6.6.

unit coordinates,不是points,top left corner of the layer 是{0,0},而右下角是{1,1}

 

Listing 6.6 A Simple Two-Color Diagonal Gradient

@interface ViewController ()

 

@property (nonatomic, weak) IBOutlet UIView *containerView;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

//create gradient layer and add it to our container view

 

CAGradientLayer *gradientLayer = [CAGradientLayer layer];

gradientLayer.frame = self.containerView.bounds;

[self.containerView.layer addSublayer:gradientLayer];

//set gradient colors

gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];

//set gradient start and end points

gradientLayer.startPoint = CGPointMake(0, 0); gradientLayer.endPoint = CGPointMake(1, 1);

}

@end

 

Multipart Gradients 多部分组成的Gradients

The colors array can contain as many colors as you like, so it is simple to create a multipart gradient such as a rainbow. By default, the colors in the gradient will be evenly spaced, but we can adjust the spacing using the locations property.

 

The locations property is an array of floating-point values (boxed as NSNumber objects). These values define the positions for each distinct color in the colors array, and are specified in unit coordinates, with 0.0 representing the start of the gradient and 1.0 representing the end.

locations 属性也是一个array .这些值定义了位置，为每个颜色，并指明在unit coordinates .

 

It is not obligatory to supply a locations array, but if you do, you must ensure that the number of locations matches the number of colors or you'll get a blank gradient.

指定locations 不是强制的，但是如果你做了，你需要确保locations 的数量和colors数量相同。否则，可能会获取一个空白的gradient

Listing 6.7 shows a modified version of the diagonal gradient code from Listing 6.6. We now have a three-part gradient from red to yellow to green. A locations array has been specified with the values 0.0, 0.25, and 0.5, which causes the gradient to be squashed up toward the top-left corner of the view (see Figure 6.7).

 

Listing 6.7 Using the locations Array to Offset a Gradient

- (void)viewDidLoad {

[super viewDidLoad];

//create gradient layer and add it to our container view

 

CAGradientLayer *gradientLayer = [CAGradientLayer layer];

gradientLayer.frame = self.containerView.bounds;

[self.containerView.layer addSublayer:gradientLayer];

//set gradient colors

gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor greenColor].CGColor];

//set locations

gradientLayer.locations = @[@0.0, @0.25, @0.5];

//set gradient start and end points

gradientLayer.startPoint = CGPointMake(0, 0);

 

gradientLayer.endPoint = CGPointMake(1, 1);

}

 

Figure 6.7 A three-color gradient, offset to the top left using the locations array

CAReplicatorLayer

 

The CAReplicatorLayer class is designed to efficiently generate collections of similar layers.

是为了产生相似layers的容器的。

It works by drawing one or more duplicate copies of each of its sublayers, applying a different transform to each duplicate. This is probably easier to demonstrate than to explain, so let's construct an example.

Repeating Layers

 

In Listing 6.8, we create a small white square layer in the middle of the screen, then turn it into a ring of ten layers using CAReplicatorLayer. The instanceCount property specifies how many times the layer should be repeated.

instanceCount 属性指明了这个layer需要复制多少次 

The instanceTransform applies a CATransform3D (in this case, a translation and rotation that moves the layer to the next point in the circle).

The transform is applied incrementally, with each instance positioned relative to the previous one. This is why the duplicates don't all end up in the same place. Figure 6.8 shows the result.

 

Listing 6.8 Repeating Layers Using CAReplicatorLayer

@interface ViewController ()

@property (nonatomic,weak)IBOutlet UIView *containerView;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

//create a replicator layer and add it to our view

 

CAReplicatorLayer *replicator = [CAReplicatorLayer layer];

replicator.frame = self.containerView.bounds;

[self.containerView.layer addSublayer:replicator];

//configure the replicator

replicator.instanceCount = 10;

//apply a transform for each instance

 

CATransform3D transform = CATransform3DIdentity;

transform = CATransform3DTranslate(transform, 0, 200, 0);

transform = CATransform3DRotate(transform, M_PI / 5.0, 0, 0, 1);

transform = CATransform3DTranslate(transform, 0, -200, 0);

 

replicator.instanceTransform = transform;

//apply a color shift for each instance

 

replicator.instanceBlueOffset = -0.1;

replicator.instanceGreenOffset = -0.1;

//create a sublayer and place it inside the replicator

 

CALayer *layer = [CALayer layer];

layer.frame = CGRectMake(100.0f, 100.0f, 100.0f, 100.0f);

layer.backgroundColor = [UIColor whiteColor].CGColor;

[replicator addSublayer:layer];

}

 

@end