Cell Label text overlapping in cells

Question

I am attempting to add a UILabelto my collectionViewCell. However, after a few cell text begins to overlap with data from the cells before.

UPDATE: This only seems to happen on my phone (iphone 5), but not on the simulator (2013 macbook air).

As seen here:

I am implementing the whole view programmatically. The issue doesn't seem to be with any of the elements of the collectionview, so I would assume the problem applies to table views as well. I am not sure if I am missing something along the lines of:

if(cell == nil) {// do something }

If it is that, can someone shed some light on what this does? If that's not the issue I am really not sure what is causing this. I am also using an NSMutableAttributedString, but that is not the issue either as I tried to insert just a regular string and got the same results.

My code:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
    TTSong *tempSong = [songArray objectAtIndex:indexPath.row];

UILabel *cellLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 110, 150, 40)];
    [cellLabel setTextColor:[UIColor whiteColor]];
    [cellLabel setBackgroundColor:[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8]];
    [cellLabel setFont:[UIFont fontWithName: @"HelveticaNeue-Light" size: 12.0f]];
    [cellLabel setNumberOfLines:2];
    NSString * labelString = [[tempSong.artist stringByAppendingString:@"\n"] stringByAppendingString:tempSong.title];
    NSMutableAttributedString * attributedString = [[NSMutableAttributedString alloc] initWithString:labelString];
    NSRange boldedRange = NSMakeRange(0, tempSong.artist.length);
    [attributedString addAttribute: NSFontAttributeName value:[UIFont fontWithName:@"HelveticaNeue" size:14.0f] range:boldedRange];
    [cellLabel setAttributedText:attributedString];
    [cell addSubview:cellLabel];

    return cell;
}

Here is how I set the size of the cells:

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(150, 150);
}

Here is how I setup my collectionView:

- (void)viewDidLoad
{
    songArray = [[NSMutableArray alloc] init];

    UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
    _collectionView=[[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
    [_collectionView setDataSource:self];
    [_collectionView setDelegate:self];

    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
    [_collectionView setBackgroundColor:[UIColor blackColor]];

    [self.view addSubview:_collectionView];
[super viewDidLoad];
}

Answer 1

You just need to tick the "clears graphic context" property of the label in storyboard.

Answer 2

Remove the label and reinitialize it when cell is display.

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
    TTSong *tempSong = [songArray objectAtIndex:indexPath.row];

    for (UILabel *lbl in cell.contentView.subviews)
    {
        if ([lbl isKindOfClass:[UILabel class]])
        {
            [lbl removeFromSuperview];
        }
    }

    UILabel *cellLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 110, 150, 40)];
    [cellLabel setTextColor:[UIColor whiteColor]];
    [cellLabel setBackgroundColor:[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8]];
    [cellLabel setFont:[UIFont fontWithName: @"HelveticaNeue-Light" size: 12.0f]];
    [cellLabel setNumberOfLines:2];
    NSString * labelString = [[tempSong.artist stringByAppendingString:@"\n"] stringByAppendingString:tempSong.title];
    NSMutableAttributedString * attributedString = [[NSMutableAttributedString alloc] initWithString:labelString];
    NSRange boldedRange = NSMakeRange(0, tempSong.artist.length);
    [attributedString addAttribute: NSFontAttributeName value:[UIFont fontWithName:@"HelveticaNeue" size:14.0f] range:boldedRange];
    [cellLabel setAttributedText:attributedString];
    [cell addSubview:cellLabel];

    return cell;
}

Answer 3

Cells are already has the elements and also you creating(Adding) the labels by programmatically.

What you have to do is :

1 .Remove the UILabels within the UITableViewCell in the UIStoryBoard && create Programmatically.

   - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
        TTSong *tempSong = [songArray objectAtIndex:indexPath.row];
    
    UILabel *cellLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 110, 150, 40)];
        [cellLabel setTextColor:[UIColor whiteColor]];
        [cellLabel setBackgroundColor:[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8]];
        [cellLabel setFont:[UIFont fontWithName: @"HelveticaNeue-Light" size: 12.0f]];
        [cellLabel setNumberOfLines:2];
        NSString * labelString = [[tempSong.artist stringByAppendingString:@"\n"] stringByAppendingString:tempSong.title];
        NSMutableAttributedString * attributedString = [[NSMutableAttributedString alloc] initWithString:labelString];
        NSRange boldedRange = NSMakeRange(0, tempSong.artist.length);
        [attributedString addAttribute: NSFontAttributeName value:[UIFont fontWithName:@"HelveticaNeue" size:14.0f] range:boldedRange];
        [cellLabel setAttributedText:attributedString];
        [cell addSubview:cellLabel];
    
        return cell;
    }



                              

OR

2.Add the UILabel's in the storyboard and use the reference of it && Don't create in the code just refer(point) it.

Use the Tag property to point on the elements.

  - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
        TTSong *tempSong = [songArray objectAtIndex:indexPath.row];
    
    UILabel *cellLabel = (UILabel*)[cell ViewWithTag:25];
        [cellLabel setTextColor:[UIColor whiteColor]];
        [cellLabel setBackgroundColor:[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8]];
        [cellLabel setFont:[UIFont fontWithName: @"HelveticaNeue-Light" size: 12.0f]];
        [cellLabel setNumberOfLines:2];
        NSString * labelString = [[tempSong.artist stringByAppendingString:@"\n"] stringByAppendingString:tempSong.title];
        NSMutableAttributedString * attributedString = [[NSMutableAttributedString alloc] initWithString:labelString];
        NSRange boldedRange = NSMakeRange(0, tempSong.artist.length);
        [attributedString addAttribute: NSFontAttributeName value:[UIFont fontWithName:@"HelveticaNeue" size:14.0f] range:boldedRange];
        [cellLabel setAttributedText:attributedString];
      //  [cell addSubview:cellLabel]; Don't add this again
    
        return cell;
    }