29

Im having a problem with my UICollectionView. Initially it displays fine, showing a grid of cells, each cell with a single UIImageView. These UIImageViews are showing PNGs with transparency that are stored in the app's bundle.

My problem is, once the UICollectionView has been scrolled, some of the cells seem to be corrupt.

A corrupt cell shows multiple images stacked on top of each other, the top most image is the one it should be showing, and images underneath are the ones that should be used in other cells.

My best guess is that this has something to do with the way cells inside a UICollectionView are reused, but I am open to suggestions.

This is the delegate code I use for creating cells within the UICollectionView:

// creates the individual cells to go in the menu view
- (UICollectionViewCell*) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    // create collection view cell
    UICollectionViewCell * cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

    // create a uiview where we can place all views that need to go into this cell
    UIView * contents=[[UIView alloc] initWithFrame:cell.contentView.bounds];
    [contents setBackgroundColor:[UIColor clearColor]];
    [cell.contentView addSubview:contents];

    // add a button image
    NSString * buttonPath=[[NSBundle mainBundle] pathForResource:@"button" ofType:@"png" inDirectory:[[buttons objectAtIndex:indexPath.row] objectForKey:@"name"]];
    UIImage * button=[UIImage imageWithContentsOfFile:buttonPath];
    UIImageView * buttonView=[[UIImageView alloc] initWithImage:button];
    [buttonView setContentMode:UIViewContentModeScaleAspectFit];
    [buttonView setFrame:contents.bounds];
    [contents addSubview:buttonView];

    // set tag to the indexPath.row so we can access it later
    [cell setTag:indexPath.row];

    // add interactivity
    UITapGestureRecognizer * tap=[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onButtonTapped:)];
    [tap setNumberOfTapsRequired:1];
    [cell addGestureRecognizer:tap];

    // return the cell
    return cell;

}

I can provide more code if required.

How can I stop the cells from corrupting?

1
  • You are right, it is exactly the way you reuse the Cells. Because you are just adding layer after layer on your cell with the addSubview: calls. Oct 9, 2013 at 10:35

7 Answers 7

42

The problem is that you keep adding views to the UICollectionViewCell as they are being reused automagically by the UICollectionView. So the old UIImageView's are still on the cell as you are adding one more as the cellForItemAtIndexPath: is called.

DO NOT USE addSubview:!

Instead you could make a custom cell with all the views you want already in them. So that when the cellForItemAtIndexPath: is called you only need to set the contents of this CustomCollectionViewCell instead.

This way it will certainly stop being corrupted.


How to build a CustomCell.

Step1: Create the .h & .m class.

CustomCell.h

#import <UIKit/UIKit.h>

@interface CustomCell : UICollectionViewCell
{
    UIImageView *imageView;
}

@property (nonatomic, retain) UIImageView *imageView; //this imageview is the only thing we need right now.

@end

CustomCell.m

#import "CustomCell.h"

@implementation CustomCell

@synthesize imageView;

- (id)initWithFrame:(CGRect)aRect
{
    if (self = [super initWithFrame:aRect])
    {
         //we create the UIImageView in this overwritten init so that we always have it at hand.
         imageView = [UIImageView alloc] init];
         //set specs and special wants for the imageView here.
         [self addSubview:imageView]; //the only place we want to do this addSubview: is here!

         //You wanted the imageView to react to touches and gestures. We can do that here too.
         UITapGestureRecognizer * tap=[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onButtonTapped:)];
        [tap setNumberOfTapsRequired:1];
        [self addGestureRecognizer:tap];


        //We can also prepare views with additional contents here!
        //just add more labels/views/whatever you want.
    }
    return self;
}

-(void)onButtonTapped:(id)sender
{
    //the response to the gesture.
    //mind that this is done in the cell. If you don't want things to happen from this cell.
    //then you can still activate this the way you did in your question.

}

Step2: Import it! Now that we created the CustomCell we can import it in the class we want to use it in.

Step3: Use it in action!

// creates the individual cells to go in the menu view
- (CustomCell*) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    // create collection view cell
    CustomCell *cell = (CustomCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"CustomCell" forIndexPath:indexPath]; //this is the place where the CustomCell does his magic.
    //Make sure to use the CustomCellReuseId that you register in the viewdidload/loadview (step4)

    // add a button image
    NSString * buttonPath=[[NSBundle mainBundle] pathForResource:@"button" ofType:@"png" inDirectory:[[buttons objectAtIndex:indexPath.row] objectForKey:@"name"]];

    cell.imageView.image = [UIImage imageWithContentsOfFile:buttonPath]; //place the image on the CustemCell.imageView as we prepared.

    // set tag to the indexPath.row so we can access it later
    [cell setTag:indexPath.row]; //we don't need this to access the cell but I left this in for your personal want.

