Having trouble loading images into a grid - iphone

Question

im having trouble loading images into a uitable view from an xml file, i have everything loading correctly, the problem is in the uitableview instead of loading the images 0-9 it loads only 0-7 then images 0 and 1 ?
attached is the project, any help would be appreciated
thanks
http://jptarry.com/iPhoneTest/iphoneGrid.zip

Answer 1

I hope i'm right. I don't have a mac right now to test this, but I've seen some errors in the code.
In MainViewController when you are reusing the cell, you simply return the old cell without any change.
I think this is why you get 0-7 then 0-1 again. Most probably there are 7 cells visible on the screen and when you start scrolling you are simply returning the dequeued cells (which are 0 and 1 because you are scrolling down and those cells are out of the screen).
When reusing a cell, you should reinitialize the asyncImageView with the image for the current index. I'll copy-paste some code but this is more as a guideline because i can't compile/test it:
Also, you are attaching the same tag to multiple asyncImageViews you create in the same cell. You won't be able to get all of them back. Attach ids based on the index or something.
EDIT:
This is how i got it working. However, I really don't understand the logic behing your code where you arrange the buttons in a cell.
Also, there is still an issue with AsyncImageView. While it is loading the new image, it is displaying the old one - this is why you will see that when you scroll the old images first appear with a activity indicator, then the new images appear. You should have a loading state for AsyncImageView where it displays something neutral.
Also, I'm really happy with the tagging method, but it works :)
Ok, enough talk, here's the code i changed:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Cell";
AsyncImageView *asyncImageView = nil;
int section = indexPath.section;
NSMutableArray *sectionItems = [sections objectAtIndex:section];
int n = ([sectionItems count]) ;
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
// Create a new cell
cell = [[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
cell.accessoryType = UITableViewCellAccessoryNone;
cell.selectionStyle = UITableViewCellSelectionStyleNone;
int i=0;
int f=0;
while (i < [sectionItems count])
{
int yy = 4 +f*74;
//number of items per section 2
for(int j=0; j<[sectionItems count]; j++)
{
Item *item = [sectionItems objectAtIndex:j];
int buttonX = 10;
if (j != 0)
buttonX = 203;
NSLog(#"+++++++++++++++++++++++++++++++");
NSLog(#"image :: %d :: %#", j, item.image);
NSLog(#"+++++++++++++++++++++++++++++++");
CGRect frame;
frame.origin.x = buttonX;
frame.origin.y = yy;
frame.size.width = 107;
frame.size.height = 107;
asyncImageView = [[[AsyncImageView alloc] initWithFrame:frame] autorelease];
asyncImageView.backgroundColor = [UIColor clearColor];
asyncImageView.tag = ASYNC_IMAGE_TAG + f * 100 + j;
//asyncImageView.opaque = YES;
[cell.contentView addSubview:asyncImageView];
i++;
}
f = f+1;
}
}
else
{
NSLog(#"cell != nill %#", cell);
}
int i=0;
int f=0;
while (i < [sectionItems count])
{
//number of items per section 2
for(int j=0; j<[sectionItems count]; j++)
{
Item *item = [sectionItems objectAtIndex:j];
asyncImageView = (AsyncImageView *) [cell.contentView viewWithTag:ASYNC_IMAGE_TAG + f * 100 + j];
[asyncImageView loadImageFromURL:[NSURL URLWithString:item.image]];
i++;
}
f = f+1;
}
return cell;
}
EDIT2: I made a quick fix to AsyncImageView to remove the old image when loading a new one. I'll just post some code excerpts with the changes:
-(void)loadImageFromURL:(NSURL*)url {
// ADD THE FOLLOWING LINES
// Remove the old image (tagged with 1234)
[[self viewWithTag:1234] removeFromSuperview];
// END ADD
if (connection != nil) {
NSLog(#"connection != nil");
[connection cancel];
[connection release];
A little lower in the same method, where you create the image from cache, add those lines:
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.autoresizingMask =
UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
// ADD THE NEXT LINE
imageView.tag = 1234; // add this line
// END ADD
[self addSubview:imageView];
And in another function, - (void)connectionDidFinishLoading:(NSURLConnection *)aConnection where you create the new image, just add the tag again:
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.autoresizingMask =
UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
// ADD THE NEXT LINE
imageView.tag = 1234;
// END ADD
[self addSubview:imageView];
imageView.frame = self.bounds;