Reusability issue on UICollectionView

Question

I had worked with UITableView but I have never ever use of UICollectionView in my apps. So I want to create UICollectionView programmatic

Answer 1

You can do it with two way.

Remove UILabel form view.

 - (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 *lblCategoryTitle =[[UILabel alloc]init];

    [lblCategoryTitle  setFont: [UIFont fontWithName:@"OpenSans-Bold" size:14]];
    lblCategoryTitle.textAlignment = NSTextAlignmentCenter;
    lblCategoryTitle.frame = CGRectMake(3.5, 90, 90, 24);
    lblCategoryTitle.textColor = [UIColor blackColor];
    lblCategoryTitle.text = @"Product 1";
    lblCategoryTitle.backgroundColor = [UIColor clearColor];
    lblCategoryTitle.numberOfLines = 2;
    [cell.contentView addSubview:lblCategoryTitle];
    return cell;
}

Use tag to get Label

 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
    UILabel *lblCategoryTitle =(UILabel *) [cell viewWithTag:5];
    if (!lblCategoryTitle) {
        lblCategoryTitle=[[UILabel alloc]init];
        [cell.contentView addSubview:lblCategoryTitle];

    }
    [lblCategoryTitle  setFont: [UIFont fontWithName:@"OpenSans-Bold" size:14]];
    lblCategoryTitle.tag=5;
    lblCategoryTitle.textAlignment = NSTextAlignmentCenter;
    lblCategoryTitle.frame = CGRectMake(3.5, 90, 90, 24);
    lblCategoryTitle.textColor = [UIColor blackColor];
    lblCategoryTitle.text = @"Product 1";
    lblCategoryTitle.backgroundColor = [UIColor clearColor];
    lblCategoryTitle.numberOfLines = 2;
    return cell;
}

Answer 2

The problem is in your collectionView:cellForItemAtIndexPath: method. You are adding those subviews every single time a cell is reused, on top of each other.

You should create a UICollectionViewCell subclass and add all of the extra subviews you want into its initializer. This will make sure they only get added once.

sample code:

Here is an example of how you would subclass UICollectionViewCell

@interface MyCustomCell : UICollectionViewCell

@property (nonatomic, strong) UILabel *customLabel;
@property (nonatomic, strong) UIImageView *customImageView;
@end


// in implementation file
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) 
    {
        // initialize label and imageview here, then add them as subviews to the content view
    }
    return self;
}

Then when you are grabbing a cell you just do something like:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    MyCustomCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    if (cell.selected)
        cell.backgroundColor = [UIColor lightGrayColor]; // highlight selection cell
    else
        cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"background-grid.png"]]; // Default Cell

    cell.customImageView.image = // whatever
    cell.customLabel.text = // whatever

    return cell;
}