(custom) UITableViewCell's mixing up after scrolling

Question

Ive been on this problem for a few weeks now.

Basically when i scroll up/down within a TableView thar uses a Custom Cell designed in IB all the content gets mixed up and misplaced

Ive tried multiple solutions but to no avail, your gonna have to excuse my code a little bit.

People keep suggesting to make a subView for the table cell but i have no idea how to do that =/ still quite new to iOS development so if you have a possible answer, can you detail it as much as possible please.

Once again, sorry for my code =/

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

    static NSString *MyIdentifier = @"MyIdentifier";
    UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:MyIdentifier];

    NSInteger intCellTag;

    NSDictionary *dictionary = [[[self.tableDataSource objectAtIndex: indexPath.section] objectForKey: @"Rows"] objectAtIndex: indexPath.row];


    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:MyIdentifier] autorelease];


        [[[NSBundle mainBundle] loadNibNamed:@"EventsCustomTVCell" owner:self options:nil] lastObject];
        cell = tvCell;
        self.tvCell = nil;


        cell.textLabel.backgroundColor = [UIColor clearColor];
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

        cell.tag = intCellTag;


        intCellTag++;

        UIImage *customCellBG = [UIImage imageNamed:@"EventsCustomTableCellBG.png"];
        UIImageView *customCellBGImageView = [[UIImageView alloc] initWithImage: customCellBG];
        customCellBGImageView.contentMode = UIViewContentModeScaleToFill;
        cell.backgroundView = customCellBGImageView;
        [customCellBGImageView release];




        [cell.contentView addSubview:imgThumbnail];
        [cell.contentView addSubview:lblName];
        [cell.contentView addSubview:lblDescription];
        [cell.contentView addSubview:lblDate];

    }



    imgThumbnail.image = [UIImage imageNamed:[dictionary objectForKey: @"Thumbnail"]];
    lblName.text = [dictionary objectForKey:@"Title"];
    lblDescription.text = [dictionary objectForKey:@"Description"];
    lblDate.text = [dictionary objectForKey:@"Date"];


    return cell;


}

Answer 1

iOS Swift: I have done following to resolve my issue

let CellIdentifier: String = "CellIdentifier\(indexPath.section)\(indexPath.row)"

        var cell: UITableViewCell? = tableView.dequeueReusableCellWithIdentifier(CellIdentifier) as UITableViewCell?

        if cell == nil {
            cell = UITableViewCell(style: UITableViewCellStyle.Value1, reuseIdentifier: CellIdentifier)
        }

Answer 2

It looks like you're trying to mix metaphors in defining each UITableViewCell -- loading from .xib, and creating subviews manually. Nothing wrong with this of course, but you could put the image and labels into the tableviewCell directly, like this:

and here's the code to display each row (naturally in IB you've assigned non-zero unique tags to each UIKit object you want to customize on a per-row basis)

#define kImageTag 1
#define kLabel1Tag 2
#define kLabel2Tag 3
#define kLabel3Tag 4

// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *CellIdentifier = @"MyTvCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) 
    {
        self.tvCell = nil;
        [[NSBundle mainBundle] loadNibNamed:@"TvCell" owner:self options:nil];
        cell = self.tvCell;
    }

    UIImageView *iv =  (UIImageView *) [cell viewWithTag:kImageTag];
    UILabel *lbl1 = (UILabel *) [cell viewWithTag:kLabel1Tag];
    UILabel *lbl2 = (UILabel *) [cell viewWithTag:kLabel2Tag];
    UILabel *lbl3 = (UILabel *) [cell viewWithTag:kLabel3Tag];

    iv.image = [UIImage imageNamed:@"myimage.png"];
    lbl1.text = @"howdy";
    lbl2.text = @"there";
    lbl3.text = @"foo";

    return cell;
}

Answer 3

You are adding the same subview objects to each cell

[cell.contentView addSubview:imgThumbnail];
[cell.contentView addSubview:lblName];
[cell.contentView addSubview:lblDescription];
[cell.contentView addSubview:lblDate];

Each cell needs its own set of subview objects.

Answer 4

imgThumbnail
lblName
lblDescription
lblDate

you should assign a tag to these objects (you can do this in interface builder).
And if you configure the cell you query the cell for the tag and set its properties.

Right now you keep a reference to labels from the last cell that was added, and each time the table asks for a new cell you change these labels.

Lets say you assign tag 10 to the label lblDescription in interfacebuilder

you would then replace

lblDescription.text = [dictionary objectForKey:@"Description"];

with

UILabel *lblDescription = (UILabel *)[cell viewWithTag:10];
lblDescription.text = [dictionary objectForKey:@"Description"];

EDIT: I assumed that imgThumbnail etc are subviews of your cell, but you add them again. If my assumption is right you should get rid of [cell.contentView addSubview...].

If I'm wrong you should get rid of imgThumbnail etc as instance variable of your viewcontroller. And add individual UIViews each time a new cell is created. Like you do with the backgroundview. but you have assign a tag and use that tag when you configure your cell values.

Answer 5

You can use

NSString *cellIdentifier =[NSString stringWithFormat:@"%d",indexPath.row];

instead of

static NSString *CellIdentifier = @"Cell";