UITableview items becomes bold after scrolling up

Question

Ok maybe I am being too picky. Apologies in advance if you cannot see it, but in the second pic, the item on the row is pixellated a bit, or as if a word was placed on top of a word. This only happens after I scroll up on the tableview, otherwise, it is similar to the first image.

First pic:

Second pic (you can see the difference in the font here):

it's a bit more bold and unrefined once I scroll up.

I frankly have no idea why. The tableview is being loaded normally. Any help, hunch, or suggestion would be greatly associated, even if it can point me to the right area.

Here is the code for the second image's tableview.

static NSString *CellIdentifier = @"OrderProductCell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
    cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1    reuseIdentifier:CellIdentifier] autorelease];

}

//cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier] autorelease];


//configure cell, display name and cost of each item
OrderProduct *p = [[order.items allObjects] objectAtIndex:indexPath.row];

UILabel *lableName=[[UILabel alloc]initWithFrame:CGRectMake(10, 16, 300, 20)];
lableName.backgroundColor=[UIColor clearColor];
lableName.font=[UIFont boldSystemFontOfSize:19];
[lableName setFont:[UIFont fontWithName:@"Arial-Bold" size:12.0]];
lableName.text=p.name;

//UILabel *counterNumber=[[UILabel alloc]initWithFrame:CGRectMake(10, 25, 300, 20)];
//counterNumber.backgroundColor=[UIColor clearColor];
//counterNumber.font=[UIFont systemFontOfSize:12];
//counterNumber.text=[NSString stringWithFormat:@"Scan time :%@",p.scannerCounter];
[cell.detailTextLabel setText:[NSString stringWithFormat:@"%@ %.02f",p.currency, p.cost]];
cell.imageView.image = [UIImage imageNamed:p.image];
[cell addSubview:lableName];
//[cell release];
//[cell addSubview:counterNumber];
return cell;

Answer 1

This is happening because you are not reusing cells and hence you are basically adding the label again and again instead of using the already existing one.

Just put the following code inside the if(cell == nil):

static NSString *CellIdentifier = @"OrderProductCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
UILabel *lableName;
if(cell==nil){  
    // this is where we should initialize and customize the UI elements,
    // or in this case your label.
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier];
    lableName=[[UILabel alloc]initWithFrame:CGRectMake(10, 16, 300, 20)];
    lableName.backgroundColor=[UIColor clearColor];
    lableName.font=[UIFont boldSystemFontOfSize:19];
    [lableName setFont:[UIFont fontWithName:@"Arial-Bold" size:12.0]];
    [cell addSubview:lableName];
}
// this is where we should assign the value.
OrderProduct *p = [[order.items allObjects] objectAtIndex:indexPath.row];    
lableName.text = p.name;
/*
assign other values if any
...
*/
return cell;

this way the lableName will not be added to the cell again and again and hence this problem will not occur.

The best way of reusing a cell properties is initializing and customizing everything inside the if(cell==nil) and only adding the value of the element outside the if condition.

Answer 2

Both line 1 and line 2 are doing same setting fonts

    lableName.font=[UIFont boldSystemFontOfSize:19]; // line 1

    [lableName setFont:[UIFont fontWithName:@"Arial-Bold" size:12.0]]; // line 2

    [cell.contentView addSubview:lableName];

    UILabel *lableName    = nil;

//Inside your cellForRowAtIndexPath put this code
static NSString *CellIdentifier = @"OrderProductCell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
    cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1    reuseIdentifier:CellIdentifier] autorelease];

}

//cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier] autorelease];


//configure cell, display name and cost of each item
OrderProduct *p = [[order.items allObjects] objectAtIndex:indexPath.row];
    if (cell == nil)
    {
    cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1    reuseIdentifier:CellIdentifier] autorelease];
    lableName=[[UILabel alloc]initWithFrame:CGRectMake(10, 16, 300, 20)];
    lableName.backgroundColor=[UIColor clearColor];
    [lableName setFont:[UIFont fontWithName:@"Arial-Bold" size:12.0]]; // set fonts only once
    [cell.contentView addSubview:lableName];
    }

Answer 3

1. Don't add subviews to cell directly, add it to contentView of cell
2. While reusing the cell you need to remove the existing label first and add new label or use the existing cell instead of adding new one.

Change your code like:

static NSString *CellIdentifier = @"OrderProductCell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
UILabel *lableName    = nil;
if (cell == nil)
{
    cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1    reuseIdentifier:CellIdentifier] autorelease];
    lableName=[[UILabel alloc]initWithFrame:CGRectMake(10, 16, 300, 20)];
    lableName.backgroundColor=[UIColor clearColor];
    lableName.font=[UIFont boldSystemFontOfSize:19];
    [lableName setFont:[UIFont fontWithName:@"Arial-Bold" size:12.0]];
    lableName.tag = 7;
    [cell.contentView addSubview:lableName];
}


//configure cell, display name and cost of each item
OrderProduct *p = [[order.items allObjects] objectAtIndex:indexPath.row];
lableName = (UILabel *)[cell.contentView viewWithTag:7];
lableName.text=p.name;

[cell.detailTextLabel setText:[NSString stringWithFormat:@"%@ %.02f",p.currency, p.cost]];
cell.imageView.image = [UIImage imageNamed:p.image];

return cell;