Label Overlapping in CollectionView

Question

I have implement the collection view with image and labels. The Image is working fine but labels are overlapping. I have implemented all the required methods but unable to find the problem for label overlapping. My Code is provided below

 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 40;
}
//loading data
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

   aProduct=[featuredProductsArray objectAtIndex:indexPath.row];
    UIImageView* imageView=[[UIImageView alloc]initWithFrame:CGRectMake(10, 10, cell.frame.size.width-20, cell.frame.size.width-20)];
    //imageView.image=[UIImage imageNamed:@"ad_share.png"];
    NSString* imageUrl=[aProduct.SmallImageLists firstObject];

    [imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl]
             placeholderImage:[UIImage imageNamed:@"ad_share.png"]];

    [cell addSubview:imageView];

    UILabel *lblTitle=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-60, cell.frame.size.width, 30)];
    lblTitle.text=aProduct.DealTitle;
    lblTitle.font=[UIFont fontWithName:@"HelveticaNeue-Thin" size:12.0];
     lblTitle.textAlignment=NSTextAlignmentCenter;
    [cell addSubview:lblTitle];



    UILabel *lblPrice=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-30, cell.frame.size.width, 30)];
    lblPrice.text=aProduct.DealPrice;
    lblPrice.font=[UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0];
     lblPrice.textAlignment=NSTextAlignmentCenter;
    [cell addSubview:lblPrice];


    cell.backgroundColor=[UIColor colorWithRed:228.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:0.5];
    [cell.layer setCornerRadius:5.0f];
    [cell.layer setBorderColor:[UIColor lightGrayColor].CGColor];
    [cell.layer setBorderWidth:0.2f];
    [cell.layer setShadowColor:[UIColor colorWithRed:225.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:1.0].CGColor];
    [cell.layer setShadowOpacity:1.0];
    [cell.layer setShadowRadius:5.0];
    [cell.layer setShadowOffset:CGSizeMake(5.0f, 5.0f)];

    return cell;
}

    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(self.view.frame.size.width/2-10, self.view.frame.size.width/2+30);
}

The screenshot is provided below

Answer 1

The problem is because cells are reused. Each time they are reused, you add more labels and images on cells. That why you see labels are overlapped.

In my opinion, there are 2 ways to fix it:

• Make a subclass of UICollectionViewCell. Create UIImages and UILabels when cell is initialized on subclass. An on cellForItemAtIndexPath use UIImages and UILabels without initizlize them again. For example

  - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
  {
    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
  
    aProduct=[featuredProductsArray objectAtIndex:indexPath.row];
  
    NSString* imageUrl=[aProduct.SmallImageLists firstObject];
  
    [cell.imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl]
      placeholderImage:[UIImage imageNamed:@"ad_share.png"]];
  
    cell.lblTitle.text=aProduct.DealTitle;
    cell.lblTitle.font=[UIFont fontWithName:@"HelveticaNeue-Thin" size:12.0];
    cell.lblTitle.textAlignment=NSTextAlignmentCenter;
  
  
    cell.lblPrice.text=aProduct.DealPrice;
    cell.lblPrice.font=[UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0];
    cell.lblPrice.textAlignment=NSTextAlignmentCenter;
  
  
    cell.backgroundColor=[UIColor colorWithRed:228.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:0.5];
    [cell.layer setCornerRadius:5.0f];
    [cell.layer setBorderColor:[UIColor lightGrayColor].CGColor];
    [cell.layer setBorderWidth:0.2f];
    [cell.layer setShadowColor:[UIColor colorWithRed:225.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:1.0].CGColor];
    [cell.layer setShadowOpacity:1.0];
    [cell.layer setShadowRadius:5.0];
    [cell.layer setShadowOffset:CGSizeMake(5.0f, 5.0f)];
  
    return cell;
  }
  

• Another way is remove cell's subviews when reusing it.

  - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
  {
    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
  
    // Remove subviews
    for (UIView *v in cell.contentView.subviews) {
      [v removeFromSuperview];
    }
  
    aProduct=[featuredProductsArray objectAtIndex:indexPath.row];
    UIImageView* imageView=[[UIImageView alloc]initWithFrame:CGRectMake(10, 10, cell.frame.size.width-20, cell.frame.size.width-20)];
    //imageView.image=[UIImage imageNamed:@"ad_share.png"];
    NSString* imageUrl=[aProduct.SmallImageLists firstObject];
  
    [imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl]
      placeholderImage:[UIImage imageNamed:@"ad_share.png"]];
  
    [cell addSubview:imageView];
  
    UILabel *lblTitle=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-60, cell.frame.size.width, 30)];
    lblTitle.text=aProduct.DealTitle;
    lblTitle.font=[UIFont fontWithName:@"HelveticaNeue-Thin" size:12.0];
    lblTitle.textAlignment=NSTextAlignmentCenter;
    [cell addSubview:lblTitle];
  
  
  
    UILabel *lblPrice=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-30, cell.frame.size.width, 30)];
    lblPrice.text=aProduct.DealPrice;
    lblPrice.font=[UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0];
    lblPrice.textAlignment=NSTextAlignmentCenter;
    [cell addSubview:lblPrice];
  
  
    cell.backgroundColor=[UIColor colorWithRed:228.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:0.5];
    [cell.layer setCornerRadius:5.0f];
    [cell.layer setBorderColor:[UIColor lightGrayColor].CGColor];
    [cell.layer setBorderWidth:0.2f];
    [cell.layer setShadowColor:[UIColor colorWithRed:225.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:1.0].CGColor];
    [cell.layer setShadowOpacity:1.0];
    [cell.layer setShadowRadius:5.0];
    [cell.layer setShadowOffset:CGSizeMake(5.0f, 5.0f)];
  
    return cell;
  }