UIScrollView with pattern image as background

Question

here is the problem I'm facing: I am making a UIScrollView which will have a pattern image to fill the background. That is to say, I need a background to scroll with the UIScrollView. A good example for this is the Game Center app, on the iPad. The background will scroll smoothly with scrollview.

Currently I have two ways to realize this effect, but neither of them offered good performance. First I tried this

self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:kRLCastViewBGUnit]];

but unfortunately, the scrolling performance was very bad and occupied too much memory.

Then I tried to use CGContextDrawTiledImage in the drawRect like this:

- (void)drawRect:(CGRect)rect
{
    CGContextRef currentContext = UIGraphicsGetCurrentContext();

    CGContextTranslateCTM(currentContext, 0, rect.size.height);
    CGContextScaleCTM(currentContext, 1.0, -1.0);

    CGContextClipToRect(currentContext, rect);
    CGRect centerTileRect = CenterTileRect;
    CGContextDrawTiledImage(currentContext, centerTileRect, [ResourceProvider backgroundTileImageRef]);

}

It's still not satisfactory on the new iPad. I must have done something wrong or misused some methods, because the Game Center performs just great when it scrolls. Anyone can offer me a solution to solve the performance issue for the UIScrollView background? Thanks a lot!!

this is actually a very good question and I'm unable to find a solution too. Specially on the new iPad the performance is horrible. — rubenfonseca
Actually I ended up handling the background manually..I add two UIImageViews to the UIScrollView and adjust the two backgrounds up and down to make it seem like having a textured background scrolling with it.. — GabrielYeah
try to release all the variables and objects which are no longer in used.. — Krunal

Vizllx Vizllx · Accepted Answer · 2013-10-10T05:48:55

You should use an UITableView instead. In this you can set cell.backgroundView easily.

UIImageView *backgroundView = [[UIImageView alloc] initWithFrame:CGRectMake:(0.0,0.0,320.0, height)];
backgroundView.image = [UIImage imageNamed:@"Shelf.jpeg"];
cell.backgroundView = backgroundView;

And If you really want to use only UIScrollView then take only one cell background image and image width should be same of scrollView's width because colorWithPatternImage: method work like tiled property.

Take Only this image into your project and use it as backgroundColor of UIScrollView.

[scrollView setContentSize:CGSizeMake(320.0, 1000.0)];
[scrollView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"cellImage.png"]]];

UIScrollView with pattern image as background

1 Answers