Using dequeueReusableCellWithIdentifier with multiple tables in a UIScrollView - iphone

Question

My app's UI requires grids of 9 images that are paginated.
To do this I'm creating several UITables inside a UIScrollView (with a UIPageControl):
My table is coming from a xib file that I register. Each table cell has 3 buttons in it.
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
int numPages = ([self.images count] + 8) / 9;
NSLog(#"Page count: %i", numPages);
// Set pages
self.pageControl.numberOfPages = numPages;
for (int i = 0; i < numPages; i++) {
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
UIView *subview = [[UIView alloc] initWithFrame:frame];
subview.backgroundColor = [UIColor blackColor];
[self.scrollView addSubview:subview];
// Let's try and draw a table
UITableView *table = [[UITableView alloc] initWithFrame:frame style:UITableViewStylePlain];
table.delegate = self;
table.dataSource = self;
table.tag = 100 + i;
table.separatorColor = [UIColor clearColor];
[table setBackgroundColor:[UIColor blackColor]];
[table registerNib:[UINib nibWithNibName:#"Cell" bundle:[NSBundle mainBundle]] forCellReuseIdentifier:#"TestCell"];
[self.scrollView addSubview:table];
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * numPages, self.scrollView.frame.size.height);
}
My problem is that the view loads slowly (5+ seconds). The images being loaded into the buttons are local and not large.
My cellForRowAtIndexPath looks like this:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"TestCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
// What table/page are we looking at?
// Check the tag
int page = tableView.tag - 100;
NSLog(#"We are on page/table: %i", page);
// Configure the cell
// Our cells have 3 button images
// So we'll loop and set each image
for (int i = 0; i < 3; i++) {
// From our images array, the item we want
// Will be the row * 3 + i
int imageIndex = (page * 9) + (indexPath.row * 3) + i;
NSLog(#"Image index is: %i", imageIndex);
// Button tags are 10-12 (or 10 + i)
UIButton *button = (UIButton *)[cell viewWithTag:(10 + i)];
[button addTarget:self action:#selector(poseSelected:) forControlEvents:UIControlEventTouchUpInside];
// We have to make sure we don't go out of the bounds of
// our images array (might not have /3 exactly)
if (imageIndex > [self.images count] - 1) {
// We have an extra button, let's hide it
button.hidden = YES;
} else {
// Get the image and file nameefrom our array
NSDictionary *imageDict = (NSDictionary *)[self.images objectAtIndex:imageIndex];
NSString *fileName = [imageDict objectForKey:#"file"];
// Make the thumb name
NSString *thumbName = [fileName stringByReplacingOccurrencesOfString:#".jpg"
withString:#"-THUMB.jpg"];
// NSLog(#"Thumb name is: %#", thumbName);
// Set the button image
UIImage *btnImage = [UIImage imageNamed:thumbName];
[button setImage:btnImage forState:UIControlStateNormal];
}
}
return cell;
}
When I look at the log output, All of the cells are getting setup right away. Why is this?
Shouldn't table views off the screen not be rendered? Or am I using dequeueReusableCellWithIdentifier the wrong way?

Answer 1

You are correct, you are misinterpreting how cellForRowAtIndexPath and a scroll view works. Your cells are getting loaded immediately because your tableviews are all subviews in the scrollview. So the tableviews as subviews will get loaded immediately when the scrollview is added to the view hierarchy. The cellForRowAtIndexPath does recycling for cells that are disappearing when you scroll a tableview (by design this makes sense). My recommendation would be to use a recycling scrollview, or even better a custom gridview implementation (appears to be what you need). I have have some examples in my library, but it might be worth search for the best grid view or image viewer than meets your needs. My library can be found here:
https://github.com/daltoniam/GPLib-iOS
You are going to want to take a look at:
https://github.com/daltoniam/GPLib-iOS/tree/master/GPLib/Views/ImageViews
https://github.com/daltoniam/GPLib-iOS/tree/master/GPLib/Views/GridView
As I stated above, it might be worth looking for a grid view/image view more along the lines your UI needs then what my lib provides, but should be a good starting point. Any questions let me know.