A layer is simply a bitmap, and its contents can be set programmatically or with an image. To set the contents programmatically, you either subclass CALayer or assign a delegate to an instance of CALayer. The delegate then implements drawing routines. (This is how implicit layers work; the view is its layer’s delegate.)
We will discuss drawing to a layer programmatically at the end of this chapter. For now, you’re going to set the contents of the layer using an image file.
In HypnosisView.m, add the following code to the initWithFrame: method:
- (id)initWithFrame:(CGRect)r
{
self = [super initWithFrame:r];
if (self) {
stripeColor = [[UIColor lightGrayColor] retain];
boxLayer = [[CALayer alloc] init];
[boxLayer setBounds:CGRectMake(0.0, 0.0, 85.0, 85.0)];
[boxLayer setPosition:CGPointMake(160.0, 100.0)];
UIColor *reddish = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.5];
CGColorRef cgReddish = [reddish CGColor];
[boxLayer setBackgroundColor:cgReddish];
// Create a UIImage
UIImage *layerImage = [UIImage imageNamed:@"Hypno.png"];
// Get the underlying CGImage
CGImageRef image = [layerImage CGImage];
// Put the CGImage on the layer
[boxLayer setContents:(id)image];
// Inset the image a bit on each side
[boxLayer setContentsRect:CGRectMake(-0.1, -0.1, 1.2, 1.2)];
// Let the image resize (without changing the aspect ratio)
// to fill the contentRect
[boxLayer setContentsGravity:kCAGravityResizeAspect];
[[self layer] addSublayer:boxLayer];
[boxLayer release];
}
return self;
}
In this code, we create an image and then get the underlying CGImage to use with Core Graphics drawing. Then we set the image as the layer’s contents and make adjustments for how the contents appear within the layer.
Notice the use of CGImageRef and CGColorRef in this method. Why doesn’t Core Animation use UIImage and UIColor?
The QuartzCore framework (which supplies the classes CALayer and CAAnimation) and Core Graphics framework (which supplies CGImageRef) exist on both iOS and on the Mac. UIKit (where we get UIImage and anything else prefixed with UI) only exists in iOS. To maintain its portability, QuartzCore must use CGImageRef instead of UIImage. Fortunately, UIKit objects have methods to easily access their Core Graphics counterparts, like UIImage’s CGImage method you used in the previous code.
Build and run the application. Now your layer has an image for its contents, as shown in Figure 22.5.
Because layers exist in a hierarchy, they can have sublayers, and each layer has a pointer back to its parent layer called superlayer. When a layer is composited to the screen, it is copied to the screen, and then each sublayer is composited atop it. Therefore, a layer always draws on top of its superlayer.
In a view hierarchy, sibling views (views with the same parent) will typically not have overlapping bounds. For instance, imagine a view with two subviews that are buttons. What would be the point of them overlapping and obscuring each other? It would only confuse and frustrate the user trying to tap one or the other.
The layer hierarchy, however, is a different story. Siblings are far more likely to overlap because layers are about visual effects and drawing, not user interaction. Which sibling is composited over the other? Each layer has a property called zPosition. If two layers are siblings and they overlap, then the layer with the higher zPosition is composited on top of the layer with the lower zPosition. (A sublayer always draws on top of its superlayer, regardless of zPosition.)
A layer’s zPosition defaults to 0 and can be set to a negative value.
[underLayer setZPosition:-5]; [overLayer setZPosition:5]; [parentLayer addSublayer:underLayer]; [parentLayer addSublayer:overLayer]; // overLayer is composited on top of underLayer!
When the Z-axis is discussed, some developers imagine that perspective is applied, and they expect a layer to appear larger as its zPosition increases. However, Core Animation layers are presented orthographically; they do not appear as different sizes based on their zPositions.
