Speed up ios function - objective-c

Question

I really need help with this!
I'm building a map containing loads of tiles.. like 200x200 small 50px tiles. These tiles resides in an UIScrollView so that I can drag myself around the map! Works really nice right? Well it's super slow since there are too many subviews in the map.
Right, so I load the subviews as I scroll then! Problem is, that takes some time too, makes the scrolling a bit laggy/slow. Can you help me improve this function? I'm out of ideas. Found the Grand Central Dispatch but I'm not sire how to use it.
Here's my code
-(void)loadMapTiles {
dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
dispatch_apply(1, queue,
^(size_t row) {
int radiusX = 11;
int radiusY = 7;
int y = currentCoord.y-radiusY;
for(int x = currentCoord.x-radiusX; x < currentCoord.x+radiusX+1; x++) {
int currTag = mapSize.width*(y-1)+x;
if(![mapScroller viewWithTag:currTag]) {
UIImageView *mapTile = [[UIImageView alloc] initWithFrame:CGRectMake(50*x, 50*y, 50, 50)];
int mapNo = (rand() % 20) + 1;
if(mapNo > 11) {
mapNo = 1;
}
mapTile.image = [UIImage imageNamed:[NSString stringWithFormat:#"desert_map%d_50.gif", mapNo]];
//Tag the mapTile so that we can find it again!
[mapTile setTag:currTag];
[mapContentView addSubview:mapTile];
[mapTile release];
}
if(x == currentCoord.x+radiusX && y < currentCoord.y+radiusY) {
x = currentCoord.x-radiusX-1;
y++;
}
}
//Remove the other tiles outside the radius!
for (UIView *mapTile in [mapContentView subviews]) {
if(mapTile.frame.origin.x / 50 < currentCoord.x-radiusX || mapTile.frame.origin.x / 50 > currentCoord.x+radiusX || mapTile.frame.origin.y / 50 < currentCoord.y-radiusY || mapTile.frame.origin.y / 50 > currentCoord.y+radiusY) {
[mapTile removeFromSuperview];
}
}
});
}
And the function to call the map-building function above:
-(void)scrollViewDidScroll:(UIScrollView *)myScrollView {
CGPoint newCoord = CGPointMake((int)(myScrollView.contentOffset.x + myScrollView.frame.size.width/2) /50, (int)(myScrollView.contentOffset.y + myScrollView.frame.size.height/2) /50);
if(newCoord.x != currentCoord.x || newCoord.y != currentCoord.y) {
currentCoord = newCoord;
[self loadMapTiles];
}
}

Answer 1

You'll want to have a look at CATiledLayer. It lets you do what you want in a nice way regardless of how big your map is. It also supports having different images for different zoom levels.

Answer 2

I'm no obj-c developer but...
At a talk I was at a while ago on mobile web development, they recommend to re-use memory rather than allocate and free it.
Instead of creating a new UIImageView for every tile, could you have enough of them pre-allocated to for the whole screen and just change the images in them as the map is scrolled?

Answer 3

Maybe you should try using CoreGraphics and layers instead of scrollview to draw map and scroll it.

Answer 4

Look at WWDC 2010 video "Designing apps with scrollviews" and the corresponding sample code "PhotoScroller" there you will learn the big trick of "view reuse" in scrollViews.
WWDC 2011 video of similar name is a continuation of the same trick.
"Views that are no longer in the visible area should be reused and repositioned for displaying new stuff"
Adding and removing subviews while scrolling is bound to cause slow downs. Instead you should just reposition the non visible ones and show new stuff.
Other usual causes of scrolling problems are
layer.cornerRadius
layer.shadow (without setting shadowPath)
any opacity on subviews.
Always profile your code on device using core animation.