view duplicated on different cells after cell is selected - ios

Question

I have a tableviewcontroller and a custom cell. What i wanna do is when i tap the cell, the cell is supposed to exapand and a view (graph view actually) is supposed to become subviewed inside the cell. Now the problem is that everything works fine but the graph is duplicated on some other cells as well.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
ProductsTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"Cell"];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
if (cell == nil)
{
NSLog(#"empty cell");
}
//Product Label
cell.productNameLabel.text = #"something";
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
indexPathforChart = indexPath;
[self performSelector:#selector(addChart:) withObject:indexPath afterDelay:0.2];
[tableView beginUpdates];
[tableView endUpdates];
[tableView scrollToNearestSelectedRowAtScrollPosition:UITableViewScrollPositionTop animated:YES];
}
-(void)addChart:(NSIndexPath*)indexPath
{
BEMSimpleLineGraphView *myGraph = [[BEMSimpleLineGraphView alloc] initWithFrame:CGRectMake(0, 60, screenSize.width, 200)];
myGraph.dataSource = self;
myGraph.delegate = self;
myGraph.interpolateNullValues = YES;
myGraph.enableTouchReport = YES;
myGraph.tag = 100;
myGraph.animationGraphStyle = BEMLineAnimationDraw;
myGraph.enablePopUpReport = YES;
myGraph.enableXAxisLabel = YES;
myGraph.colorXaxisLabel = [UIColor darkGrayColor];
ProductsTableViewCell *cell = (ProductsTableViewCell*)[self.tableView cellForRowAtIndexPath:indexPath];
[cell.contentView addSubview:myGraph];
[cell setNeedsLayout];
[cell setNeedsDisplay];
myGraph.colorTop = [UIColor clearColor];
myGraph.colorBottom = [UIColor clearColor];
myGraph.colorLine = [UIColor darkGrayColor];
myGraph.colorPoint = [UIColor lightGrayColor];
}

Answer 1

This is caused by cell re-use.
ProductsTableViewCell *cell = (ProductsTableViewCell*)[self.tableView
cellForRowAtIndexPath:indexPath];
[cell.contentView addSubview:myGraph];
You added myGraph as a subview in the cell without removing it when the cell is re-used by some other index path while you scroll the table view.
The most appropriate way should be having a custom view inside the cell for drawing your graph, instead of adding/removing the graph view when needed. For the sake of scrolling performance, you may also cache the graph in case it will be used when user scrolls back and forth.

Answer 2

Cells are reused, so before loading a new cell you should implement the method prepareForReuse and add/remove or hidden/unhidden the views your cell requires.
So basically, ProductsTableViewCell should implement the method prepareForReuse. The easiest way to remove your BEMSimpleLineGraphView based on your code would be:
- (void) prepareForReuse{
UIView *v = [cell.contentView viewWithTag:100];
if ( v ) {
[v removeFromSuperView];
}
}
However, I don't consider using viewWithTag is the best solution so I would change the code into something similar to:
tableviewcontroller
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
ProductsTableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
[tableView beginUpdates];
[cell addChart];
[tableView endUpdates];
[tableView scrollToNearestSelectedRowAtScrollPosition:UITableViewScrollPositionTop animated:YES];
}
ProductsTableViewCell
#interface DLSContactUsViewController ()
#property (strong,nonatomic) BEMSimpleLineGraphView *myGraph;
#end
-(void)addChart
{
if ( ![self.myGraph isDescendantOfView] ){
[self.contentView addSubview:self.myGraph];
[self setNeedsLayout];
[self setNeedsDisplay];
}
}
- (BEMSimpleLineGraphView*) myGraph{
if ( !_myGraph ) {
_myGraph = [[BEMSimpleLineGraphView alloc] initWithFrame:CGRectMake(0, 60, screenSize.width, 200)];
_myGraph.dataSource = self;
_myGraph.delegate = self;
_myGraph.interpolateNullValues = YES;
_myGraph.enableTouchReport = YES;
_myGraph.tag = 100;
_myGraph.animationGraphStyle = BEMLineAnimationDraw;
_myGraph.enablePopUpReport = YES;
_myGraph.enableXAxisLabel = YES;
_myGraph.colorXaxisLabel = [UIColor darkGrayColor];
_myGraph.colorTop = [UIColor clearColor];
_myGraph.colorBottom = [UIColor clearColor];
_myGraph.colorLine = [UIColor darkGrayColor];
_myGraph.colorPoint = [UIColor lightGrayColor];
}
return _myGraph;
}
- (void) prepareForReuse{
if ( [self.myGraph isDescendantOfView] && !self.isSelected ) {
[myGraph removeFromSuperView];
}
}