collectionViewCell Images change when scrolling up down

Question

I am trying to create a tableviewcell having collectionview which has a custom collectionviewcell. I created a controller, having Custom tableviewcell. TableViewCell has collectionview embeded. Now i created a custom collectioncell with image and text.

In collectionViewcell the 4th image needs to be translucent so when i am rendering the images in cellforitematindex i make the image translucent. it is completely working fine till i scroll the tableview down and up. After we scroll up the first image turns translucent.

I read on net that collectionviewcell are up for reuse and may be the 4th one reused at 1st position and 1st position gets translucent image

I have a controller class which is the datasource and delegate for both tableviewcell and collectionviewcell.

I have tableviewcell class.
I have collectionviewcell class.

Now i get a link to solve this , which says you must subclass your collectionviewcell and add some methods which would make imageview nil everytime and it will create a new imageview .

Link for the above

so i created a collectionviewcell subclass

I have a subclass of collectionviewcell : uicollectionviewsubclass

In my controller , first i reuse tablecell

So I Created a controller Lets say:-

mycontroller and added a tableview , i added a custom tableviewcell , At cellForRowAtIndexPath i dequeueReusableCellWithIdentifier , so my tableviewcell will come. Now In my tableViewcell .m file I created an outlet for collectionview and by using tag I make

self.collectionview = [self.contentView viewWithTag:tagno];

This tag is a collectionviewcell tagno

Now i register the collectionview in tableviewcell class , it has outlet for collectionview

[self.collectionview registerClass:[uicollectionviewsubclass class] forCellWithReuseIdentifier:@"reuseidentifier"];

In my collectionviewcell , i have imageview outlet and other outlets

when i created subclass i created like said in link.

Then in my controller in cellForItemAtIndexPath for collectionview

uicollectionviewsubclass *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"reuseidentifier" forIndexPath:indexPath];

but this cell is a subclassed cell which is not having outlet for imageview (whihc is in collectionview class) so it is showing imageView in self as nil not instantiated.

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

     ImageCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"ImageCell" forIndexPath:indexPath];
    cell.ImageCellView.image  = [UIImage imageWithData: imageData];
    if (indexPath.row == 3) {
            cell.grayViewImage.hidden = FALSE;
    }
    return cell;
}

grayViewImage is a uiview which i make hidden false to make the cell translucent

What may be the reason.

one more thing how you have added ImageCellView ? its added to cell.contentView or added direct to [cell addSubview:ImageCellView]; ? — maddy, May 19 '16 at 08:55
Its added to cell.contentview by tagging the collection view — Sudhanshu Gupta, May 19 '16 at 09:04
what ? by tagging the collection view ? and it is nil if you debug in above posted cellForItem.. ? very confusing line "but this cell is a subclassed cell which is not having outlet for imageview"? so have outlet what's prob ? — maddy, May 19 '16 at 09:11
Please use `code formatting` for `code`, not for **emphasis**. — Nicolas Miari, May 19 '16 at 09:47

score 2 · Answer 1 · answered May 19 '16 at 08:56

To fix this issue you should prepare your cell to be reused. Use a method called prepareForReuse for UICollectionViewCell and UITableViewCell. Implement it like this and call it in your cellForItemAtIndexPath

- (void)prepareForReuse 
{
    yourImageView .image = nil;
    [super prepareForReuse];
}

score 0 · Answer 2 · answered May 19 '16 at 09:06

I got the gap in your code:

Easy: You missed that else part see below :

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

             ImageCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"ImageCell" forIndexPath:indexPath];
            cell.ImageCellView.image  = [UIImage imageWithData: imageData];
            if (indexPath.row == 3) {
                    cell.grayViewImage.hidden = FALSE;
            }else{
    cell.grayViewImage.hidden = TRUE;
    }
            return cell;
        }

Thanks !

collectionViewCell Images change when scrolling up down

2 Answers2