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

check if you are using re-usable cells, then try removing all subviews on cell's content view before adding it again! You can do it using "for .. in" loop — Nayan, Oct 14 '15 at 07:03

score 5 · Accepted Answer · answered Oct 14 '15 at 07:18

5

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

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

answered Oct 14 '15 at 07:18

1

Not the best solution as the entire cell would need to be recreated each time cellForRow gets called. It would be better to just not dequeue the cell in the first place than use this method. Even better is to reuse the cell (as apple intended) and just update the items that have changed. – Beau Nouvelle Oct 14 '15 at 07:28

Beau Nouvelle · Answer 2 · 2015-10-15T04:45:34.133

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"

score 0 · Answer 3 · answered Oct 14 '15 at 09:01

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

Custom cell contents overlapping in UITableView

3 Answers3