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

trungduc · Accepted Answer · 2018-04-18T09:47:03.773

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;
}

No. I load the collectionview with nib file which solves my problem according to your first solution. I tired your second solution which caused crash .. — Mahboob Nur, Apr 18 '18 at 09:43
@MahboobiOSDeveloper I have updated my answer. A small typos when I use `cell.contentView` instead of `cell.contentView.subviews`. If my answer is correct, feel free to mark it as right answer ;) — trungduc, Apr 18 '18 at 09:47

skJosh · Answer 2 · 2018-04-18T09:55:09.593

You already have got the answer. But another solution would be, since every time you are creating a new instance of UILabel and adding it the reusable cell which is the reason for the issue. Using viewwithtag should also work in your case. For example.

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

aProduct=[featuredProductsArray objectAtIndex:indexPath.row];

UIImageView* imageView = [cell viewWithTag:10];
if (imageView == nil) {
    imageView = [[UIImageView alloc]initWithFrame:CGRectMake(10, 10, cell.frame.size.width-20, cell.frame.size.width-20)];
    imageView.tag = 10;
    [cell addSubview:imageView];

}
imageView.image=[UIImage imageNamed:@"ad_share.png"];
NSString* imageUrl=[aProduct.SmallImageLists firstObject];

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



UILabel *lblTitle = [cell viewWithTag:20];

if (lblTitle == nil) {
    lblTitle=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-60, cell.frame.size.width, 30)];
    lblTitle.tag = 20;
    [cell addSubview:lblTitle];

}

lblTitle.text= aProduct.DealTitle;
lblTitle.font=[UIFont fontWithName:@"HelveticaNeue-Thin" size:12.0];
lblTitle.textAlignment=NSTextAlignmentCenter;



UILabel *lblPrice = [cell viewWithTag:30];

if (lblPrice == nil) {
    lblPrice=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-30, cell.frame.size.width, 30)];
    lblPrice.tag = 30;
    [cell addSubview:lblPrice];

}

lblPrice.text= aProduct.DealPrice;
lblPrice.font=[UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0];
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;



}

Label Overlapping in CollectionView

2 Answers2