Custom cell contents overlapping in UITableView

Question

I know this question is already asked many times, but my problem is some different.

I am creating a UIView and a UIImageView programmatically in cell's content view. When TableView appear first time it looking perfect, but when i scroll down and up , this seems overlapped.

Screenshot of without scroll:

Screenshot after scroll:

Code that i follow:

 viewForHead = [[UIView alloc]initWithFrame:CGRectMake(cell.viewForContents.frame.origin.x, cell.viewForContents.frame.origin.y-10, cell.viewForContents.frame.size.width, 45)];
viewForHead.backgroundColor = [UIColor colorWithRed:232.0/255.0 green:255.0/255.0 blue:16.0/255.0 alpha:1];
[cell.contentView addSubview:viewForHead];

UIImageView *imageViewForDP = [[UIImageView alloc]initWithFrame:CGRectMake(viewForHead.frame.origin.x-50, viewForHead.frame.origin.y-8, 60,60 )];
imageViewForDP.image = [UIImage imageNamed:@"dog_1.png"];
//[cell.viewForContents addSubview:imageViewForDP];
imageViewForDP.layer.cornerRadius = 30;
imageViewForDP.clipsToBounds = YES;
[viewForHead addSubview:imageViewForDP];

Please get me out from this problem . Thanks

Answer 1

Use this into your - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

if ([cell.contentView subviews]){
    for (UIView *subview in [cell.contentView subviews]) {
        [subview removeFromSuperview];
    }
}

Answer 2

You are adding your viewForHead as a subview each time the cell gets dequeued. So you're adding them on top of each other.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CELL"];

    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"CELL"] autorelease];

//      This is where you CREATE your cell contents.
        viewForHead = [[UIView alloc]initWithFrame:CGRectMake(cell.viewForContents.frame.origin.x, cell.viewForContents.frame.origin.y-10, cell.viewForContents.frame.size.width, 45)];
        viewForHead.backgroundColor = [UIColor colorWithRed:232.0/255.0 green:255.0/255.0 blue:16.0/255.0 alpha:1];
        [cell.contentView addSubview:viewForHead];

         UIImageView *imageViewForDP = [[UIImageView alloc]initWithFrame:CGRectMake(viewForHead.frame.origin.x-50, viewForHead.frame.origin.y-8, 60,60 )];
         imageViewForDP.image = [UIImage imageNamed:@"dog_1.png"];
//       [cell.viewForContents addSubview:imageViewForDP];
         imageViewForDP.layer.cornerRadius = 30;
         imageViewForDP.clipsToBounds = YES;
         imageView.tag = 1
         [viewForHead addSubview:imageViewForDP];

    }

//     this is where you UPDATE your viewForHead image and any other elements inside your cell
       UIImageView *imageView = [cell.contentView viewWithTag:1];
       imageView.image = // your new image

    return cell;

}

Subclassing your UITableViewCell and building your layout with a xib would be even better, then you could just access the cells properties directly. A much cleaner solution.

MyCustomCell *cell = [tableView dequeueReusableCellWithIdentifier@"CELL"];
if (cell == nil) {
    cell = [[MyCustomCell alloc] init]; // you ID is set in interface builder
}  

cell.imageView.image = // your new image here.
cell.someLabel.text = @"some new text here"

Answer 3

This problem is because of table view cell gets reuse and you are adding a view again on cell.

Try below code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MyIdentifier"];

if (cell == nil) {
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"MyIdentifier"] ;

    cell.selectionStyle = UITableViewCellSelectionStyleNone;
}

UIView *viewForHead = (UIView *)[cell.contentView  viewWithTag:1];
if (viewForHead==nil) {

    viewForHead = [[UIView alloc]initWithFrame:CGRectMake(cell.frame.origin.x, cell.frame.origin.y, cell.frame.size.width, 20)];
    viewForHead.backgroundColor = [UIColor colorWithRed:232.0/255.0 green:255.0/255.0 blue:16.0/255.0 alpha:0.5];
    viewForHead.tag = 1;
    [cell.contentView addSubview:viewForHead];
}
return cell;}