Question

for my tableview I’ve done a custom background view which I call on viewDidLoad on each tableView on my project:

- (void)viewDidLoad{
    [super viewDidLoad];
    //other unrelated sutff
    self.tableView.backgroundView=[[BlueStyleBackground alloc]init];
}

It was my understanding that doing quartz2D stuff was the best option performance-wise. However this background view takes 0.45 seconds (average) to get drawn. This makes all the naviagation among tableViews a bit slow, not much but enough to notice it.

The background view is a gradient with a pattern overlaped. I’ve found out that the gradient gets drawn in 0.12 seconds, so the bottle neck appears to be the pattern drawing. What surprises me is that, from my point of view, it doesn’t seem like a complicated thing to draw, it’s only one horizontal line with a shadow.

Here is how the pattern is called (inside recDraw):

static const CGPatternCallbacks callbacks = { 0, &MyDrawColoredPattern2, NULL };

CGContextSaveGState(context);
CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL);
CGContextSetFillColorSpace(context, patternSpace);
CGColorSpaceRelease(patternSpace);


CGPatternRef pattern = CGPatternCreate(NULL,
                                         rect,//superficie que ha de cobrir CGRectMake(0, 0,self.bounds.size.width,8),
                                       CGAffineTransformIdentity,
                                       self.bounds.size.width,   // espai entre patrons (X)
                                       2,   // espai entre patrons (Y)
                                       kCGPatternTilingConstantSpacing,
                                       true,
                                       &callbacks);

and this is the pattern code:

void MyDrawColoredPattern2 (void *info, CGContextRef context) {

    UIColor* __autoreleasing blauClar = [UIColor colorWithRed: 0.65 green: 0.65 blue: 0.65 alpha: 1];
    UIColor* __autoreleasing blauFosc = [UIColor colorWithRed: 0.106 green: 0.345 blue:0.486 alpha:1];     
    CGColorRef dotColor = blauFosc.CGColor;
    CGColorRef shadowColor = blauClar.CGColor;

    CGContextSetFillColorWithColor(context, dotColor);
    CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 5, shadowColor);

    CGContextFillRect(context, CGRectMake(0, 0, 480, 1));
}

Previously I did a pattern which draw two hexagons inside a 24+24 square. It looked more complicated that the code above but it takes only 0.15 seconds to get drawn.

Am I doing something wrong here? My knowledge about quartz drawing is not really that big and I would appreciate some inputs. Thanks in advance!

Answer 1

I hate to answer myself, but after some trial and error I found that changing the pattern code to the following, does the trick:

UIColor *__autoreleasing tileColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"pattern6-65.png"]];

CGColorRef tileCGColor = [tileColor CGColor];
CGColorSpaceRef colorSpace = CGColorGetColorSpace(tileCGColor);
CGContextSetFillColorSpace(context, colorSpace);

if (CGColorSpaceGetModel(colorSpace) == kCGColorSpaceModelPattern)
{
    CGFloat alpha = 1.0f;
    CGContextSetFillPattern(context, CGColorGetPattern(tileCGColor), &alpha);
}
else
{
    CGContextSetFillColor(context, CGColorGetComponents(tileCGColor));
}

CGContextFillRect(context, CGRectMake(0, 0, 10, 10));

What it does is to fill the screen with a pattern generated with a very small png. So I had to draw the png with photoshop and then add it to the project. The bigger the png the faster it gets, but the more difficult is it to draw in photoshop.

The call for the pattern must be modiffied to fit the size of the png (10 pixels here):

CGPatternRef pattern = CGPatternCreate(NULL,
                                             rect,//superficie que ha de cobrir CGRectMake(0, 0,self.bounds.size.width,8),
                                           CGAffineTransformIdentity,
                                           10,   // espai entre patrons (X) self.bounds.size.width
                                           10,   // espai entre patrons (Y)
                                           kCGPatternTilingConstantSpacing,
                                           true,
                                           &callbacks);

using this 10px png, the whole drawing time has drop to 0.18 seconds (gradient background plus pattern).

I hope it helps somebody with the same problem.