What are recommended Core Graphics techniques for drawing very custom UITableViewCells

Question

Hey guys. Curious on a couple key points about drawing something like this in core graphics.

When should I use multiple layers? I know I can use a clipping path to do the rounding on the corners, and from what I understand it sounds like that's more efficient than putting a border radius on a CALayer.

Is it possible to use the output from UIImageView in drawRect? I know you can't actually use the view, but I've seen in many places that UIImageView's are much more efficient for drawing images than drawing them straight in drawRect. Is it possible to leverage them there somehow, or do you just need to suck it up and use CG?

Any other tips, tricks, and resources for the best way to draw a cell like this to get as high a FPS rate as possible are welcome.

Answer 1

1. Is performance an issue right now? I'd stay away from "optimizing" until you notice lag and you're positive that it's from drawing "slow".

2. If you haven't started, then do the basic/simple approach. Most likely it'll be fast enough on the new iOS devices.

3. Just draw the image in the drawRect, don't do anything fancy.

Can PaintCode help? It outputs Core Graphics code based on your design.

Answer 2

When should I use multiple layers?

Unfortunately, the answer is: whenever necessary. Layers are cheap, and certainly lighter than UIView/UIImageView, but they are also not a part of the traditional iOS responder chain (in that they cannot directly receive/relay touches), but the cell itself usually handles that for you. Apple recommends that you avoid -drawRect: in favor of a divided view hierarchy for cleanliness' sake, but that doesn't mean you have to have a different view for the background.

Is it possible to use the output from UIImageView in drawRect?

If you are having a problem with FPS, it's a good idea to isolate where it's coming from before optimizing away things that might not be problem spots. I would investigate the image first: are you performing any kind of caching, or does the tableview cell have to redraw it every single time it's -drawRect: is called? Does UIImageView have to perform any kind of resizing/scaling/decompression on the image? If so, have you considered resizing the image yourself once, then saving the result into a bitmap context which you simply pull from an array and draw, rather than have UIImageView waste it's time doing it for you?

_{As long as your other question is closed, I'll address animation as well}

Animating the table cell's background is trivial, especially if your cell is drawing it's background in Core Graphics, rather than using a CALayer (which means you'll be using a CABasicAnimation to animate to and from a background color as detailed here). I especially like TwUI's animation mechanism for selected state changes, because it's just dead simple:

1. Start an animation context.
2. Have a method that calls -setNeedsDisplay, or does some extra work you want animated.
3. Commit the animations.