/*
 * we can now do this from the CustomCell as well!
 *
    // add interactivity
    UITapGestureRecognizer * tap=[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onButtonTapped:)];
    [tap setNumberOfTapsRequired:1];
    [cell addGestureRecognizer:tap];
*/
    // return the cell
    return cell;

}

Step4: Register the cell to the collectionView

in the viewDidLoad / loadView add this line:

[_collectionView registerClass:[CustomCell class] forCellWithReuseIdentifier:@"CustomCell"];

Step5: Enjoy! Your CustomCell is done. Now do whatever you like and don't forget to get some coffee too.

18
  • can you show how i would implement a CustomerCollectionViewCell ?
    – Jimmery
    Oct 9, 2013 at 12:56
  • Of course. You want it done with foreknowledge of a storyboard or pure code? Oct 9, 2013 at 12:57
  • I hate doing this in storyboard too :P Anyway this should be it in pure code. Let me know if everything is clear. Oct 9, 2013 at 13:24
  • 1
    Ah you need to cast the cell still. ^^ just a sec updating now. Probably should make the return value (CustomCell *) too. I'm here until this is done correctly so Ima getting u that answer u need! Oct 9, 2013 at 14:58
  • 1
    As long as you don't do it inside the cellForItemAtIndexPath: function. The CustomCell is fully customisable for your own design. This "custom"-cell and all that is inside is being properly reused by the system. Sep 8, 2014 at 9:46
6

Right after

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

Just add this line,

[[[cell contentView] subviews] makeObjectsPerformSelector:@selector(removeFromSuperview)];
1
  • what is the reason for that? Besides, it did not work :( Feb 2, 2016 at 6:23
4

For those who are looking for a Swifty answer, add this function to your CustomCell class:

override func prepareForReuse() {
    contentView.subviews.forEach({ $0.removeFromSuperview() })
    // replace contentView with the superview of the repeating content.
}
2
  • 1
    This worked for me great. For beginners it means you have to add the override function to swift file where you connected the outlets to. see class DeviceCollectionViewCell: UICollectionViewCell { @IBOutlet weak var deviceName: UILabel! @IBOutlet weak var Capability: UILabel! @IBOutlet weak var brandLabel: UILabel! @IBOutlet weak var SVGIconview: UIView! override func prepareForReuse() { SVGIconview.subviews.forEach({ $0.removeFromSuperview() }) } }
    – Heki
    Dec 3, 2017 at 12:38
  • You saved my day ! Thank you very much !
    – iKK
    Apr 19, 2020 at 20:51
3

That Happen because you add every time a UIImageView to your cell for fix this problem you have to Make a custom cell and then use it like take:

Custom.h

#import <UIKit/UIKit.h>

@interface CustomCell : UICollectionViewCell

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end

Custom.m

#import "CustomCell.h"

@implementation CustomCell

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
}
*/

@end

Your Controller

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

    CustomCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"CustomCell" forIndexPath:indexPath];

    NSString * buttonPath=[[NSBundle mainBundle] pathForResource:@"button" ofType:@"png" inDirectory:[[buttons objectAtIndex:indexPath.row] objectForKey:@"name"]];
    UIImage * button=[UIImage imageWithContentsOfFile:buttonPath];

    [cell.imageView setImage:button];

    return cell;
}

You have also to set 'CustomCell' like Identifier to the Cell in IB

1

This is for removing duplicate text from label in uicollectionviewcell.

// Viewdidload
[_collectionView registerClass:[UICollectionviewcell class]     forCellWithReuseIdentifier:@"cellIdentifier"];



//in this method create label like this
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
  {
     UICollectionViewCell *cell=[collectionView   dequeueReusableCellWithReuseIdentifier:@"cellidentifier" forIndexPath:indexPath];
     for (UILabel *lbl in cell.contentView.subviews)
        {
            if ([lbl isKindOfClass:[UILabel class]])
            {
                [lbl removeFromSuperview];
            }
        }
     UILabel *nameLbl=[[UILabel alloc] initWithFrame:CGRectMake(0, 10, 50, 20)];
     nameLbl.text=[Array objectAtIndex:indexpath.row];                                                                                                                                  
     nameLbl.textColor=[UIColor whiteColor];
     [cell.contentView addSubview:nameLbl];
     return cell;

   }
0

For anyone who is adding UICollectionView programmatically and have a custom cell, in other words no XIB file, then you have to add this line to viewDidLoad

[_collectionView registerClass:[CustomCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
0
-1
for (UIView *prevSubview in cell.contentView.subviews) {
    [prevSubview removeFromSuperview];
}
3
  • This is how to remove them but they should not be generated so you don't need to delete them
    – Alex Cio
    Oct 26, 2015 at 10:06
  • 1
    this is useful when the previous collection view cell content has a subview and you want to remove that and add a new subview. this would be the case when you are setting it as an image view .
    – vp_gold
    Oct 28, 2015 at 5:26
  • Describe what you post!
    – Alex Cio
    Oct 28, 2015 at 9:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.