Background image for CATiledLayer

Question

As you might know, CATiledLayer is used to display large images by showing tiled images at scale suitable for view size.

I have CATiledLayer working similar to example which could be found under iOS documentation and I calculate at which row and column drawRect:(CGRect) rect is trying to draw its content.

When view appears for the first time it starts drawing tile by tile on blank view with nothing behind that view/layer. I'm trying to put low resolution image at first to fill up the layer and then start drawing tiled view.

Just like when you're moving through PDF pages, each page is at first represented with a very poor image but it's enough to see content layout and when you stop at certain page this page becomes more clearer.

I know I can add sublayers on top of catiledlayer but I'm not able to put any layer behind catiledlayer because this is a masterlayer. I also believe that it's important to load image for background on the same layer so that could be proper scaled.

Has anyone an idea how to achieve this?

Answer 1

I finally figure this out and thanx for the key comment.

What you have to do:

1. Create subclass of CATiledLayer with all the dynamic loading logic within function drawLayer:inContext: - this function is like drawRect: within View
2. Init your new subclassed CATiledLayer
3. Init new CALayer with low resolution image
4. Create new UIView *myView = [UIView ...] or UIImageView (depend on your needs)
5. Put the two layers in myView.layer as subLayer

---

UIView *imageView = [[UIView alloc] initWithFrame:viewFrame];

DCTiledLayer *tiledLayer = [[DCTiledLayer alloc] initWithData:myData];

CALayer *lowResLayer = [CALayer layer];
lowResLayer.position = CGPointMake(CGRectGetMidX(viewFrame), CGRectGetMidY(viewFrame));
lowResLayer.bounds = viewFrame;
lowResLayer.contents = (id)[lowResImage CGImage];

[imageView.layer addSublayer:lowResLayer];
[imageView.layer addSublayer:tiledLayer];

It works like a charm. :)