Table View displaying different images while scrolling - objective-c

Question

I am loading some images in my table view with a click of a button.The images are loaded fine and in desired positions.But when i scroll the table view then images seems to change .Let me elaborate only 2 rows are visible in my table view initially ,and lets assume the images are there in both rows and 4 images in a row.Now when i scroll the table view downwards or upwards the row which is scrolled above or below the table view frame will show the new image in its image view.And everytime when i scroll the images keep on changing.What could be the reason.I am scratching my head with this.Please help.I am posting a part of my code:-
-(UITableViewCell*)tableView(UITableView*)
ableViewcellForRowAtIndexPath(NSIndexPath*)indexPath {
UITableViewCell *cell = nil;
static NSString *AutoCompleteRowIdentifier = #"AutoCompleteRowIdentifier";
cell = [tableView dequeueReusableCellWithIdentifier:AutoCompleteRowIdentifier];
if (cell == nil) {
cell=[[[UITableViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:AutoCompleteRowIdentifier] autorelease];
}
UIImageView * imageView1 = [[[UIImageView alloc] initWithFrame:CGRectMake(25, 4, 80, 80)] autorelease];
UIImageView * imageView2 = [[[UIImageView alloc] initWithFrame:CGRectMake(115,4,80, 80)] autorelease];
UIImageView * imageView3 = [[[UIImageView alloc] initWithFrame:CGRectMake(205,4, 80, 80)] autorelease];
UIImageView * imageView4 = [[[UIImageView alloc] initWithFrame:CGRectMake(295,4, 80, 80)] autorelease];
imageView1.tag = 1;
imageView2.tag = 2;
imageView3.tag = 3;
imageView4.tag = 4;
[cell.contentView addSubview:imageView1];
[cell.contentView addSubview:imageView2];
[cell.contentView addSubview:imageView3];
[cell.contentView addSubview:imageView4];
UIImageView * imageView;
for ( int i = 1; i <= 4; i++ ) {
imageView = (UIImageView *)[cell.contentView viewWithTag:i];
imageView.image = nil;
}
int photosInRow;
if ( (indexPath.row < [tableView numberOfRowsInSection:indexPath.section] - 1) ||
(count % 4 == 0) ) {
photosInRow = 4;
} else {
photosInRow = count % 4;
}
for ( int i = 1; i <= photosInRow; i++ ) {
imageView = (UIImageView *)[cell.contentView viewWithTag:i];
[self setImage1:imageView];
}
return cell;
}
-(void)setImage1:(UIImageView *)imageView
{
UIImageView *imageView1=[[UIImageView alloc]init];
imageView1=imageView;
imageView1.image = [UIImage imageNamed:[NSString stringWithFormat:#"%d.png", j]];
j++;
}
Any help will be appreciated.
Thanks,
Christy

Answer 1

Your setImage1: method should be modified to take in the photo index as j is not a proper way to track the current image as cellForRowAtIndexPath: may be called in any order.
- (void)setImage1:(UIImageView *)imageView forPhotoIndex:(NSInteger)index {
imageView.image = [UIImage imageNamed:[NSString stringWithFormat:#"%ld.png", index]];
}
and minor modification in cellForRowAtIndexPath: would be,
[..]
for ( int i = 1; i <= photosInRow; i++ ) {
imageView = (UIImageView *)[cell.contentView viewWithTag:i];
[self setImage1:imageView forPhotoIndex:(indexPath.row * 4 + i - 1)];
}
[..]

Answer 2

When reusing a cell, you currently just add new UImageView instances. The reused cell already has subviews added and you just add more. Be sure to only add new UIImageViews if the cell was not reused before (within the if-clause)
if (cell == nil) {
cell=[[[UITableViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:AutoCompleteRowIdentifier] autorelease];
UIImageView * imageView1 = [[[UIImageView alloc] initWithFrame:CGRectMake(25, 4, 80, 80)] autorelease];
UIImageView * imageView2 = [[[UIImageView alloc] initWithFrame:CGRectMake(115,4,80, 80)] autorelease];
UIImageView * imageView3 = [[[UIImageView alloc] initWithFrame:CGRectMake(205,4, 80, 80)] autorelease];
UIImageView * imageView4 = [[[UIImageView alloc] initWithFrame:CGRectMake(295,4, 80, 80)] autorelease];
imageView1.tag = 1;
imageView2.tag = 2;
imageView3.tag = 3;
imageView4.tag = 4;
[cell.contentView addSubview:imageView1];
[cell.contentView addSubview:imageView2];
[cell.contentView addSubview:imageView3];
[cell.contentView addSubview:imageView4];
}
EDIT: See comments below about issues in setting the actual image.