UITableView with custom cell scrolling slowly - iphone

Question

I have three different cells. The Cell01, the Cell02 and the Cell03. The Cell01 must appear just one time, at the top of the tableview, and the rest, the 02 and 03 must interpolate (02, 03, 02, 03 (...)).
The problem is that there's some "lag" when scrolling the TableView. I'm loading images from the document folder, and I'm also resizing it to don't require too much processing, but it's still scrolling slowly. It's reusing cells (I checked the if(!cell)).
Here's my code:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
int row = indexPath.row;
if (row == 0) {
Cell01 *cell = nil;
cell = [tableView dequeueReusableCellWithIdentifier:#"Cell01ID"];
if (!cell) {
cell = (Cell01*)[[[NSBundle mainBundle] loadNibNamed:#"Cell01" owner:self options:nil] objectAtIndex:0];
cell.someLabel.text = #"First";
cell.someImage.image = [self imageInDocumentsDirectoryWithName:#"mainimage" andSize:CGSizeMake(200, 200)];
}
} else if (row % 2 == 0) {
Cell02 *cell = nil;
cell = [tableView dequeueReusableCellWithIdentifier:#"Cell02ID"];
if (!cell) {
cell = (Cell02 *)[[[NSBundle mainBundle] loadNibNamed:#"Cell02" owner:self options:nil] objectAtIndex:0];
cell.randomLabel.text = #"Second";
cell.someImage.image = [self imageInDocumentsDirectoryWithName:#"secondimage" andSize:CGSizeMake(200, 200)];
}
} else {
Cell03 *cell = nil;
cell = [tableView dequeueReusableCellWithIdentifier:#"Cell03ID"];
if (!cell) {
cell = (Cell03 *)[[[NSBundle mainBundle] loadNibNamed:#"Cell03" owner:self options:nil] objectAtIndex:0];
cell.anotherLabel.text = #"Third";
cell.someImage.image = [self imageInDocumentsDirectoryWithName:#"thirdimage" andSize:CGSizeMake(200, 200)];
}
}
}
- (UIImage *)imageInDocumentsDirectoryWithName:(NSString *)fileName andSize:(CGSize)size
{
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
NSString* path = [documentsDirectory stringByAppendingPathComponent:fileName];
UIImage *image = [UIImage imageWithContentsOfFile:path];
image = [image resizedImageToFitInSize:size scaleIfSmaller:YES];
return image;
}
Any idea how to improve this tableview (and make it scrolls faster)?

Answer 1

I think scrolling slowly is due to loading image on cell from document directory. fetching images from Doc dir takes some times and when ever u scroll ur table view, a new cell is created and image is loaded from doc dir which takes some time. try to use Lazy loading of image on cell. Also load images in a new thread not in main thread..
There is a sample project of Apple which helps u. lazy loading table view
I hope this will helps u .

Answer 2

Consider loading the images asynchronously. You could keep the references to all the UIImageView in a mutable array, start loading images in an asynchronous block, e.g. using GCD, and then update the image views as they get loaded.
Here's a rough example of how it could look (this assumes you have an ivar NSMutableArray *_imageViews, initialized with the correct size of elements, and filled with nils). I'm coding from the hip here, but I hope you get the idea. BTW, you can fill the mutable array with nils by inserting [NSNull null] into it.
I promise that if you implement this correctly, you'll see a marked improvement in the scrolling speed :)
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
int row = indexPath.row;
if (row == 0) {
Cell01 *cell = nil;
cell = [tableView dequeueReusableCellWithIdentifier:#"Cell01ID"];
if (!cell) {
cell = (Cell01*)[[[NSBundle mainBundle] loadNibNamed:#"Cell01" owner:self options:nil] objectAtIndex:0];
cell.someLabel.text = #"First";
[_imageViews replaceObjectAtIndex:row withObject:cell.someImage];
dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
dispatch_async(queue, ^{
UIImage *image = [self imageInDocumentsDirectoryWithName:#"thirdimage" andSize:CGSizeMake(200, 200)];
// because UI needs to be updated on the main thread,
// dispatch yet another block.
dispatch_async(dispatch_get_main_queue(), ^{
UIIMageView *imageView = [_imageViews objectAtIndex:row];
ImageView.image = image;
});
});
}
// et cetera
}

Answer 3

There are two potential performance issues with your current implementation. The first is using NSBundle instead of UINib to load the nib files. NSBundle reloads the nib file from the filesystem each time, whereas UINib reads a nib file once and caches its content in memory. Since it doesn't need to reread the nib from the filesystem each time, instantiating the objects should be orders of magnitude faster using UINib.
So instead of doing this...
cell = [[[NSBundle mainBundle] loadNibNamed:#"Cell02" owner:self options:nil] objectAtIndex:0];
...do this:
cell = [UINib loadNibNamed:#"Cell02" owner:self] objectAtIndex:0];
The second problem is similar; the current implementation is reloading the same images from the filesystem each time instead of caching them in memory and reusing them. To solve this, you could add an instance variable of type NSArray or NSDictionary (depending on how you prefer to retrieve the images), and then check before loading the image to see if it's already in the collection. If not, load the image and store it in the collection before using it. Otherwise, used the cached image instead of loading it again.
So instead of doing this...
cell.someImage.image = [self imageInDocumentsDirectoryWithName:#"thirdimage" andSize:CGSizeMake(200, 200)];
...do something like this:
// Note: Consider defining constants for the keys/filenames.
UIImage *image = [self.cachedImages objectForKey:#"thirdimage"];
if (image == nil) {
image = [self imageInDocumentsDirectoryWithName:#"thirdimage" andSize:CGSizeMake(200, 200)];
[self.cachedImages setObject:image forKey:#"thirdimage"];
}
cell.someImage.image = image;
If you need to cache a lot of images this way, consider using NSCache instead of NSDictionary to help keep the cache from growing too large.

Answer 4

I just finished implementing something similar, and if you make sure that all of the images in the documents directory are already the correct size (200 x 200) then this will work just fine without having to load asynchronously.
If you need the images to be larger, then generate thumbnails that are the correct size when you save the original file, as it actually is taking too much processing to resize the images in "real-time".
In this case though, you only have three images. If you simply cache the image after it has been resized and keep reusing it (instead of making new ones), then it will be even faster than that.